alignement vertical texte dans liste

**pop_up** · 04/02/2008, 14h09

Bonjour,

Je cherche à savoir si il est possible d'aligner verticalement un texte dans une liste.

J'ai regardé de plus prés la propriété vertical-align et en regardant de plus prés, j'ai lu qu'elle ne sert qu'à aligner des éléments inline dans des éléments inline. (ou de type table-cell)

N'y a t'il aucune solution à ce problème alors pour que le centrage se fasse même avec un zoom dans le navigateur ?

merci

**Bisûnûrs** · 04/02/2008, 14h23

Tu as deux méthodes, pas forcément ce qu'il y a de mieux, mais ça fonctionne :

- Utiliser un line-height de la taille du height (ne fonctionne pas si le texte passe donc sur plusieurs lignes)
- Ne pas mettre de height, mais mettre un padding-top et un padding-bottom identiques.

**pop_up** · 04/02/2008, 16h40

N'y a t'il pas de solution pour combiner les deux ou donner l'illusion d'un menu uniforme ?

voici ce que j'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>cadre flottant</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
    <style type="text/css">
 
DIV#menu-haut {
margin:0;
 padding-left:34px;
 width:96.7%;
 height:6.2em;
 background-image:url("../images/fond-menu-haut.gif");
 background-position:left;
 background-repeat:repeat-y;
overflow:auto;
 font-size:0.7em;
 clear:both;
 background-color:#FFFFFF;
}
DIV#menu-haut ul  {
margin: 0;
padding: 0;
text-align: left;
display:inline;
width:40%;
}
DIV#menu-haut li  {
display: inline;
float:left;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin: 0;
height:auto;
width:157px;
border-right:1px solid #ABAAAD;
background-color:#E3E3E3;
font-weight:bold;
text-align:center;
}
DIV#menu-haut li a {
color:#014F61;
text-decoration:none;
}
DIV#menu-haut li a:hover  {
 text-decoration:underline;
}
 
 
    </style>
</head>
<body>
    <div id="menu-haut">
 
        <ul>
 
            <li ><a href="#" >menu haut</a></li>
            <li ><a href="#">menu haut qui va etre sur deux lignes ou plus</a></li>
            <li ><a href="#">menu haut trois</a></li>
            <li ><a href="#">menu haut quatre</a></li>
            <li ><a href="#">menu haut menu haut menu haut</a></li>
            <li ><a href="#">menu haut</a></li>
        </ul>
 
    </div>
 
</div>
</body>
</html>

J'ai utilisé la seconde technique mais le problème est que si je ne défini pas de hauteur, j'obtient ce rendu qui n'est pas trés uniforme.

encore merci

**pop_up** · 05/02/2008, 16h56

aucune solution ou technique qui permettrait d'avoir un meilleur visuel ?

c'est un point bloquant car le cahier des charges précise que ma liste doit etre centrée verticalement, mais si ce n'est pas possible techniquement alors il faut que j'en sois sur et que j'aille l'expliquer.

**Bisûnûrs** · 05/02/2008, 16h56

Avec un tableau ?

**pop_up** · 05/02/2008, 17h10

bonne blague effectivement.

Interdit pour l'accessibilité au sens accessiweb.

Donc tu me confirmes bien que ce n'est pas possible non ?

**Erwan31** · 05/02/2008, 17h22

Bonjour pop-up,
j'avais déjà trouvé une solution pour centrer verticalement plusieurs ligne de texte (dans un menu horizontal par exemple, mais c'est une méthode un peu acrobatique qui implique de faire certains calculs.
Pour information Firefox 3 qui va bientôt sortir implémentera enfin la valeur inline-block de display qui permet de centrer verticalement le centre vertical d'une boîte de ligne.
Gcyrillus a trouvé une autre solution ici: http://yidille.free.fr//plux/valign/...vertical-align

**Erwan31** · 05/02/2008, 17h28

Envoyé par pop_up

bonne blague effectivement.
Interdit pour l'accessibilité au sens accessiweb.

Comment ça interdit? Heureusement qu'un expert accessibilité ne passe pas par là, tu te ferais trucider

Un tableau de mise en forme peut tout à fait convenir à partir du moment ou il est bien linéarisé.

**pop_up** · 05/02/2008, 20h36

Je ne voit pas de solution qui pourrait s'adapter au code que je t'ai fourni.

Les tableaux sont strictements interdit d'un point de vue accesibilité car ils ne doivent servir qu'a structurer des données (un tableau a toujours ses balises <th> pour les titre et le reste pour le contenu) On ne peut pas deriver l'utilisation des tableaux pour faire de la mise en page ou palier a des bugs d'affichage.

Il s'agit ici de trouver une solution pour que :
- le contenu de la liste soit centré
- pour les <li> avec une ligne
- pour les <li> avec plusieurs lignes
- la hauteur de la liste soit la meme pour toutes les cellules (ou au moins qu'on ai l'illusion qu'elle l'est
- meme si l'on zoom le contenu doit rester lisible et ne pas se supperposer ou disparaitre.

Si tu vois une solution, hésite pas a me la proposer

**Erwan31** · 05/02/2008, 20h59

Envoyé par pop_up

Je ne voit pas de solution qui pourrait s'adapter au code que je t'ai fourni.

Les tableaux sont strictements interdit d'un point de vue accesibilité car ils ne doivent servir qu'a structurer des données (un tableau a toujours ses balises <th> pour les titre et le reste pour le contenu) On ne peut pas deriver l'utilisation des tableaux pour faire de la mise en page ou palier a des bugs d'affichage.

Je sais pas ou tu as lu ça mais c'est en partie faux. Les tableaux de mise en forme peuvent pallier à des limitations propre à CSS... voir à ce sujet http://www.accessiweb.org/fr/guide_a...fiche-5-6.html

Envoyé par pop_up

Il s'agit ici de trouver une solution pour que :
- le contenu de la liste soit centré
- pour les <li> avec une ligne
- pour les <li> avec plusieurs lignes
- la hauteur de la liste soit la meme pour toutes les cellules (ou au moins qu'on ai l'illusion qu'elle l'est
- meme si l'on zoom le contenu doit rester lisible et ne pas se supperposer ou disparaitre.

Si tu vois une solution, hésite pas a me la proposer

Le lien que je t'ai donné ne résout rien?

**pop_up** · 06/02/2008, 09h13

On ne doit pas lire la meme chose car je ne vois pas ou tu peux lire que les tableaux peuvent etres utilisés pour faire de la mise en page ???

Ils parlent de tableau de mise en forme dans le sens mise en forme de l'information et pas de mise en page. De plus je suis sur de ce que je te dis dans le sens que c'est un expert accessiweb qui me l'a dit.

Sinon sur ta page parmis les différentes solution :

# appliquer un line-height équivalent a la hauteur de l'élément pour centrer une seule ligne de texte : test sur line-height cette page exemple démontre le défaut de la technique sitôt qu'il y a plus d'une ligne de texte.

ne convient pas car j'ai plusieurs lignes parfois

appliquer un vertical-align a un ou plusieurs élément de type inline se côtoyant (une image en vertical-align:middle; par exemple). page test : (en) usage du vertical-align pour centrer une image dans un texte.

les ul et li ne sont pas des elément inline

appliquer un : vertical-align:middle; a une cellule de tableau pour que celle ci centre sont contenu verticalement Cette règle s'applique aussi au contenu d'un élément recevant un : display:table-cell; dans la feuille de style. page exemple : (en)test vertical-align:middle;

interdit

appliquer des marges négatives verticales sur un élément de type block (défaut agaçant , celui ci peut être en partie en dehors de l'écran et non visible sur sa partie haute)

ne résoud pas le problème d'avoir des cellules de memes hauteur

Libre a toi de me demontrer que tu arrives à faire quelque chose avec le code que j'ai posté avant.

**Bisûnûrs** · 06/02/2008, 09h53

Une solution serait que tes éléments de menu ne s'élargissent pas en longueur, mais peuvent le faire en hauteur.

De ce fait, tu peux mettre une image de fond d'1px de haut répétée verticalement sur ton ul. Cette image aurait la longueur du menu, et délimiterait donc tes différents li (remplacement des bordures). Tu rajoutes en plus une couleur de fond à ton ul et ça donnera l'impression que tes li ont tous la même hauteur, malgré le fait que certains aient deux lignes et d'autres une seule.
Après, le problème sera de centrer verticalement les li d'une seule ligne sur la hauteur de ton ul. Mais si ça ne te dérange pas d'avoir tes li de deux lignes centrés verticalement avec l'emploi du padding-top et bottom et tes li d'une seule ligne un peu moins centrés, c'est une méthode qui fonctionnera.

**pop_up** · 06/02/2008, 10h09

merci pour ta reponse bisûnûrs.

Je vais voir ce que je peux faire en exploitant tout ça.

**Candygirl** · 06/02/2008, 10h19

Envoyé par pop_up

appliquer un : vertical-align:middle; a une cellule de tableau pour que celle ci centre sont contenu verticalement Cette règle s'applique aussi au contenu d'un élément recevant un : display:table-cell; dans la feuille de style. page exemple : (en)test vertical-align:middle;

interdit

Et pourquoi? Le display table et table-cell est pourtant la solution pour donner le résultat que tu souhaites. Après, il est clair que le non-support d'IE pose un réel problème.

Autrement vu la largeur fixe de tes li la solution de Bisûnûrs peut être un compromis intéressant.

**pop_up** · 06/02/2008, 10h36

merci candygirl.

Il faut que j'essai tou ça.

Le problème de faire des sites accéssible est que cela est trés contraignant (et aussi une grosse prise de tete)

Je vous tiendrai au courant de ce que j'arriverai a faire.

**Erwan31** · 06/02/2008, 12h02

Concernant tes commentaires sur l'accessibilité je ne les commenterai pas tous mais la mise en forme ou la mise en page c'est pareil pour moi. On peut aussi parler de mise en scène ou de composition...

Tu as beaucoup d'interdit (et de préjugés) dis moi, le terme est un peu fort. On ne parle pas d'interdit mais plutôt de déconseillé, obligatoire ou non obligatoire.

**pop_up** · 06/02/2008, 12h18

je m'explique peut etre mal.

Pose la question à des experts de la liste de diffusion accessiweb et demande leur si tu peux utiliser un tableau pour faire de la mise en page pour un site accéssible "rang or" (label accessiweb) .

Ils te répondront surement mieux que je ne l'ai fait

**Erwan31** · 06/02/2008, 13h13

Envoyé par pop_up

je m'explique peut etre mal.

Pose la question à des experts de la liste de diffusion accessiweb et demande leur si tu peux utiliser un tableau pour faire de la mise en page pour un site accéssible "rang or" (label accessiweb) .

Ils te répondront surement mieux que je ne l'ai fait

De toute évidence et c'est maintenant connu de tous (ou presque) un tableau n'est pas fait pour faire de la mise en page, je le sais bien, ça fait un moment que je ne les utilise plus pour de la mise en page.

Mais tout ceci est absurde. A ma connaissance les tableaux de mise ne forme bien linéarisés ne sont jamais contre-indiqués et je vois pas en quoi il empêcheraient une labelisation niveau Or. De mémoire je n'ai rien lu de tel sur Accessiweb ou dans les WCAG 1.0. Peut-être dans les WCAG 2.0? Ca m'étonnerait tout de même.
Ceci dit je ne suis pas expert en accessibilité alors ce n'est pas impossible.

alignement vertical texte dans liste

Positionnement en CSS

Discussions similaires

Partager

Partager