28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

J'ai essayé au mieux d'apprendre à gérer le XHTML avec CSS afin d'utiliser les standards.

Le problème :
La page marche parfaitement sur tous les navigateurs, mais souffre d'un bug l'orque j'insert un nouvel élément (bloc avec margin:auto;) et que je lui ajoute par exemple « margin-top:20px;» il applique cette marge au bloc précédent si ce bloc est directement collé à celui-ci.
http://www.jeuxveux.info/ (version clean)
http://www.jeuxveux.info/ (version complète)

display:inline; resou parfois le bug qu'en ai il des autre cas ?

Page html

<div id="cheader">
<div id="header">
xx
</div>
</div>


<div id="ccentre">
<div id="centre">

<div id="carrousel">contenu</div>

</div>
</div>



<div id="cfooter">
<div id="footer">
le footer
</div>
</div>


styles.css
#cheader {
	width:100%;
	height:262px;
	background-color:#000;
	background-image:url(../images/bgtop.png);
	background-repeat:repeat-x;
}
#header {
	height:262px;
	width:960px;
	margin:auto;
	color:#FFF;
}

#ccentre {
	width:100%;
	background:url(../images/fondsitecentre.png) repeat-y;
	background-position:top center;
}
#centre {
	margin:auto;
	padding:0 0 20px 0;
	width:960px;
	background-color:#FFF;
	color:#000;
}
#footer {
	height:197px;
	width:960px;
	margin:auto;
	color:#7F7F7F;
}
#cfooter {
	background:#000 url(../images/bgfooter.png) repeat-x;
}


center.css
#carrousel {
	height:249px;
	width:939px;
	margin:11px 0 0 10px;
	background-color:#000;
}





J'ajoute quelques infos supplémentaires optionnelles à lire :
J'ai mis overflow hidden quand j'utilise le float car ie ne prend pas en compte le débordement dans un fload (si j'ai bien compris).
Je devrais ensuite ajouter un sous-menu pour chaque élément de la navigation (orange) : Actualité, Jeux, etc..
Je sais parfaitement que je peux utiliser un padding dans le div center plutôt qu'un margin sur le div carrousel. Mais je post ici avant tout, afin de comprendre le bug.
Modifié par nasu (16 Oct 2010 - 17:40)