Problème de "collage" de blocs

Salut tout le monde, j'ai besoin de votre aide ...

Voila j'ai suivit les cours du site du zero pour apprendre le xHTML et au passage je doit dire que le tuto est super et je remercie l'auteur

.

Donc passons au problème, le plus simple c'est de vous montrer pour que vous vous fassiez une idée, la page est en test donc vous moquez pas

<lien url="http://maxijac.no-ip.info/design.html"></lien>

donc regardez le bloc menu, il est décollé du reste du menu

.

Et le pire dans tout ca c'est que sous ie ca passe :lol:

.

J'ai identifié que le problème venait de mes <ul> car si je les enleve ca passe mieux...

je vous montre aussi la source de mon HTML et de mon CSS pour que vous compreniez (encore une fois, soyez indulgents lol)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link type="text/css" href="design.css" media="screen" rel="stylesheet" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test xHTML : menu flottant absolus</title>
</head>

<body>

<div id=header>Ici c'est le header</div>

<div id=menu>
<div id=haut_menu><h2>Menu</h2></div>
<div id=bas_menu><ul><li>Music</li>
<li><a href="/forum/forum.php">Forum</a></li>
<li>lien3</li><li>lien4</li></ul> </div>
</div>

<div id=corps> <h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
<h5>Test corps </h5> <p> Blabla test, c'est blabla pour le test.........</p>
</div>

<div id=footer>Test Footer</div>

</body></html>

puis le CSS :

body{
width: 920px;
margin: auto;
background-color: grey;
}

div{

background-color: white;
}

#header{
height: 150px;
text-align: center;
}

#menu{
width: 120px;
height: 200px;
float: left;
margin-top: 20px;
position: fixed;
}

#haut_menu{
width: 120px;
height: 37px;
background-image: url("haut_menu.gif");
text-align: center;
font-size: 15pt;
}

#haut_menu h2{
display: inline;

}

#bas_menu{
width: 120px;
height:163px;
background-image: url("bas_menu.gif");
}

#menu ul{
list-style-type: none;
list-style-position: outside;
}

#menu a:hover{
background-color: red;
color: white;
}
#menu a{
color: black;
text-decoration: none;
font-weight: bold;
}

#menu a:visited{
font-style: italic;
text-decoration: blink;
color: green;
}
#corps{
margin-left: 140px;
margin-top: 20px;
margin-bottom: 20px;
}

#footer{
height: 50px;
}

Je vous remercie si vous pouviez m'aider

++ Maxi_jac.

maxi_jac

28 janvier 2006 à 21:10:19