Discussion :

[anxious]

Bonsoir, j'ai un soucis par rapport a mes positionnement de mes sous menus qui ne sont pas en dessous des menus correspondant

je vous laisse voir par vous même :

www.gamer-certified.fr/accueil.html >> cliquez sur le menu DOSSIER svp


j'ai essayé de le regler manuellement avec margin-leftxPX mais évidemment, sur firefox ça va, mais pas sur IE6,7 et je me doute que c'est pas la solution optimale pour regler ce problème.

Merci beaucoup.

[Ethyde]

Bonjour,

ton problème viens du fait que ton sous-menu est positionné en absolue mais que tu ne lui confère aucun contexte de positionnement de référence.

Pour régler le probleme :

ajoute crée un contexte en ajoutant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#listes_menus{
display:inline;
position:relative;
}

Et modifie ton sous-menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.menu_body{
top:20px;
left:200px;
}

[anxious]

merci de ton aide pour être sur d'avoir bien compris, et éviter de rencontrer ce type de problème dans le futur, j'ai tout de suite testé ta solution en local, mais malheureusement,

le sous menu ne vient toujours pas exactement sous le menu correspondant.

en viens deux théories,

1. soit chaque sous menu doit être positionné manuellement sous son menu parent à l'aide de la balise left: xx px. cela necessitant une balise css pour chaque sous menu pour le regler indépendament.
2. soit, j'ai mal compris et dans ce cas la malgrés que j'ai suivit ton aide, je ne suis pas arrivé au résultat attendu.

[desert]

Bonjour,

soit chaque sous menu doit être positionné manuellement sous son menu parent à l'aide de la balise left: xx px. cela necessitant une balise css pour chaque sous menu pour le regler indépendament.

Oui, du moins, c'est que tu devras faire si tu choisis la voie qu'Ethyde a expliqué.
Ce que tu peux aussi faire :
- Soit tu refais ton menu à base de balise ul et li (c'est ce que l'on fait généralement) :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul>
    <li>
        <a href="#"><img src="..." alt=""/></a>
        <ul><!-- sous-menu -->
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
</ul>

- Soit tu englobes chaque groupe de liens-image-sousmenus dans un div en position relative, qui prendra en compte non plus le menu tout entier mais le div positionné :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="menuitem">
    <a href="#"><img src="..." alt=""/></a>
    <ul><!-- sous-menu -->
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div class="menuitem">
etc...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menuitem {
    position: relative;
}

[Macmillenium]

Bonsoir,

- Soit tu refais ton menu à base de balise ul et li (c'est ce que l'on fait généralement) :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul>
    <li>
        <a href="#"><img src="..." alt=""/></a>
        <ul><!-- sous-menu -->
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>...</li>
</ul>

Et positionner le <li>, parent du sous-menu, en relative.

[anxious]

merci ÉNORMÉMENT a tous les participants, vous pouvez pas vous imaginer ce que c'est pour un débutant d'avoir un menu potable qui marche.



merci de la précision pour le relative du li,
j'avais en effet essayé la première option, mais cela ne marchais pas j'avais le sous menu qui apparaissait carrément tout en haut à gauche ! (cela venait surement de l'oublie de la position relative du li)

j'ai donc opté pour la deuxième solution.

Bref maintenant, j'ai deux solutions qui marchent.

[desert]

Et positionner le <li>, parent du sous-menu, en relative.

Oui, j'ai omis cette précision et j'en suis désolé.
Heureusement, Macmillenium veille au grain !