[résolu] Menu horizontal (liste) avec éléments centrés verticalement

Bonjour ou plutôt bonsoir,

J'ai fait un menu horizontale, pour cela j'utilise une liste que j'affiche en ligne. Chaque élément de la liste à une image de fonds qui est un onglet. Je peux centrer chaque élément de liste à l'horizontal mais pas à la verticale (enfin pas sur IE et firefoxen meme temps).

Si je choisi un padding de quelques pixels, sur IE l'élément est descendu d'autant, mais avec firefox, l'image de fond est alors plus grande, bon l'image est plus parlante que mes explications :

Sous ie (c'est ce que j'attends comme résultat):



Sous firefox :



Voici mon code CSS :

 *{
	padding : 0;
	margin: : 0;
	}

ul {
	width : 100%;
	
}

li {
	list-style-type : none;
	background-image: url(bouton.png);
	height: 33px;
	width : 107px;
	padding-top: 6px;
	float : left;
	text-align : center;
	}

J'ai recherché sur la FAQ et le forum les problèmes d'alignement vertical y compris le tuto mais cela ne m'a rien apporté.
Modifié par manu_css (14 Jan 2007 - 15:25)

Utiliser un padding est une bonne option. Par contre, il faudra prévoir une hauteur d'onglet variable (et donc des images de fond en conséquence), car on ne peut pas maitriser la taille qu'aura le texte chez l'utilisateur.

Les différences visuelles entre IE et Firefox me font penser à deux choses :
- soit un problème de fusion des marges géré différemment dans les deux cas (pas très probable) ;
- soit un problème de modèle de boite non conforme dans Internet Explorer (plus probable).

Internet Explorer applique-t-il bien le modèle de boite CSS pour ta page ?
Sinon, aurais-tu une version en ligne (version en cours ou page de test) pour que l'on puisse voir de quoi il retourne ?

le problème est que la liste se situe dans un bloc div qui se situe lui meme entre deux blocs div.

Sous le menu à onglet, le bloc div doit etre parfaitement collé, car je gère des images dynamiques pour donner un effet d'onglet sélectionné. En fait l'onglet donne l'impression d'être mis en avant. Donc je ne peux pas me cantonner à la solution d'une image qui varie, il faut que la hauteur soit fixe.



En fait sous les onglets se trouve un bloc div dans lequel il y a un liste d'image en ligne. Sous l'onglet sélectionné, une certaine image est placé, et sous les autres, l'image de fond s'étend.

C'est difficile d'expliquer, j'essai de faire de mon mieux

A j'oubliais, le texte dans les onglets sera défini en px pour que l'utilisateur ne puisse pas modifier la taille. Sauf si quelqu'un à une autre solution pour régler ce pb d'accessibilité
Modifié par manu_css (21 Dec 2006 - 00:16)

manu_css a écrit :
A j'oubliais, le texte dans les onglets sera défini en px pour que l'utilisateur ne puisse pas modifier la taille. Sauf si quelqu'un à une autre solution pour régler ce pb d'accessibilité

Problème : ça ne marche pas. C'est à dire que tu ne peux pas empêcher l'utilisateur de redimmensionner le texte si ça lui chante, de demander une taille minimale de texte (genre tu veux du 10px, mais l'utilisateur a fixé la taille de texte minimale à 12px), etc. Même avec Internet Explorer, qui est le seul navigateur à ne pas autoriser le redimensionnement des fontes en pixels, on peut l'activer dans les options.

De plus, il suffit que tu demandes une fonte que l'utilisateur n'a pas, et que le navigateur sélectionne alors une fonte par défaut un peu plus grande, pour que le texte prenne plus de place que prévu. Par exemple, si tu demandes de l'Impact, et que le navigateur utilise à la place du Verdana, c'est la cata. Le Verdana est beaucoup plus volumineux, pour un même corps en pixels. Dur, hein !

Pour vraiment figer le texte, il n'y a qu'une solution : utiliser du texte en images.


Sinon, tu n'as rien dit sur le mode Strict/Quirks et le modèle de boite appliqué par IE.

Pour répondre à ta question pour le modèle de boîte, là j'avoue que je n'avais jamais entendu parlé de mode Strict/Quirks et si je savais seulement que ie gèrait les padding et margin différemment, mais c'est tout.

qu'est ce c'est ? cela pourrait il me permettre de résoudre mon pb ?
Modifié par manu_css (21 Dec 2006 - 08:43)

manu_css a écrit :
qu'est ce c'est ? cela pourrait il me permettre de résoudre mon pb ?

Je ne sais pas, qu'est-ce qu'en pense la FAQ ?

manu_css a écrit :
Pour répondre à ta question pour le modèle de boîte, là j'avoue que je n'avais jamais entendu parlé de mode Strict/Quirks et si je savais seulement que ie gèrait les padding et margin différemment, mais c'est tout.

Internet Explorer 6+ gère tout à fait correctement les padding et margin... quand on fait les choses dans les règles.

J'ai lu quelques trucs sur les modèles de boîte en mode stict ou quirks, mais je dois rester en strict. (car ce que je veux faire rentre dans le projet obligatoire d'une licence d'info).

a écrit :

mpop a écrit :
Internet Explorer 6+ gère tout à fait correctement les padding et margin... quand on fait les choses dans les règles.

je lis que ie 6 et supérieur ne gère pas correctement les padding et margin puisque la longueur d'un élément de type bloc reste fixe et les marges sont internes au bloc.
J'en conlu qu'il n'est pas possible d'aboutir au meme résultat avec firefox et ie mais je me trompe surement. Donc mpop, comment faire les choses dans les règles comme tu dis
Merci de ton aide

Donc mon problème se résume ainsi, comment faire pour qu'un élément de type liste garde une hauteur identique sur ie et firefox lorsqu'on défini un padding pour cet élément ?
Modifié par manu_css (21 Dec 2006 - 22:15)

manu_css a écrit :
je lis que ie 6 et supérieur ne gère pas correctement les padding et margin puisque la longueur d'un élément de type bloc reste fixe et les marges sont internes au bloc.

Visiblement, tu n'as pas bien lu... Les liens donnés dans la FAQ sont quand même de bonne qualité me semble-t-il.

quelque chose m'échappe là !

Le modèle de boîte microsoft et celui de firefox (modèle standard) sont différent, alors comment puis je utiliser la propriété padding sans modifier la hauteur du bloc sur firefox ???

Eldebaran tu me dis que je n'ai pas bien lu et pourtant je lis avec application depuis plusieurs mois que ce sont deux modèles différents. Je sollicite donc une sévère remontrance qui m'indique où lire correctement .

http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks a écrit :
Avec la version 6.0 d’Internet Explorer, l’interprétation des dimensions CSS des boîtes est la même que pour les autres navigateurs, c’est le modèle de boîte dit "Standard". Il y a cependant quelques exceptions à cette interprétation qui entretiennent l’illusion que rien n’a changé du côté de chez Microsoft.

Je te laisse lire la suite...
Modifié par Eldebaran (21 Dec 2006 - 22:44)

Merci Eldebaran pour le lien, je n'avais pas trouvé cette page lors de mes recherches.

En fait IE n'affichait pas le même résultat car j'avais mis le prologue XML à mon doctype or :

a écrit :
http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks a écrit :En effet, IE 6.0 passe en mode Quirk dans les cas suivants :

* une page HTML sans DOCTYPE (donc non valide),
* une page HTML avec un DOCTYPE tronqué (sans URL de la DTD),
* une page HTML avec une DTD d’une version de HTML inférieure à la version 4,
* une page avec un DOCTYPE XHTML précédé du prologue XML (prologue inutile pour une page xhtml servie en text/html),

Donc maintenant, les deux navigateurs affichent le même résultat mais mon problème concerne du coup les deux affichages. Je rappelle que je dois rester en strict.

Alors comment centrer verticalement le contenu d'un élément list dans son bloc sans avoir le problème de l'image de fond qui se répète lorsqu'on utilise un padding pour descendre le contenu dans le bloc ?
Modifié par manu_css (21 Dec 2006 - 22:59)

manu_css a écrit :
Merci Eldebaran pour le lien, je n'avais pas trouvé cette page lors de mes recherches.

C'était pourtant le second lien donné dans l'article de la FAQ dont je t'ai donné le lien.

Effectivement, donc méa culpa, sans doute la fatique .

J'ai trouvé url=http://darkmag.net/darkBlog/index.php?2004/12/23/87-the-doctype-switching-is-not-enough]ici[/url] un message de Laurent Denis qui dit :

a écrit :
Restez en mode strict.
- utilisez un hack CSS pour rectifier le comportement d'IE
- ou mieux, adressez un contenu et une CSS spécifiques à IE
- ou mieux, faire des CSS indifférentes au mode de rendu.

Quel hack css utiliser ? ce hack ne posera-t-il pas de pb avec ie7 ?
Sinon que dois je comprendre par "faire des CSS indifférentes au mode de rendu"

manu_css a écrit :
Quel hack css utiliser ? ce hack ne posera-t-il pas de pb avec ie7 ?

Ne pas utiliser un hack (qui pourrait poser problème à Internet Explorer 7, effectivement, ou à des versions à venir...), mais plutôt les commentaires conditionnels, en visant bien les versions d'IE souhaitées.
Cf. une recherche sur « commentaires conditionnels » pour plus d'infos.

manu_css a écrit :
Sinon que dois je comprendre par "faire des CSS indifférentes au mode de rendu"

Le point sensible qui fait la différence la plus importante entre les deux modes de rendu (Standard et Quirks), c'est les padding. Il suffit donc de ne pas utiliser de padding pour les blocs qui ont une largeur fixe, pour éviter les problèmes.
Même chose avec les bordures, mais une bordure de 1px aura moins d'impact qu'un padding de 10 ou 20px...

Voilà, j'ai enfin trouvé la solution à mon problème.

Alors si vous voulez créer un menu horizontal et centrer les éléments de ce menu verticalement, voici ce qu'il faut faire (la solution est en fait très simple)

Voici la liste qui crée mon menu :

<ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">catalogue</a></li>
      <li><a href="#">votre compte</a></li>
    </ul>

Voici le code css

/*la liste doit prendre toute la largeur de son conteneur*/
ul {
	width : 100%;
}

li {
	
	/*choix d'une image de fond de chaque élément de liste*/
	background-image: url(onglet.png); 
        
/*chaque élément de la liste doit permettre d'afficher l'image de fond qui représente un onglet, les dimensions de chaque bloc de la liste doivent correspondre aux dimensions de l'image qui sert de fond*/
	height: 33px;
	width : 107px;
	
/*pour obtenir une liste horizontale et qui reste de type bloc (display : inline fait perdre cette caractéristique)*/
	float : left;

/*aligner au centre le contenu de chaque élément de liste*/
	text-align : center;

/*supprimer les puces*/
	list-style-type:none;
	}

a {
	/*supprimer le soulignement des liens*/
	text-decoration: none;

/*donner une hauteur de ligne qui soit la même que le bloc li qui contient le lien. Par défaut, un élément en ligne est centré verticalement sur une ligne*/
	line-height : 33px;
}

Merci à tous ceux qui ont répondu à ce post.

N'hésitez pas à faire des remarques.

Bien sûr, cette solution n'est valable que pour un contenu d'élément li qui tient sur une seule ligne.

En espérant que cela serve...
Modifié par manu_css (14 Jan 2007 - 15:27)