28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je bloque sur un problème de centrage. J'ai 3 <div> l'une à cotés de l'autre, et je veux les centrées :
- Firefox : Ok
- IE 7 : Ko
- IE 6 : Pas tetsé


voilà mon code : (Si vous voyez des optimisations possibles, ne vous genez pas Smiley smile

<html>
 <head>
  <link href="css/test.css" type="text/css" rel="stylesheet"/>
 </head>
 <body>
  <div id="global">
   <div id="banner"><img src="image/design/banner.gif"/></div>
   <div id="menu">| Acceuil | Moi | Toi | Vous |</div>
   <div id="side">&nbsp;</div>
   <div id="main">Contenu</div>
   <div id="side">&nbsp;</div>
  </div>
 </body>
</html>


body {
	background-color: #000000;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	width:900px;
}

#global {
	text-align: center;
}

#banner {
	text-align: center;
}

#menu {
	background-image: url(../image/design/menu.jpg);
	width: 900px;
	border-bottom: solid 1px #FFCC00;	
}

#side {
	float: left;
	width: 25px;
	background-color: #520000;
}

#main {
	float: left;
	width: 850px;
	border-bottom: solid 1px #FFCC00;
	background-color: #9A0000;
}


Merci pour votre aide.
BozoCarzu.
Je viens de trouver une solution : un container dimensioné

<html>
 <head>
  <link href="css/petitesportes.css" type="text/css" rel="stylesheet"/>
 </head>
 <body>
  <div id="global">
   <div id="banner"><img src="image/design/banner.gif"/></div>
   <div id="menu">| Acceuil | Moi | Toi | Vous |</div>
   <div style="margin: auto;width:900px;border:solid 1px #FF0000;">
    <div id="side">&nbsp;</div>
    <div id="main">Contenu <br /><br /><br /></div>
    <div id="side">&nbsp;</div> 
   </div>
  </div>
 </body>
</html>


Par contre j'ai un second probmème Smiley biggol
Je souhaite que mes div "side" soit toujours de la même hauteur que ma div "main" sachant que main est un contenu dynamique. Smiley bawling