[publié][Résurrection Tuto]Menus simples en CSS

Salut !

Suite à cette discussion dans le bar, j'ai pondu ce tuto sur la construction de menus simples en CSS.

Qu'en pensez-vous ?
Modifié par Sopo (11 Jan 2007 - 20:28)

Salut,

Je n'ai pas tout regardé mais juste survolé pour le moment...

Pour faire un rollover CSS qui fonctionne au clavier sous IE, il me semble qu'il faut mettre :

#nav li a:hover, #nav li a:focus, #nav li a:active

Une suggestion aussi, ne vaudrait-il mieux pas mettre une classe plutôt qu'un identifiant pour donner la possibilité de faire plusieurs menus ?
Modifié par koala64 (07 Jan 2007 - 23:25)

koala64 a écrit :
Salut,

Je n'ai pas tout regardé mais juste survolé pour le moment...

Pour faire un rollover CSS qui fonctionne au clavier sous IE, il me semble qu'il faut mettre :

#nav li a:hover, #nav li a:focus, #nav li a:active

J'avoue que je ne me suis pas encore occupé d'IE pour le moment, j'ai écrit ça sous Linux. Si quelqu'un peut confirmer, je corrige

a écrit :

Une suggestion aussi, ne vaudrait-il mieux pas mettre une classe plutôt qu'un identifiant pour donner la possibilité de faire plusieurs menus ?

Eventuellement, mais ça ne me semble pas primordial dans le cadre de ce tutoriel particulier ...
Modifié par Sopo (07 Jan 2007 - 23:27)

Pour le rollover, je confirme, je m'étais fait reprendre par jpv.

Corrigé, merci

Sopo a écrit :
J'avoue que je ne me suis pas encore occupé d'IE pour le moment, j'ai écrit ça sous Linux. Si quelqu'un peut confirmer, je corrige

Tu peux tester par toi-même, avec IEs4linux, tant qu'à faire.


Sinon, beau tutoriel, mais j'aurais quelques remarques :

1. Avoir chaque menu (résultat) dans une page spécifique serait beaucoup plus clair. Surtout pour ceux qui voudraient consulter le code source : ils n'auraient pas à trier entre les styles du premier, deuxième, troisième, quatrième menu...
De plus, ça ne devrait pas prendre trop de temps de faire quatre petits fichiers au lieu d'un.

2. Attention à la famille de fontes choisie : donner comme modèle à des débutants la succession "Trebuchet MS" et "Verdana", c'est pas tip top. Le Verdana sera assez énorme par rapport à un Trebuchet, ce qui pourrait poser quelques problèmes. Arial et Helvetica sont de bons substituts pour Trebuchet.

3. Le code suivant m'a fait grincer des dents :

#nav li a {
	line-height: 30px ;
}

Argh.
Si le texte de mon item de menu passe sur deux lignes, j'aurai du 60px de hauteur, avec un bout qui aura la bonne image de fond, et l'autre bout qui aura le fond rouge sombre générique. Du coup, je vais être super heureux, moi.
Une solution plus adapté :

#nav li a {
	line-height: 1em;
	padding: 6px 2px;
}

Pensez aussi à l'agrandissement du texte, berdel de morde ! Ce qui nous amène au point suivant :

4. Une image de 30px de haut c'est bien, mais si j'agrandis le texte, à tous les coups ça dépasse. On pourrait mentionner que prévoir de la marge pour les images de fond ne peut pas faire de mal. En l'occurence, une image de 40px de haut, les 10 ou 6 derniers pixels partant en dégradé vers la couleur de fond prévue.

koala64 a écrit :
Pour le rollover, je confirme, je m'étais fait reprendre par jpv.

Mais comment est appliqué l:active par les autres navigateurs ? Doubler :hover et :focus par :active, ça ne pourrait pas poser problème aux autres navigateurs ? Dans ce cas, il faudrait passer par des commentaires conditionnels.

Mais bon, si les autres navigateurs appliquent correctement la spécification CSS (http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes ), ça devrait être OK.

Dans le doute, oui, on peut passer la pseudo-classe active en commentaires conditionnels vu que de toute façon, ce n'est que pour IE.

Salut mpop

1> Aucun problème, ça dépend plus de la façon dont Raphael voudra goupiller ça ...

2> Verdana remplacé par Arial

3 & 4> L'interlignage en em n'est pas un peu délicat à gérer dans le cas d'un menu graphique ? Pour le premier cas, c'est vrai que ce ne serait pas plus compliqué, mais je ne vois pas comment faire dans le cas des portes coulissantes. La deuxième partie de l'image apparaître de toutes façons, dans un des deux états, non ? Et puis, je suis incapable de faire un dégragé correct avec The Gimp pour l'instant (j'apprends, j'apprends )

IEs4Linux, pas possible à installer sans connection Internet, et comme mon routeur wi-fi est décédé hier, RIP, je n'ai pas pu me connecter avant ce soir

Sopo a écrit :
1> Aucun problème, ça dépend plus de la façon dont Raphael voudra goupiller ça ...

Je pense que tu peux y aller pour quatre fichiers séparés (c'est ce qu'on retrouve pour pas mal de tutoriels sur Alsa il me semble).

Sopo a écrit :
3 & 4> L'interlignage en em n'est pas un peu délicat à gérer dans le cas d'un menu graphique ? Pour le premier cas, c'est vrai que ce ne serait pas plus compliqué, mais je ne vois pas comment faire dans le cas des portes coulissantes. La deuxième partie de l'image apparaître de toutes façons, dans un des deux états, non ?

Si on place les deux images l'une en dessous de l'autre, tout à fait. Mais qui a dit qu'on était obligé de placer les images l'une en dessous de l'autre ? Est-ce que côte à côte ça ne serait pas tout aussi efficace (pour un bloc de largeur fixe, s'entend) ? Ça éviterait que l'on voit les deux états simultanément sur le même item, lorsque le texte est trop grand...

Donc moi je dis : au boulot, on met les images côte à côte, et fait des petits dégradés, etc.

Au fait, pourquoi le survol ne change-t-il que la position de l'image, et pas également la couleur de fond ? On passe pourtant bien à une dominante jaune, il me semble ? Alors pourquoi reste-t-on avec une couleur de fond rouge ?
Et les utilisateurs qui ont désactivé les images, ils n'ont pas le droit eux aussi de voir un effet de survol ? C'est de la discrimination !

Sopo a écrit :
Et puis, je suis incapable de faire un dégragé correct avec The Gimp pour l'instant (j'apprends, j'apprends )

Il suffit de choisir l'outil « dégradé ». Truc utile à savoir : dans les options de l'outil (double-clic sur l'icône de l'outil), un type de dégradé dont on se sert souvent c'est « PP vers Transparent » (premier plan vers transparent).

Hello,
Je regarderai ça en détail tout à l'heure. Mais si c'est possible, pourrais-tu créer des illustrations étapes par étapes et pas seulement finales ? (les parties finales seraient alors en html sur des fichiers séparés effectivement)

PS : merci pour ta rapidité sur ce tuto !
Modifié par Raphael (08 Jan 2007 - 09:00)

Hello!

J'ai mis à jour pour tenir compte des remarques de mpop, ça devrait être mieux, comme ça.

Les exemples sont maintenant dans des fichiers séparés. Par contre, Raphael, qu'entends-tu par des illustrations étape par étape? Un truc pas-à-pas dans le style du tuto "Design complet ..." ?

mpop a écrit :
Et les utilisateurs qui ont désactivé les images, ils n'ont pas le droit eux aussi de voir un effet de survol ? C'est de la discrimination !

Parce que c'était dimanche après-midi, et que les séquelles du samedi soir ne leur ont pas laissé de place
Modifié par Sopo (09 Jan 2007 - 11:43)

Au fait, est-ce que le problème de la prise en compte des espaces non-significatifs (espaces entre les <li>) a été réglé dans IE 7 ?

J'ai parlé de ce problème sous IE 6, mais je ne sais pas s'il est toujours d'actualité avec IE7

a écrit :
Par contre, Raphael, qu'entends-tu par des illustrations étape par étape? Un truc pas-à-pas dans le style du tuto "Design complet ..." ?

Non non, plus simplement une capture d'écran du résultat obtenu pour chaque code que tu proposes.

Exemple : montrer à quoi ressemble le menu "brut" issu de ce code :

<ul id="nav">
	<li><a href="#" title="aller à la section 1">item1</a></li>
	<li><a href="#" title="aller à la section 2">item2</a></li>
	<li><a href="#" title="aller à la section 3">item3</a></li>
	<li><a href="#" title="aller à la section 4">item4</a></li>
	<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>

Puis montrer ce que cela donne après ça :

#nav {
	width: 200px ;
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	}

Etc.

L'utilisateur aura un suivi visuel du point de départ et de ce que l'on obtient à l'arrivée.

Ah quelques petits chipotages encore :

1- si les noms d'id pouvaient être compréhensible hors contexte, ce serait mieux ("nav" -> "navigation" par ex)

2- si le résultat des menus pouvait ne pas être souligné (ex http://sopo.freezee.org/menu1.html), ce serait un peu plus esthétique

3- "Malheureusement, en procédant de cette façon, on ne peut plus contrôler les hauteurs et largeurs des <li>." --> Juste préciser qu'on pourrait le fair mais en jouant sur les paddings et les line-height, mais il faut maîtriser un peu le sujet. Par contre il faut savoir que ce n'est pas impossible et que la solution du float doit être utilisée en second lieu puisqu'ils compliquent pas mal les choses.

En fait, si c'est possible, j'aimerais quand-même faire la "promotion" des menus horizontaux en inline car ils ont deux gros avantages par rapport aux floats :
- ils peuvent être centrés
- ils ne sortent pas du flux

Ton exemple 2 pourrait très bien être réalisé en inline ainsi : http://www.goetter.fr/temp/menu2bis.html

Je pense que cette méthode doit être signalée voire privilégiée tant que possible pour tout menu "simple" horizontal.

4- attention aux largeurs imposées de taille fixe. Dans cet exemple, chaque lien a une largeur imposée de 150px, que se passe-t-il pour les longs textes ou lorsque la police est agrandie ?
Tu auras de nombreux retours de gens qui ne comprendront pas pourquoi ç dépasse. Mieux vaut ne pas imposer de largeur du tout.

Sopo a écrit :
Au fait, est-ce que le problème de la prise en compte des espaces non-significatifs (espaces entre les <li>) a été réglé dans IE 7 ?

J'ai parlé de ce problème sous IE 6, mais je ne sais pas s'il est toujours d'actualité avec IE7

A ma connaissance non

Ok, pour les captures d'écran, pas de problème. Mais penses-tu que ce soit nécessaire de le faire pour les différents types de menu ? On pourrait se contenter de le faire pour le premier.

Pour le menu horizontal, je peux développer les deux types de menus. Les flottants ont l'avantage de permettre de créer des items de largeur fixe, ce qui peut être intéressant (plutôt du point de vue design).

espaces non-significatifs > je remplace "IE 6" par "IE"

J'oubliais, pour le "résultat non souligné", tu veux dire "text-decoration: none" sur les liens ?

Edit : On ne pourra jamais obtenir une largeur précise en jouant sur les padding d'un élément inline, ou je me plante ?
Modifié par Sopo (09 Jan 2007 - 13:52)

a écrit :
Ok, pour les captures d'écran, pas de problème. Mais penses-tu que ce soit nécessaire de le faire pour les différents types de menu ? On pourrait se contenter de le faire pour le premier.

Oui, tu as peut-être raison.

a écrit :
Pour le menu horizontal, je peux développer les deux types de menus. Les flottants ont l'avantage de permettre de créer des items de largeur fixe, ce qui peut être intéressant (plutôt du point de vue design).

Tout à fait. L'idéal serait de montrer les avantages de chacun.

a écrit :
J'oubliais, pour le "résultat non souligné", tu veux dire "text-decoration: none" sur les liens ?

Oui, comme sur l'exemple que j'ai réalisé (cf lien)

a écrit :
Edit : On ne pourra jamais obtenir une largeur précise en jouant sur les padding d'un élément inline, ou je me plante ?

Non malheureusement, mais faut-il avoir des largeurs fixes ? C'est très difficile à maîtriser lorsque les contenus peuvent être longs ou lorsque l'on augmente la taille du texte.
Un menu de largeur fixe implique une taille de texte fixe... ce qui n'est pas possible. Lorsque cette taille de texte est supérieure à environ 20px, on peut estimer que les dommages ne seront pas très graves.

Les captures d'écran dans tous les sens, j'ai peur que ça n'alourdisse inutilement le tuto. Je vais le faire pour le premier menu, puis essayer de trier les étapes particulières et/ou significatives pour les autres.

Raphael a écrit :
J'oubliais, pour le "résultat non souligné", tu veux dire "text-decoration: none" sur les liens ?

Oui, comme sur l'exemple que j'ai réalisé (cf lien) Y'a un soucis avec le lien, justement Il pointe sur mon exemple (avec une parenthèse en trop)

a écrit :
Edit : On ne pourra jamais obtenir une largeur précise en jouant sur les padding d'un élément inline, ou je me plante ?

Non malheureusement, mais faut-il avoir des largeurs fixes ? C'est très difficile à maîtriser lorsque les contenus peuvent être longs ou lorsque l'on augmente la taille du texte.
Un menu de largeur fixe implique une taille de texte fixe... ce qui n'est pas possible. Lorsque cette taille de texte est supérieure à environ 20px, on peut estimer que les dommages ne seront pas très graves.Dans un design fixe, ça peut quand même être utile, par exemple pour diviser tout l'espace dispo en liens de même largeur, c'est parfois plus joli. Mais je peux insister sur le fait qu'il faut garder suffisament de marge en largeur pour permettre au texte de s'agrandir (ne pas écraser son texte dans des <li> de 43px de large, par exemple).

Sopo a écrit :
Y'a un soucis avec le lien, justement Il pointe sur mon exemple (avec une parenthèse en trop)

Ce lien pointe sur ton exemple : http://www.goetter.fr/temp/menu2bis.html ?
Tu es sûr ?
Ton exemple est fait en flottants, pas celui-là justement

a écrit :
Dans un design fixe, ça peut quand même être utile, par exemple pour diviser tout l'espace dispo en liens de même largeur, c'est parfois plus joli. Mais je peux insister sur le fait qu'il faut garder suffisament de marge en largeur pour permettre au texte de s'agrandir (ne pas écraser son texte dans des <li> de 43px de large, par exemple).

Disons que je préfèrerais ne pas proposer *par défaut* des tutos avec des textes qui ne peuvent pas s'agrandir joliement.
Si tu as une solution ça me va. Mais il faut au minimum expliquer le cas.

a écrit :
Ce lien pointe sur ton exemple : http://www.goetter.fr/temp/menu2bis.html ?

M'en fiche, il n'était pas au bon endroit

a écrit :
Disons que je préfèrerais ne pas proposer *par défaut* des tutos avec des textes qui ne peuvent pas s'agrandir joliement.
Si tu as une solution ça me va. Mais il faut au minimum expliquer le cas.

Je comprends, d'autant que c'est clairement un tutoriel orienté vers les débutants. Donc, je vais développer un exemple avec un menu centré, les <li> étant en display: inline, avant la seconde méthode.