Aide - Recherche - Membres - Calendrier
Version complète : listes imbriquées
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
moths-art
Déjà bonjour à tous :

Je suis actuellement sur la réalisation d'un menu dynamique comportant des listes imbriqués.
Tout marchait nickel sur l'ensemble des navigateurs récents (Opéra 7, Internet Explorer 6, Mozilla, Firefox, Netscape, Safari et Konqueror)
Bref, j'étais content de moi. J'ai donc pensé à valider mon site...et c'est là que les problèmes ont commencé.
J'utilisait ce type de code pour les listes :
QUOTE
<ul>
<li>blabla</li>
<ul>
<li>blabla</li>
<li>blabla</li>
</ul>
</ul>


En ralité, seul ceci me permet de rendre mon site valide :

QUOTE
<ul>
<li>blabla
<ul>
<li>blabla</li>
<li>blabla</li>
</ul>
</li>
</ul>


ça ne parait rien...mais du coup j'ai bien une page valide (peu importe la DTD) mais plus du tout les bons résultats sur mes navigateurs préférés : Opéra et Firefox alors que Internet Explorer ne semble pas broncher.
J'ai donc cherché partout ou presque et rien de convainquant : même des positionnement en relatif n'y font rien.
J'ai recherché sur ce forum si il y avait un existant mais je n'ai trouvé que LDO qui a finalement abandonné...

Quelqu'un saurait-t-il m'aider?
J'ai déjà vu diverses solutions hasardeuse ou technique de contournation avec des listes de définitions par exemple.
Seulement, j'aimerais rester avec des <ul> et des <li> si possible sans <dd> <dt> et autres qui ne me semble pas les plus appropriés.
Le tout n'étant bien sur pas de débattre sur le bien fondé de liste de définition etc.
Voilà, j'espère être clair et que d'autres se sont déjà penché sur ce problème épineux!
moths-art
Bon, je crois que je tiens le bon bout.
Le problème était situé dans une mauvaise gestion de la propriété ul.class li a.
J'avais homis de mettre le a. Cependant, cette différence me surprend. Comment cela peut-til marcher dans mon premier cas de figure (non valide) et pas ici. De même, j'ai certes trouvé l'erreur mais ne suis pas sur de la comprendre rélement.
Si quelqu'un a une idée? :cogne:
Antoine
Montres-nous ta CSS... wink.gif
moths-art
bon, je répond un peu tard car le projet n'aura en fait certainement pas de suite donc...(ça n'a rien à voir avec mon problème mais plus avec une interface à revoir entièrement)

Pour les curieux, je donne le code quand même :

CODE
ul.menu{

background-color:#FC3;

padding:0;

margin:0;

margin-left:10px;

color:white;

position:absolute;

list-style-type:none;

width:340px;

}



ul.menu li,ul.menu li a:visited,ul.menu li a:active{

background-color:#C93;

color:white;

clear:none;

padding-left:5px;

font-size:15px;

font-weight:bold;

display:block;

padding-left:10px;

text-decoration:none;

}



ul.subMenu{

margin:0px;

background-color:#FC3;

display:block;

color:black;

padding-left:10px;

font-size:13px;

list-style:none;

list-style-type:none;

}



ul.subMenu li a,ul.subMenu li a:link,.subMenu li a:visited,.subMenu li a:active{

display:block;

background-color:#FC3;

margin:0;

padding:0;

padding-left:5px;

height:18px;

color:black;

font-size:13px;

font-weight:normal;

text-decoration:none;

}



.subMenu li a:hover {

height:18px;

background-color:#C93;

}



#subSubMenu{

background-color:#FC3;

margin-left:-10px;

padding-left:0px;

font-size:12px;

list-style:none;

list-style-type:none;

}



#subSubMenu li,#subSubMenu li a:link,#subSubMenu li a:visited,#subSubMenu li a:active{

display:block;

font-weight:normal;

height:16px;

padding-left:5px;

color:black;

font-size:12px;

text-decoration:none;

}



#subSubMenu li a:hover {

background-color:#090;

}

Ne prettez pas trop compte à du code redondant que je n'ai pas eu le temps de supprimer...
voilà
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.