[Résolu] Liste à puce : Hauteur

Bonjour,

Je possède une liste à puce servant de menu horizontal multilingues. Elle est donc en "display: inline;".

Mon problème est le suivant : certains éléments de mon menu sont sur une ligne et d'autres sur deux lignes (en fonction de la langue). Je ne parviens pas à avoir une hauteur de cellule équivalente (cf. couleur de fond) et je ne parviens pas à aligner mon texte verticalement dans sa cellule.

Je me suis pourtant basé sur cet article mais sans succès : Centrer verticalement un bloc dans un conteneur de hauteur fixe

Contrainte principale, il faut nécessairement que je conserve ma structure "liste à puces".

Voici mon jsfiddle : http://jsfiddle.net/LkENZ/2/

Merci d'avance,
Modifié par Alphonse (21 Aug 2013 - 12:01)

Bonjour !

J'ai réalisé quelque chose qui ressemble à ce que tu demandes basé sur ton fiddle. L'astuce vient des display table et table-cell : le seul inconvénient que j'y voie est que les <a> n'ont pas tous la même hauteur, mais en gérant le background sur les <li> cela ne se voie plus.

Est-ce suffisant dans ton cas ?

Ca aurait été parfait sauf que j'ai l'obligation de rester compatible IE7 !

Bon, sinon j'ai ceci mais c'est un peu extrême comme solution...
--> http://jsfiddle.net/LkENZ/3/

Je vais voir si je parviens à définir mon "li" comme "conteneur" et mon "a" comme "bloc" (puisqu'il est de toute manière en "display: bloc;".

N'hésitez pas à me donner des conseils

Bon, voici ce que j'obtiens au final : http://jsfiddle.net/LkENZ/6/
Par contre, avoir un "p" à l'intérieur d'un lien "a", c'est pas bon même si mon lien "a" est en "display: block;" mais je ne parviens pas à faire mieux...

Re !

Effectivement, mais tu peux remplacer les <p> par des <span> sans souci, et ça c'est plus que correct !

Et pour la précision, ton display: inline sur le <ul> ne sert à rien, car un float: left force le display à être en block.

Sinon ta solution a l'air très bonne, et si ça marche sur IE7 tout va bien !!

(Désolé de n'avoir pas plus aidé que ça, à charge de revanche )

Avec l'astuce du tutoriel d'Alsacréations (et beaucoup de manipulations), j'ai su résoudre le problème et être compatible IE7 ! Merci aussi Ten !

Résolu !