Bonjour,
J'ai un petit problème avec l'affichage de mon menu quand je redimensionne la fenêtre du navigateur.
J'ai un menu déroulant fait avec des listes et en CSS, et quand je redimensionne la fenêtre du navigateur, les boutons de menus se décalent et se mettent les uns en-dessous des autres, au lieu de rester fixes.
Auriez-vous une idée?
Merci d'avance pour le coup de main.
Je vous donne mon code :
page HTML :
<html>
<head>
<link href="stylemenu.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<ul id="menu">
<li>
<div id="sousmenu1">
<a href="index.php">L'école</a>
<ul>
<li><a href="ecole.php?ID=1">Ecole</a></li>
<li><a href="formation.php?ID=licence1">Formation</a></li>
<li><a href="equipe.php?id=2">Equipe</a></li>
<li><a href="direction.php">Direction</a></li>
<li><a href="debouches.php">Débouchés</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu2">
<a href="entreprise.php?ID=1">ENTREPRISE</a>
</div>
</li>
<li>
<div id="sousmenu3">
<a href="films.php?promo=2008">FILMS</a>
<ul>
<li><a href="films.php?promo=2008">2007-2008</a></li>
<li><a href="films.php?promo=2007">2006-2007</a></li>
<li><a href="films.php?promo=2006">2005-2006</a></li>
</ul>
</div>
</li>
<li>
<div id="sousmenu4">
<a href="documentation.php">INSCRIPTION</a>
</div>
</li>
<li>
<a href="ancien.php">ANCIENS</a>
</li>
<li>
<div id="sousmenu6">
<a href="#">BLOG</a>
<ul>
<li><a href="ConsultBlog.php">Consulter</a></li>
<li><a href="CreerBlog.php">Créer</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Feuille de style :
#menu
{
position:absolute;
top:407px;
left:190px;
}
#menu li /* Éléments des listes */
{
float : left;
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #383027; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 150px; /* largeur */
}
#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 30px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #fff;
background: #957662; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#sousmenu1 ul
{
position:absolute;
top:-150px;
left:22px;
}
#sousmenu2 ul
{
position:absolute;
top:-120px;
left:22px;
}
#sousmenu3 ul
{
position:absolute;
top:-90px;
left:22px;
}
#sousmenu4 ul
{
position:absolute;
top:-90px;
left:22px;
}
#sousmenu6 ul
{
position:absolute;
top:-60px;
left:22px;
}
#sousmenu6 a
{
width:151px;
}
Configuration: Windows XP
Internet Explorer 7.0
"css a:"
