Menu sur deux colonnes

[smog]

Bonjour à tous,

Je voudrais faire un menu (en CSS) comportant 8 articles.
Cahier des charges :
• 2 colonnes de 4 ;
• un petit dessin devant chaque article.

Les deux contraintes me posent problème. Je commence des essais mais, n'étant pas un chevronné des CSS, au fur et à mesure de mes lectures j'imagine des solutions et je ne sais pas vers laquelle me tourner.

Vaut-il mieux faire deux colonnes comportant chacune 4 articles les uns sous les autres (je ne veux pas qu'ils soient en ligne), ou bien y a t-il possibilité de tout regrouper dans un div "menus" mais en affichant deux colonnes de 4 ?
La gestion des <ul> et des <li> n'est pas très claire pour moi ; peut-on mélanger du display:inline et du display:block pour aligner des articles deux par deux ?

Je sais que j'ai beaucoup encore à apprendre, d'où ma sollicitation...

Merci !! (Je m'attaquerai au problème des icônes devant les articles de menu après, mais si vous avez un lien qui permet de comprendre la technique la plus judicieuse, je suis preneur... )

 

[momo-fr]

Tu peux réaliser ça de différente manière, la question étant souvent de savoir si ça doit être "fluide" (en largeur) ou pas.

La construction passera sans doute par 2 <ul> côte à côte (float) avec chacune leur <li> de menus. D'autres utilisent des listes de définition, c'est vrai que l'on choisit en fonction de ses connaissances des balises et de la souplesse de design qu'elles procurent.

Mais un dropdown menu est un peu plus compliqué à gérer, javascript sera sans doute de la partie pour que ce soit élégant et visible partout (notamment < ie8).

Une page qui traite de ce sujet avec pas mal de références et tutoriels.

Un exemple de mega menu avec CSS3 (tu as toute la source en téléchargement)

Une autre source du même acabit

Une belle page consacrée aux menus (à voir).

Bonnes recherches&#8230;

NOTA 1 : toutes ces technos ont des contraintes, ça ne marche pas avec tous les navigateurs, pour savoir qui fait quoi ce site est indispensable.

NOTA 2 : si tu es fainéant il y a ça aussi&#8230;

 

[smog]

Génial, merci infiniment momo. Les 2 <ul> côte à côte, c'est par là que je vais commencer.
Je vais décortiquer toute cette documentation.

 

[smog]

Bon, n'ayant pas encore eu le temps de travailler les "menus déroulants", j'ai fait un flottant dans un DIV "menus".
Ca marche, sauf que je n'arrive pas à mettre un petit dessin en guise de puce...
Je ne comprends pas mon erreur.
Je précise que le fichier frog.gif se trouve dans mon dossier contenant la feuille de style.

<div id="menus">
      	<ul>
      		<li>SECONDE</li>
      		<li>M.P.S.</li>
      		<li>1ère S</li>
      		<li>Term. STL</li>
      	</ul>
      	<ul class="droite">
      		<li>I.S.N. Term. S</li>
      		<li>Club F.A.</li>
      		<li>LIENS</li>
      		<li>CONTACT</li>
      	</ul>
      </div>

Partie CSS :

#menus li {
	display: block;
	padding: 0px;
	margin: 1px;
	border: 0px;
	color: #fff;
	list-style-image: url(frog.gif);
	}

Ce doit être évident mais je sèche...

 

[momo-fr]

Si tu veux garder l'image sur List-style-image il faut changer le model box "block" en "list-item" mais je te le déconseille c'est un peu à la marge et ça merde sur certains navigateurs, pour des belles puces (et bien placées en plus) il faut utiliser l'image en background des <li>, quelque chose comme ça :

#menus li {
display: block;
margin: 1px;
border: 0px;
color: #fff;
padding: 0px 0px 0px 25px; <!-- ici tu gères l'espace pour la puce sur le left -->
background-image: url(frog.gif);
background-repeat: no-repeat; <!-- On évite la répète de la puce -->
background-position: left top; <!-- tu changes "top" en valeur pixel, positif ou négatif si tu veux un placement pile-poil -->
list-style-type: none; <!-- On évite les bullets standards de la liste -->
}

A essayer&#8230;

 

[smog]

Ok, merci à toi : je vais essayer ça.
Ce qui me paraît incompréhensible, c'est que le "list-style-image" est censé faire le job, non ? Ou alors ça dépend du navigateur ?
Enfin, je vais mettre en œuvre ta technique. Merci encore !

PS : si je veux que l'image change de couleur au survol, je crée un li:hover avec les caractéristiques de l'image "bis" ? (je demande au passage pour profiter de ma réponse, mais j'essaierai aussi !)

 

[momo-fr]

Ok, merci à toi : je vais essayer ça.
Ce qui me paraît incompréhensible, c'est que le "list-style-image" est censé faire le job, non ? Ou alors ça dépend du navigateur ?

C'est sensé mais c'est un peu obsolète et ça pose des problèmes avec certains navigateurs, il vaut mieux l'éviter, de plus ma soltuion te permet de positionner ta puce au pixel près et ça marche avec Explorer PC et Safari Mac, donc la bonne solution.

PS : si je veux que l'image change de couleur au survol, je crée un li:hover avec les caractéristiques de l'image "bis" ? (je demande au passage pour profiter de ma réponse, mais j'essaierai aussi !)

Bien sûr tu changes ton image et au survol ça change… :rateau:

 

[smog]

Cool !!!

 

[smog]

Merci encore momo, ça marche impeccablement.
Je n'arrive pas à placer idéalement les puces (en remplaçant top et left par des valeurs en pixel), mais ça doit être dû à au bg-position (héritage ?)... Je vais regarder ça ensuite, mais de toute façon c'est un détail : c'est déjà très bien comme ça.

Juste pour aller plus loin : si je veux une puce différente pour chacun de mes articles de menu, quelle est la méthode la moins "lourde" ?

La seule à laquelle je pense est celle qui consiste à créer une classe pour chacun de mes articles de menu (il y en a huit : li.menu1, li.menu2 etc.) ; chaque classe contient l'image de la puce correspondante, et chaque menu est appelé avec la class adaptée.
Mais ça me paraît lourd parce que répétitif. Mon expérience étant limitée, je me dis qu'il y a une autre méthode moins lourde ? Ou je suis dans le vrai ?

Bonne journée !

 

[Nephou]

Ça dépend des navigateurs que tu dois supporter (mon truc fonctionne à partie IE 7) mais pour ne pas rajouter trop de classes dans ton code HTML je te propose d&#8217;utiliser le sélecteur d&#8217;attribut ([attribut]) en testant le contenu de href :

a[href*="morceau_d_url"]{
/* tes règles ici */
}

Ce sélecteur signifie « ne concerne que les éléments <a> dont l&#8217;attribut href à une valeur qui contient &#8220;morceau_d_url&#8221; ».

Cela demande en revanche que ton picto soit rattaché à ton lien et non à l&#8217;élément de la liste qui contient ton lien.

 

[momo-fr]

Oui, de toute façon un picto différent sur 8 liens c'est quelque part 8 règles&#8230; après cela peut se servir d'un seul visuel avec les portes coulissantes (mais il faut connaître les limites dimensionnelles des menus. Bref 8 pictos en gif ou png 8 c'est que dalle.

Mois j'ajoute une classe par <li> (ou lien de <li>), genre :

/* Pictos liste menu */
/* Règles génériques */
.fleche, .ballon, .cheval, .globe, .vache, .arbre {ici positionnement et comportement du image background}
/* Image du picto */
.fleche {} <- normalement rien à mettre ici, les règles sont dans les génériques
.ballon {modification de l'url image seulement}
.cheval {modification de l'url image seulement}
.globe {modification de l'url image seulement}
.vache {modification de l'url image seulement}
.arbre {modification de l'url image seulement}

Si ton visuel contient toutes les icônes (bien espacées en hauteur par exemple pour éviter d'apparaître dans le hauteur du menu, tu n'a pas à changer l'url image mais la position verticale de l'image.

A lire sur Alsacréations

Les portes coulissantes 1 sur Pompage.net

Les portes coulissantes 2 sur Pompage.net

Au travail&#8230;

 

[smog]

Merci à tous les deux, je progresse à vitesse grand V.
Je ne connaissais pas le [attribut], bonne découverte. Mais je ne crois pas que j'arriverai à m'en sortir dans mon cas précis. Par contre ça va me simplifier la vie pour autre chose.

momo, si je comprends bien, on peut "décomposer" sa série de "règles", c'est à dire écrire quelques instructions entre accolades et faire de même plus loin, tout se passe comme si c'était dans la même accolade ? Je ne savais pas ça, je n'ai à vrai dire jamais essayé, mais c'est vrai que ça simplifie un peu la lecture du code. (Dis moi si je me trompe !)

 

[momo-fr]

C'est le principe des styles associés, si tu as des règles récurrentes sur plusieurs styles tu peux les associer pour leur définitions et ensuite ne plus t'occuper de ce qui est particulier à chaque style.

Et n'oublie pas que tu peux cibler un style dans la hiérarchie de parenté… bref il y a plein de façons d'écrire les styles, en essayant de limiter le poids du code à consulter.