Bonjour,
J'ai un petit soucis de mise en page via css, j'ai cherché sur le web la soluce mais sans succes
j'ai un menu gauche que j'ai mis en float:left, et un contenu principal qui pourra etre + ou moins volumeux
Qd il n'y a beaucoup de de contenu, comme vous pouvez le voir sur le screenshot, il vient se mettre sur la gauche au bout d'un moment et ne reste pas aligné
(grosso modo la hauteur de ma resolution d'ecran, c'est a dire si je me met en 800x600 , le menu gauche se reduit en hauteur)
Pourtant je definit ma hauteur de #menu à 100%!!
C'est chelou cette histoire de hauteur=resolution d'ecran non?
Super merci d'avance!
mon code css:
BODY{ background-color: #f7f8fc; margin:0; padding: 0; } #container { height: 100%; width: 800px; border: 1px solid #cccccc; position: relative; /*contenu centré*/ margin-top:10px; margin-left:auto; margin-right:auto; visibility: visible; } #header { height: 100px; width: 800px; border: 1px solid #4262a6; z-index: 0; background-image : url(../images/header.jpg); } #content { height:100%; width: 630px; voice-family: "\"}\""; voice-family:inherit; width:100%; } #footer{ text-align: center; clear:both; FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: Arial, Helvetica, sans-serif; padding: 20 20 20 10; } /* menugauche*/ #menu { float:left; width: 170px; min-height:100%; height: 100%; background-color: #cccccc; vertical-align: top; FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; padding: 20 0 20 3; } #menu ul { /*/*/padding-left: 0; margin-left: 0; list-style-type: none; /* */ font-family: Arial, "Times New Roman", Times, serif; } #menu li { /*/*/margin: -2px 20px 0px 0px; /* */ font-family: arial, "Times New Roman", Times, serif; } #menu a { /*/*/padding: 4px; display: block; border-top: 1px solid #666666; text-decoration: none; line-height: 100%; } #menu a:link, #menu a:visited { color: #132e72 } #menu a:hover, #menu a:active { color: #132e72; background-color: #666666; COLOR: #ffffff; TEXT-DECORATION: none}
mon code html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"--> <body> <div id="menu"> <span class="titremenugauche">GENRES</span> <br> <ul> <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">John</a> </li> <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">DOCUMENTARY</a> </li> <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FEATURE FILMS</a> </li> <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FICTION</a> </li> <li> <a class="rubriquesmenugauche" target="mainFrame" href="#">FICTION > DRAMA</a> </li> </ul> </div> <div id="content"> .... le contenu </div> </body> </html>
