Sujet Précédent Sujet Suivant

Problème de décalage du menu [CSS]

Fermé
ellocodu59 - 3 sept. 2008 à 13:50
 ellocodu59 - 7 sept. 2008 à 12:33
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;
}
A voir également:

4 réponses

Réponse 1 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
5 sept. 2008 à 23:41
salut,

pas de DTD, du Javascript, il y a des dizaines de possibilités…

as-tu une version en ligne ?
au moins on pourrait triturer en direct…
1
Réponse 2 / 4
katia
6 sept. 2008 à 00:22
si c'est quand ta fenetre est plus petite, c'est position:absolute;

sa me l'avait deja fait pour un kit en html
0
Réponse 3 / 4
ellocodu59
7 sept. 2008 à 10:19
Merci pour la réponse, mais même si j'enlève tous les position:absolute, le menu continu à se décaler en-dessous quand je resize la fenêtre (en la rétrécissant).
Auriez-vous une autre idée?
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
7 sept. 2008 à 11:33
salut,

cf <1>.
0
Réponse 4 / 4
ellocodu59
7 sept. 2008 à 12:33
J'ai donné le code, que faudrait-il de plus pour essayer de résoudre mon problème ? Parce que même quand j'isole le menu, le décalage est toujours là donc ça ne peut pas être dû à du javascript ou autre chose dans la page. Enfin je m'y connais pas trop, je débute encore, et je ne vois pas ce qui peut empêcher ce décalage.
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Décalage son et image sur YouTube ?
Rubik4s -
Kybla -

7 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses