Centrer le contenu d'un site [CSS]
Résolu
Bonjour,
Je n'arrive pas à centrer mon site malgrès mes recherches sur le web :
HTML :
....
<body onLoad="form_load();">
<div class="contenu2">
<div class="haut">
<img class="banniere" src="img/banniere2.png" alt="gg" />
<h5 class="titre2">Cherchez, trouver, vendez GRATUITEMENT !</h5>
<img class="pub1" src="img/pub1.png" alt="gg" />
<ul class="menu">
<li class="menu1" tabindex="360"><a href="TotalAnnonce.php">Voir les annonces</a></li>
<li class="menu2" tabindex="370"><a href="SauvegardeAnnonce.php">Mes annonces sauvegardées</a></li>
<li class="menu3" tabindex="380"><a href="creer_annonce.php">Créer une annonce</a></li>
<li class="menu4" tabindex="390"><a href="Profil.php">Mon compte</a></li>
</ul>
<img class="pub2" src="img/pub2.png" alt="gg" />
....
</div>
<div class="centre">
<img class="centre1" src="img/centre1.png" alt="gg" />
<img class="pub3" src="img/pub3.png" alt="gg" />
<img class="centre3" src="img/centre3.png" alt="gg" />
</div>
</div>
</body>
</html>
CSS :
body
{
text-align: center ;
}
body .contenu2
{
width:970px;
margin:auto;
}
/* Haut du site */
.haut .banniere
{
width:970px;
height:170px;
position: absolute;
left: 0px;
top: 0px;
z-index:10;
background-color:#9abefe;
}
.haut .pub1
{
width:468px;
height:60px;
position: absolute;
left: 500px;
top: 2px;
z-index:20;
}
.....
si quelqu'un pourrais m'aidier s'il vous plait, j'espere que ce n'est pas à cause de mes position absolute. merci beaucoup
Je n'arrive pas à centrer mon site malgrès mes recherches sur le web :
HTML :
....
<body onLoad="form_load();">
<div class="contenu2">
<div class="haut">
<img class="banniere" src="img/banniere2.png" alt="gg" />
<h5 class="titre2">Cherchez, trouver, vendez GRATUITEMENT !</h5>
<img class="pub1" src="img/pub1.png" alt="gg" />
<ul class="menu">
<li class="menu1" tabindex="360"><a href="TotalAnnonce.php">Voir les annonces</a></li>
<li class="menu2" tabindex="370"><a href="SauvegardeAnnonce.php">Mes annonces sauvegardées</a></li>
<li class="menu3" tabindex="380"><a href="creer_annonce.php">Créer une annonce</a></li>
<li class="menu4" tabindex="390"><a href="Profil.php">Mon compte</a></li>
</ul>
<img class="pub2" src="img/pub2.png" alt="gg" />
....
</div>
<div class="centre">
<img class="centre1" src="img/centre1.png" alt="gg" />
<img class="pub3" src="img/pub3.png" alt="gg" />
<img class="centre3" src="img/centre3.png" alt="gg" />
</div>
</div>
</body>
</html>
CSS :
body
{
text-align: center ;
}
body .contenu2
{
width:970px;
margin:auto;
}
/* Haut du site */
.haut .banniere
{
width:970px;
height:170px;
position: absolute;
left: 0px;
top: 0px;
z-index:10;
background-color:#9abefe;
}
.haut .pub1
{
width:468px;
height:60px;
position: absolute;
left: 500px;
top: 2px;
z-index:20;
}
.....
si quelqu'un pourrais m'aidier s'il vous plait, j'espere que ce n'est pas à cause de mes position absolute. merci beaucoup
Configuration: Windows XP Firefox 2.0.0.11
4 réponses
-
ContributeurSALUT
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS -
Ben si, les positions absolute place une balise sur des coordonnées précises donnée par les valuers top et left.
Le positionnement du repére se base sur la fenêtre de ton navigateur et non sur le coin supérieure gauche de l'élément parent. -
Contributeursalut,
body { width:970px; margin:auto; }
ça, ça suffit. si cela ne fonctionne pas il y a peut être une erreur de HTML.
-
c bon j'ai trouvé, jai rajouter :
position: relative; a contenu 2.
comprend pas trop mais temps que ca marche ! lol merci a tous
