Conflits entre div
bonsoir , j'ai un ptit soucis d'alignement avec mes div , sous mozilla çà marche plus ou moins , sous IE çà foire totalement , voici les codes xhtml et css , c'est un problème de positionnement :
Ya des soucis de positions là , bon le container il est bon le cadre et le bounce sont positionnés comme je veux , mais en dessous le menu foire sous IE ici que page et presentation , c'est décalé n'importe comment , quelqu'un saurait résoudre le problème svp?
merci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toto.org</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url("./style/file.css");
</style>
</head>
<body>
<div id="container">
<div id="cadre">
<div class="bounce"></div>
</div>
<div id="menu">
<ul>
<li><a href="toto.php"><b>toto</b></a>
</li>
</ul>
</div>
<div id="page">
<br />
<div class="presentation"><font style="font-size:9pt; color:black; font-family:tahoma">Bienvenue sur mon site .</font></div>
<br />
</div>
</div>
</body>
</html>
#container {
background-image:url('../fond.gif');
}
#cadre {
height: 55px;
width: 855px;
background: #fff;
border: solid 1px;
margin-left: auto;
margin-right: auto;
}
.bounce {
margin-top: 40px;
width: 703px;
height: 14px;
background-image:url('../coucou.gif');
float: right;
border: 1px solid black;
}
#menu {
background: #ffffff;
font-family: Arial;
height: 520px;
border: 1px solid black;
border-top-color: #fff;
width: 150px;
position: absolute;
margin-left: 66px;
}
#page {
margin-left: 150px;
height: 520px;
width: 771px;
background: #fff;
border: 1px solid black;
border-top-color: #fff;
}
.presentation {
background: #FAEOD7;
width: 500px;
margin-left: 155px;
}
Ya des soucis de positions là , bon le container il est bon le cadre et le bounce sont positionnés comme je veux , mais en dessous le menu foire sous IE ici que page et presentation , c'est décalé n'importe comment , quelqu'un saurait résoudre le problème svp?
merci
4 réponses
-
<body>
<div id="cadre">
</div>
<div id="menu">
<ul>
<li><a href="toto.php"><b>toto</b></a>
</li>
</ul>
</div>
</body>
il me semble que tu as oublié de fermer ton div "menu" ! peut etre que c etait tout betement ca! -
Ben même réponse , cela dit elle est gratuite, pas d'obligation de prendre. Je peux toujours la refiler à quelqu'un d'autre :-)
-
je vais poser ma question bcp plus simplement , dans le body de ma page html j'ai ceci :
<body> <div id="cadre"> </div> <div id="menu"> <ul> <li><a href="toto.php"><b>toto</b></a> </li> </ul> </body>
et dans le css j'ai ceci :
#cadre { height: 55px; width: 855px; background: #fff; border: solid 1px; margin-left: auto; margin-right: auto; } #menu { background: #ffffff; font-family: Arial; height: 520px; border: 1px solid black; border-top-color: #fff; width: 150px; }
le div cadre est bien centré , le div menu se trouve en dessous du cadre mais n'est pas aligné verticalement bien sur la gauche avec le div cadre , comment faire ceci svp?
merci -
Faudrait repositionner, à mon humble avis, IE n'aime pas trop les:
-margin-left: auto;
-margin-right: auto;
Faudrait mieux le préciser en %
