Bonjour,
je suis en train de reprendre la construction des pages de mon site pour faire du full-CSS-profile et une chose m'interpèle :
à ce niveau du code, je me rends compte que la taille de ma div de page globale (id="page") ne s'adapte pas dynamiquement sous Firefox alors qu'elle le fait avec Opéra et IE ! en gros, en réduisant la taille de la fenètre, le menu, en <li> horizontal, se segmente en plusieurs étages, et la .. le cadre général (id="page") reste le même ! il y a surement une petite astuce pour corriger cela et bien faire en sorte qu'un div-conteneur come "page" ai bien un taille adaptée à la hauteur de tout ce qu'il contiens
non ?
merci d'avance, voila le code (du moins une partie) :
et le CSS :
Modifié par tancrede (31 Jul 2005 - 11:38)
je suis en train de reprendre la construction des pages de mon site pour faire du full-CSS-profile et une chose m'interpèle :
à ce niveau du code, je me rends compte que la taille de ma div de page globale (id="page") ne s'adapte pas dynamiquement sous Firefox alors qu'elle le fait avec Opéra et IE ! en gros, en réduisant la taille de la fenètre, le menu, en <li> horizontal, se segmente en plusieurs étages, et la .. le cadre général (id="page") reste le même ! il y a surement une petite astuce pour corriger cela et bien faire en sorte qu'un div-conteneur come "page" ai bien un taille adaptée à la hauteur de tout ce qu'il contiens
non ?merci d'avance, voila le code (du moins une partie) :
<body id="menu1">
<div id="page">
<div id="banniere">
<a title="Aller à l page d'accueil" accesskey="1" href="/"><img alt="logo Orient-latin" src="_design/titre.gif" /></a>
</div><!-- fin bannière -->
<ul id="menu">
<li class="menu1"><a href="acceuil_CSS.php">ACCUEIL</a></li>
<li class="menu2"><a href="site_CSS.php">SITES</a></li>
<li class="menu3"><a href="carte_CSS.php">CARTES</a></li>
<li class="menu4"><a href="biblio_CSS.php">BIBLIO</a></li>
<li class="menu5"><a href="forum_CSS.php">FORUM</a></li>
<li class="menu6"><a href="contact_CSS.php">LIENS</a></li>
<li class="menu7"><a href="contact_CSS.php">CONTACT</a></li>
</ul><!-- fin menu -->
</div> <!-- fin page -->
<div id="footer">Valide XHTML / CSS2</div> <!-- fin footer -->
</body>et le CSS :
body {
margin: 0;
padding: 0;
color: #000;
background-color: #DEDEDE;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#page {
text-align: left;
width: 90%;
margin: 10px auto 10px auto;
position: relative;
background: #AAB8D6;
border: 1px solid #2E3852;
padding: 0;
}
#footer {
text-align: center;
width: 90%;
margin: 10px auto 10px auto;
position: relative;
clear: both;
border: none;
color:#AAAAAA;
font-weight:bold;
font-size:9px;
}
#banniere {margin: 0px; padding: 0px; border: none; text-align: right;}
#banniere a img {margin: 5px 10px 5px 0; border: none;}
#menu {
position: relative;
width:auto;
height: 25px;
font-size: 10px;
text-align: left;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
width: 100%; /* précision pour Opera */
}
#menu li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 19px;
}
#menu a { /* définition de chaque bouton du menu */
width: 70px;
height: 20px;
float: left;
display: block;
text-align: center;
text-decoration: none;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid #2E3852;
}
#menu a:hover { color: #FFFF99; background-color: #2E3852;}Modifié par tancrede (31 Jul 2005 - 11:38)