[RESOLU] CSS: Tentative de ul li ul li ul li ...

[dartyduck]

Bonjour à tous,
Je fais une tentative de triple menu dynamique, mais je n'arrive pas à cahcer le 3° ul pour le faire apparaitre au survol d'un li du 2° ul. Est-ce que tout le monde saisit mon probleme ?
Le menu

Vous devez être connecté pour voir les liens.

Le code html:
[cpp]<div id="menu">
<ul>
<li class="bordurebas"><a href="/index.php">Accueil</a></li>
<li class="bordurebas"><a href="/CV/index.php">Curriculum Vitae</a></li>
<li class="bordurebas"><a href="/stages/index.php">Stages</a>
<ul>
<li class="pasborduregauche"><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC (CNRS)</a></li>
<li class="borduregauche"><a href="/stages/FEDERALMOGUL/index.php">Federal-Mogul</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/photos/index.php">Photos</a>
<ul>
<li class="pasborduregauche"><a href="/photos/animaux/index.php">Animaux</a></li>
<li class="borduregauche"><a href="/photos/macro/index.php">Mode Macro</a></li>
<li class="borduregauche"><a href="/photos/paysages/index.php">Paysages</a></li>
<li class="borduregauche"><a href="/photos/personnages/index.php">Les Potes</a></li>
<li class="borduregauche"><a href="/photos/poissy/index.php">Poissy</a></li>
<li class="borduregauche"><a href="/photos/stgermain/index.php">St Germain en Laye</a></li>
<li class="borduregauche"><a href="/photos/vauxsurseine/index.php">Vaux sur Seine</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/liens/index.php">Quelques Liens</a>
<ul>
<li class="pasborduregauche"><a href="http://jeanmarion.free.fr" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka 2005</a></li>
<li class="borduregauche"><a href="http://duckyduck.free.fr" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos - Jeux ...</a></li>
<li class="borduregauche"><a href="http://duckyduck.free.fr/annonce_clio" target="_blank">Clio III à vendre</a></li>
<li class="borduregauche"><a href="http://www.presence-pc.com/forum" target="_blank" title="www.presence-pc.com/forum">Forum presence-pc</a></li>
<li class="borduregauche"><a href="#">Free music online</a>
<ul>
<li class="pasborduregauche"><a href="http://www.pandora.com" target="_blank">Pandora</a></li>
<li class="borduregauche"><a href="http://www.last.fm" target="_blank">Last.fm</a></li>
</ul>
</li>
<li class="borduregauche"><a href="http://www.rs-team.org" target="_blank" title="www.rs-team.org">Asso Renault Sport</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/musique/index.php">Musique</a></li>
<li class="bordurebas"><a href="/archives/index.php">Archives</a>
<ul>
<li class="pasborduregauche"><a href="/archives/fevrier2007/fevrier2007.php">Février 2007</a></li>
<li class="borduregauche"><a href="/archives/index.php">Toutes les archives</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/guestbook/index.php">Livre d'Or</a></li>
<li><a href="/contact/index.php">Contact</a></li>
</ul>
</div>[/cpp]

le code css:
[cpp]#menu {
margin: 10px 0 0 0;
padding: 0;
width: 100%;
position: relative;
text-align: left;
float: left;
border-top: 1px solid #004B8A;
border-bottom: 1px solid #004B8A;
}

#menu ul {
margin: 0;
padding: 0px 0 0 0;
display: block;
float: left;
}

#menu ul li {
margin: 0;
padding: 2px 0 0px 0;
width: 130px;
line-height: 16px;
float: left;
list-style-type: none;
text-align: left;
}

.bordurebas {
border-bottom: 1px solid #004B8A;
}

#menu ul li ul {
margin: -21px 0 0 120px;
padding: 0;
width: 130px;
display: none;
position: absolute;
display: none;
float: left;
background: #000;
border-top: 1px solid #004B8A;
border-right: 2px solid #004B8A;
border-bottom: 2px solid #004B8A;
}

#menu ul li:hover ul {
display: block;
}

#menu ul li ul li {
margin: 0;
padding: 2px 0 0 0px;
width: 100%;
display: block;
height: 18px;
list-style-type: none;
float: left;
}

#menu ul li ul li ul {
margin: -21px 0 0 129px;
padding: 0;
width: 130px;
position: absolute;
display: none;
float: left;
background: #000;
border-top: 1px solid #004B8A;
border-right: 2px solid #004B8A;
border-bottom: 2px solid #004B8A;
}

#menu ul li ul li:hover ul {
display: block;
}

#menu ul li ul li ul li {
margin: 0;
padding: 2px 0 0 0px;
width: 100%;
display: block;
height: 18px;
list-style-type: none;
float: left;
}

#menu a, #menu a:active, #menu a:visited {
margin: 0;
padding: 0 10px 2px 10px;
display: block;
color: #FFF;
text-decoration: none;
}

#menu a:hover {
color: #EC8E13;
text-decoration: none;
}

.pasborduregauche {
border-left: 1px solid #000;
}

.borduregauche {
border-left: 1px solid #004B8A;
}[/cpp]

Merci à ceux qui vont se pencher 5 min sur le sujet.

 

[dartyduck]

Marsien, au secours !!!

 

[zeb]

 

[marsien]

Euh, je n'ai pas eu le temps de me pencher sur ton problème. Il devient quand même complexe ^^

Promis, j'essaie de voir ça d'ici la fin de semaine. Je ne te laisserai pas tomber sans avoir au moins essayé de trouver ce qui cloche

 

[dartyduck]

arf, t'es un amour
merci.
Mais en fait, je viens de régler le problème, et ma solution peut servir à d'autres s'ils recontrent lês mêmes difficultés:
J'ai donc 3 ul (menus) dont 2 en sous-menus (ul2 et ul3).
Le premier ssmenu ul2 était caché par l'attribut [cpp]display: none;[/cpp] puis était affiché par [cpp]display: block;[/cpp].
Pour le deuxième ssmenu ul3, j'ai voulu réitérer le code, mais ça ne marchait pas. Va savoir pourquoi!
Alors j'ai pensé à la fonction [cpp]visibility: hidden;[/cpp] et [cpp]visibility: visible;[/cpp].
Je n'aime pas trop utiliser cette fonction pour un menu en général car meme si le menu est hidden, l'espace qu'il prendra est déjà réservé et est affiché. Enfin bref, j'ai du utiliser deux fonctions différentes pour obtenir le même résultat à chaque fois.
A bon entendeur...

 

[dartyduck]

Alors j'ai un sushi: dans le menu => "quelques liens" on remarque dans le sousmenu un décalage de 3px de la deniere ligne. Qu'est-ce? comment se fesse ? Qu'ai-je donc fait pour mériter cela ?

Vous devez être connecté pour voir les liens.

Merci.

 

[boub popsyteam]

C'est le seul menu qui decends aussi bas dans la page, y'a ptet un truc à voir de ce côté là ...

 

[dartyduck]

Alors j'ai fait un test, j'ai décalé mes rubriques pour voir et c'est bizarre, mais le décalage reste sur "quelques liens" et n'apparait pas sur "photos".
Bizarre bizarre ...
Ca vient du li qui génère un ul, donc il y doit y avoir une interaction de ce coté là, mais je ne vois pas de quoi il s'agit...

 

[boub popsyteam]

Tu n'as pas un saut de ligne en fin d'intitulé ou un caractère à la noix ?

 

[dartyduck]

Nan, je crois pas:
[cpp]<div id="menu">
<ul>
<li class="bordurebas"><a href="/index.php">Accueil</a></li>
<li class="bordurebas"><a href="/CV/index.php">Curriculum Vitae</a></li>
<li class="bordurebas"><a href="/stages/index.php">Stages</a>
<ul>
<li class="pasborduregauche"><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC (CNRS)</a></li>
<li class="borduregauche"><a href="/stages/FEDERALMOGUL/index.php">Federal-Mogul</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/musique/index.php">Musique</a></li>
<li class="bordurebas"><a href="/archives/index.php">Archives</a>
<ul>
<li class="pasborduregauche"><a href="/archives/fevrier2007/fevrier2007.php">Février 2007</a></li>
<li class="borduregauche"><a href="/archives/index.php">Toutes les archives</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/guestbook/index.php">Livre d'Or</a></li>
<li class="bordurebas"><a href="/photos/index.php">Photos</a>
<ul>
<li class="pasborduregauche"><a href="/photos/animaux/index.php">Animaux</a></li>
<li class="borduregauche"><a href="/photos/macro/index.php">Mode Macro</a></li>
<li class="borduregauche"><a href="/photos/paysages/index.php">Paysages</a></li>
<li class="borduregauche"><a href="/photos/personnages/index.php">Les Potes</a></li>
<li class="borduregauche"><a href="/photos/poissy/index.php">Poissy</a></li>
<li class="borduregauche"><a href="/photos/stgermain/index.php">St Germain en Laye</a></li>
<li class="borduregauche"><a href="/photos/vauxsurseine/index.php">Vaux sur Seine</a></li>
</ul>
</li>
<li class="bordurebas"><a href="/liens/index.php">Quelques Liens</a>
<ul>
<li class="pasborduregauche"><a href="/clio/index.php">Clio III à vendre</a></li>
<li class="borduregauche"><a href="http://jeanmarion.free.fr" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka 2005</a></li>
<li class="borduregauche"><a href="http://duckyduck.free.fr" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos - Jeux ...</a></li>
<li class="borduregauche"><a href="http://www.presence-pc.com/forum" target="_blank" title="www.presence-pc.com/forum">Forum presence-pc</a></li>
<li class="borduregauche"><a href="http://www.rs-team.org" target="_blank" title="www.rs-team.org">Asso Renault Sport</a></li>
<li class="borduregauche"><a href="#">Free music online</a>
<ul>
<li class="pasborduregauche"><a href="http://www.pandora.com" target="_blank">Pandora</a></li>
<li class="borduregauche"><a href="http://www.last.fm" target="_blank">Last.fm</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/contact/index.php">Contact</a></li>
</ul>
</div>[/cpp]

 

[dartyduck]

Up !

 

[dartyduck]

Bon, ben si personne ne peut m'aider, je vais aller voir si je peux trouver une ame charitable sur HFR...

 

[marsien]

Désolé Dartyduck. En ce moment, je n'ai pas beaucoup de temps à consacrer au forum. Et J&P ne vient plus... Les "programmeurs" Web se font donc rares par ici en ce moment. J'espère que quelqu'un te viendra en aide sur HFR. SInon, dès que j'ai un peu de temps je jette un oeil


PS : tu sais que ton menu déconne carrément sur Firefox ? Pourtant il marchait bien avant... Courage

 

[dartyduck]

oups... je vais voir ca tout de suite !

 

[dartyduck]

Probleme de déconne presque réglé sous FF, je vois pas d'ou ca peut venir. Probleme sous IE completement réglé, et franchement je ne saurais pas dire ce que j'ai exactement fait pour le régler... Mais c'est fait.
Reste FF... Si quequ'un a une piste, je suis tout ouï.

 

[marsien]

Salut Dartyduck,

Je viens de jeter un oeil à ton menu. En voilà une version qui marche sous FF et IE7.


Dans le head :
[cpp]<link href="menu.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
page CSS conditionnelle pour IE.
<link href="menu-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->[/cpp]

Dans le body :
[cpp]<div id="menu">
<!-- Début niveau 1 -->
<ul>
<li class="bordurebas"><a href="/index.php">Accueil</a></li>

<li class="bordurebas"><a href="/CV/index.php">Curriculum Vitae</a></li>
<li class="bordurebas"><a href="/stages/index.php">Stages</a>
<!-- Début niveau 2.1 -->
<ul>
<li class="pasborduregauche"><a href="/stages/IRCOMSIC/index.php">IRCOM-SIC (CNRS)</a></li>
<li class="borduregauche"><a href="/stages/FEDERALMOGUL/index.php">Federal-Mogul</a></li>
</ul>
<!-- Fin niveau 2.1 -->
</li>
<li class="bordurebas"><a href="/photos/index.php">Photos</a>
<!-- Début niveau 2.2 -->
<ul>
<li class="pasborduregauche"><a href="/photos/animaux/index.php">Animaux</a></li>
<li class="borduregauche"><a href="/photos/macro/index.php">Mode Macro</a></li>
<li class="borduregauche"><a href="/photos/paysages/index.php">Paysages</a></li>
<li class="borduregauche"><a href="/photos/personnages/index.php">Les Potes</a></li>

<li class="borduregauche"><a href="/photos/poissy/index.php">Poissy</a></li>
<li class="borduregauche"><a href="/photos/stgermain/index.php">St Germain en Laye</a></li>
<li class="borduregauche"><a href="/photos/vauxsurseine/index.php">Vaux sur Seine</a></li>
</ul>
<!-- Fin niveau 2.2 -->
</li>
<li class="bordurebas"><a href="/musique/index.php">Musique</a></li>
<li class="bordurebas"><a href="/liens/index.php">Quelques Liens</a>
<!-- Début niveau 2.3 -->
<ul>
<li class="pasborduregauche"><a href="/clio/index.php">Clio III à vendre</a></li>
<li class="borduregauche"><a href="http://jeanmarion.free.fr" target="_blank" title="Carnet de route de notre voyage au Sri Lanka">Sri Lanka 2005</a></li>
<li class="borduregauche"><a href="http://duckyduck.free.fr" target="_blank" title="Tout plein de vidéos, des jeux...">Vidéos - Jeux ...</a></li>
<li class="borduregauche"><a href="http://www.presence-pc.com/forum" target="_blank" title="www.presence-pc.com/forum">Forum presence-pc</a></li>
<li class="borduregauche"><a href="http://www.rs-team.org" target="_blank" title="www.rs-team.org">Asso Renault Sport</a></li>

<li class="borduregauche"><a href="#">Free music online</a>
<!-- Début niveau 3.1 -->
<ul>
<li class="pasborduregauche"><a href="http://www.pandora.com" target="_blank">Pandora</a></li>
<li class="borduregauche"><a href="http://www.last.fm" target="_blank">Last.fm</a></li>
</ul>
<!-- Fin niveau 3.1 -->
</li>
</ul>
<!-- Début niveau 2.3 -->
</li>
<li class="bordurebas"><a href="/archives/index.php">Archives</a>
<!-- Début niveau 2.4 -->
<ul>
<li class="pasborduregauche"><a href="/archives/fevrier2007/fevrier2007.php">Février 2007</a></li>
<li class="borduregauche"><a href="/archives/index.php">Toutes les archives</a></li>
</ul>
<!-- Fin niveau 2.4 -->
</li>
<li class="bordurebas"><a href="/guestbook/index.php">Livre d'Or</a></li>
<li><a href="/contact/index.php">Contact</a></li>
</ul>
<!-- Fin niveau 1 -->
</div>[/cpp]

La feuille CSS générale du menu :
[cpp]#menu {
margin: 30px 0 0 20px;
font-family: Arial, Verdana;
font-size: 12px;
float: left;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
border-top: 1px solid #004B8A;
background: #fff;
color: #000;
}

#menu ul li {
border-bottom: 1px solid #004B8A;
padding: 2px 0 2px 10px;
}

#menu ul li ul {
position: absolute;
left: 140px;
display: none;
margin: -18px 0 0 0;
width: 140px;
border-top: 1px solid #004B8A;
border-left: 1px solid #004B8A;
border-bottom: 2px solid #004B8A;
border-right: 2px solid #004B8A;
}

#menu .pasborduregauche {
margin-left: -1px;
border-left: 1px solid #fff;
}

#menu ul li:hover ul {
display: block;
}

#menu ul li ul li {
border: none;
}

#menu ul li ul li ul {
visibility: hidden;
width: 110px;
}

#menu ul li ul li:hover ul {
visibility: visible;
}

#menu a {
text-decoration: none;
background: #fff;
color: #000;
}

#menu a:hover {
text-decoration: underline;
}[/cpp]

Et la feuille conditionnelle pour IE (elle rétablit la position vertical du premier niveau de sous-menu) :
[cpp]#menu ul li ul {
margin: -1px 0 0 0;
}[/cpp]

 

[dartyduck]

Wow ! Bon ben je vais essayer ça dès demain, parce que là je suis sur mon pc portable pro avec IE6, donc pas possibilité d'essayer avec.
Je te tiens au courant.
Merci.

 

[dartyduck]

Cool, harmonisation réussie. Mais je retrouve mon décalage de 3px an bas de mon 1° sous menu. C'est à cause du <li>Free music online</li> car que je le décale le trou de 3px le suit... Je suis découragé là.

 

[marsien]

C'est bizarre, je n'est pas ce souci avec ma version testée en local... Tu as changé quoi par rapport au css que je t'ai fourni ci-dessus ? Et ce problème n'existe que sous IE.

 

[dartyduck]

Alors en fait ton truc ne marche pas si bien sous IE, et pourtant j'ai tout fait comme tu m'as dit (cop/col)
Sur la page d'acueil, tout marche bien. Mais des qu'on change de page, le menu redéconne, bizarre.
Ensuite, le brobleme du décalage dans le sous-menu, ça vient d'un float:left; qu'il fallait mettre au #menu ul li ul li.