Bonsoir à tous,
Avant de commencer je vous souhaite une bonne année 2008.
Pour concevoir mon site j’ai repris un des tutoriels mis à disposition sur le site d’Alsa.
Pour faire simple, dans mon site, il y a le header, puis le menu, le contenu de la page, et ces deux derniers sont encadrés par deux marges : une à gauche, une à droite.
Le tout est fini par un pied de page.
Or lorsque je reprends mon code j’arrive à un résultat innatendu.
Je vous laisse constater par vous même : lien
Voici mes codes, en premier le (X)HTML, en second le CSS :
Sachant que j’aimerais arriver à ça : lien
Je vous remercie par avance de l’attention que vous voudrez bien accorder à mon problème.
Avant de commencer je vous souhaite une bonne année 2008.
Pour concevoir mon site j’ai repris un des tutoriels mis à disposition sur le site d’Alsa.
Pour faire simple, dans mon site, il y a le header, puis le menu, le contenu de la page, et ces deux derniers sont encadrés par deux marges : une à gauche, une à droite.
Le tout est fini par un pied de page.
Or lorsque je reprends mon code j’arrive à un résultat innatendu.
Je vous laisse constater par vous même : lien
Voici mes codes, en premier le (X)HTML, en second le CSS :
<body>
<div id="conteneur">
<div id="header"></div>
<div id="marge-gauche"></div>
<div id="marge-droite"></div>
<div id="menu"><?php include('menu.php') ?></div>
<div id="contenu">Bonjour tout le monde !</div>
<div id="footer"></div>
</div>
</body> body{
background:none;
margin:auto;
font-size:1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
width:950px;
}
div#conteneur{
position:relative;
width:950px;
background-color:#CCCCFF;
}
div#header{
width:950px;
height:150px;
background-image:url("images/header.jpg");
background-repeat:no-repeat;
}
div#menu{
width:800px;
height:50px;
background-color:navy;
margin-left:75px;
margin-right:75px;
}
div#marge-gauche{
width:75px;
background-image:url("images/marge-gauche");
background-repeat: no-repeat;
position: absolute;
left:0;
}
div#marge-droite{
width:75px;
background-image:url("images/marge-droite");
background-repeat: no-repeat;
position: absolute;
right:0;
}
div#contenu{
background-color:#FFFFFF;
width:800px; /* width = width (800) + padding (75*2) */
padding-left:75px;
padding-right:75px;
margin-left:75px;
margin-right:75px;
}
div#footer{
background-image:url("images/footer.jpg");
width:950px;
height:25px;
text-align:center;
font-size:0.8em;
} Sachant que j’aimerais arriver à ça : lien
Je vous remercie par avance de l’attention que vous voudrez bien accorder à mon problème.
