Liste et sous liste côte à côte

Bonjour,

Depuis hier je cherche une solution pour positionner deux listes imbriquées côtes à côtes.

Quelque chose du genre :

<ul>
<li>li1</li>
<ul>
<li>li11</li>
<li>li12</li>
</ul>
<li>li2</li>
...
</ul>

Je voudrais placer chaque li de niveau 2 en face de son li de niveau 1.

Merci de votre aide.

Bonsoir,

Une page de test en ligne, un schéma explicatif ?

Tout est en local hélas mais voici un exemple en jpg

La liste 1 est (c'est un exemple) Ordinateur, Tablette et la liste deux est le type.

http://img11.hostingpics.net/pics/123472liste.jpg

Pour info il s'agit d'un Wordpress et voici le code exemple :

<ul><?php
			if($category->parent == get_cat_ID('Informatique')){
					wp_list_categories('title_li=&child_of=6');
			}
			?></ul>

Bonjour,

le code du 1er message n'est pas une liste imbriquée valide : le ul parent ne peut contenir que des li, pas d'autres ul. Les ul enfants doivent donc être dans un li puisque rien d'autre ne peut être dans le ul parent
Indice : les </li> apparaissent trop tôt.

Tant que le code HTML n'est pas valide, ce n'est pas la peine d'essayer de styler en CSS ces listes imbriquées car les navigateurs corrigent automatiquement le code d'une certaine manière pour qu'il devienne valide (ce qui est mieux qu'une page blanche ou un gros message d'erreur, merci à eux) mais on n'est jamais certain de ce qu'ils font. Avec un code valide, ils ne rajoutent pas leur sauce inattendue...
Modifié par Felipe (03 Jul 2014 - 20:50)

Désolé Felipe, oui, en effet, j'ai tapé un peu vite et je n'aurais pas dû fermé le premier <li> à cet endroit.

Mais bon, comme ce n'était qu'un exemple, ce n'est pas bien grave ...

Voici le corrigé qui ne sert à rien :

<ul>
<li>li1
<ul>
<li>li11</li>
<li>li12</li>
</ul>
</li>
<li>li2</li>
...
</ul>

Pour créer 2 colonnes, le contexte de formatage block en CSS est une méthode très pratique.
Exemple : http://codepen.io/anon/pen/AFcoh
L'inconvénient ici c'est que (il y a plusieurs lignes et que) les 2 items de niveau 1 n'ont pas une largeur identique et il faut la fixer (plutôt avec min-width que width, et une marge à droite pour qu'il y ait toujours de l'espace entre les 2 colonnes)

Pour des "colonnes" de même largeur, le modèle tabulaire de mise en page (en CSS, pas en HTML avec des table, tr, td hein !) est ce qu'il y a de plus compatible (IE8+)
Exemple : http://codepen.io/anon/pen/EetHy
La présence de table-layout: fixed force les navigateurs à strictement respecter les largeurs que l'on indique (ici .w20). En enlevant ça c'est l'autre algorithme de mise en page tabulaire qui est utilisé : la largeur des colonnes dépend du contenu de chacune des colonnes (s'il y a une cellule avec énormément de contenu, la largeur de sa colonne s'adaptera, je te laisse tester des cas extrêmes)
Modifié par Felipe (04 Jul 2014 - 22:15)

Bonjour Felipe,

Merci beaucoup pour ce code super nickel mais je m'interroge sur un point. Comme je le disais plus haut, il s'agit d'un Wordpress et la boucle affichant mes deux listes est celle-ci :

<ul><?php
			if($category->parent == get_cat_ID('Informatique')){
					wp_list_categories('title_li=&child_of=6');
			}
			?></ul>

Je ne vois donc pas comment positionner les classes sur les <li> et sous <ul>, <li> ?..