Overflow scroll + float = ???bug???
lagarkane
-
lagarkane -
lagarkane -
Bonjour,
Voilà, j'ai une page web dans laquelle j'ai mis un menu en float left, et un div juste à coté, à droite.
Jusque là pas de problème..
Mais dès que je mets un overflow scroll ou hidden ou encore auto à mon div, il passe en dessous de mon float (enfin, il n'est pas caché par le menu, hein, il est juste.... En dessous "pixellement" parlant
Bref, j'sais pas si qqn a une idée du pourquoi du comment que ca fait ca, mais si qqn sait... =)
Merci d'avance =)
Voilà, j'ai une page web dans laquelle j'ai mis un menu en float left, et un div juste à coté, à droite.
Jusque là pas de problème..
Mais dès que je mets un overflow scroll ou hidden ou encore auto à mon div, il passe en dessous de mon float (enfin, il n'est pas caché par le menu, hein, il est juste.... En dessous "pixellement" parlant
Bref, j'sais pas si qqn a une idée du pourquoi du comment que ca fait ca, mais si qqn sait... =)
Merci d'avance =)
2 réponses
-
-
Avec plaisir =)
body { background-attachment:fixed; background-image:url(images/fond.jpg); background-position: center; background-repeat:no-repeat; margin:20px auto; width:1000px; } #en_tete { background-image:url(images/banniere.png); background-repeat:no-repeat; height:130px; margin-bottom:10px; margin-left:100px; width:1000px; } #menu { background-color:#626262; border:2px outset black; float:left; height:330px; width:180px; padding: 10px; padding-top: 20px; } .element_menu { background-color: #626262; background-repeat: repeat-x; margin-bottom: 20px; } .element_menu ul { list-style-type: none; padding: 0px; padding-left: 20px; margin: 0px; } .element_menu img { vertical-align: middle; border: 2px outset blue; } .element_menu a { text-decoration: none; color: black; } .element_menu a :hover { margin-left: 10px; border: 2px inset blue } #corps { background-image:url(images/fond.jpg); border: 2px outset black; height:340px; margin-bottom:20px; margin-left:220px; padding:10px; width:770px; overflow: scroll; }
Voilà pr le CSS, et le Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Page Principale</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="Design.css" /> </head> <body> <!-- L'en-tête --> <div id="en_tete"> </div> <!-- Les menus --> <div id="menu"> <div class="element_menu"> <ul> <li><a href="accueil.html"><img src="images/icon-hat.jpg" alt="Maison" /> Accueil</a></li><br/> <li><a href="page2.html"><img src="images/icon-hat.jpg" alt="Maison" /> Mon Parcours</a></li><br/> <li><a href="page3.html"><img src="images/icon-hat.jpg" alt="Maison" /> Pédagogie</a></li><br/> <li><a href="page4.html"><img src="images/icon-hat.jpg" alt="Maison" /> Mes Atouts</a></li><br/> <li><a href="page5.html"><img src="images/icon-hat.jpg" alt="Maison" /> Quelques aspects Techniques</a></li><br/> </ul> </div> </div> <!-- Le corps --> <div id="corps"> <h1><center>Accueil</center></h1> <p>Mes études de droit ont été dominées par mes deux principaux centres d’intérêts : les sciences criminelles et l’environnement, que j’ai défendu pendant plusieurs années comme bénévole en milieu associatif.<br/><br/> Après avoir enseigné auprès d’étudiants en droit, je me suis orientée vers la formation de non-juristes et plus particulièrement les interventions auprès de fonctionnaires territoriaux tout en conservant également un public d’étudiants des filières scientifiques.<br/><br/> J’ai créé ma structure en 2002, après cinq années comme sous-traitante pour une société de formation.<br/> Aujourd’hui, ma vie professionnelle est toujours gouvernée par les préoccupations environnementales et mon intérêt pour le droit pénal.<br/><br/> </p> <p> <table> <tr> <td> <img src="images/police_municipale.jpg" alt="Police" /></td> <td> <img src="images/france.jpg" alt="Fonnctionnaire" /></td> <td><img src="images/ecologie.jpg" alt="Environnement" /></td> </tr> </table> </p> </div>
