Probleme de centrage vertical dans css

[Zecat]

J'arrive pas a faire un centrage vertical ...

j'ai ca comme code dans mon css :

Code: Tout sélectionner

a.lienonglet_v2
{
       color : #00bbbb;
   background-color : #DDEEEE;
   border:1px solid #DDEEEE;
       text-decoration : none;
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 12px;
   height : 20px;
   width : 100px;
   text-align : center;
   text-vertical-align : center;
   font-weight : bold;
}   
a.lienonglet_v2:hover
{
   color : #00bbbb;
   background-color : #ECFFFF;
   border:1px solid #00bbbb;
}
a.lienongletok_v2
{
       color : #ffffff;
   background-color : #00bbbb;
   border:1px solid #00bbbb;
       text-decoration : none;
   font-weight : bold;
       font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 12px;
   height : 20px;
   width : 100px;
   text-align : center;
   text-vertical-align : center;

mais ca ne centre pas

[lambi521]

text-vertical-align : center; ça n'existe pas, c'est vertical-align:middle

[HawkEye]

Argh... de l'alignement vertical

Ceci devrait t'aider: http://phrogz.net/css/vertical-align/index.html

NB: ce n'est pas a.class {} que tu dois centrer verticalement, mais son container.

[Zecat]

ca change rien denis ...

voila mon code :

Code: Tout sélectionner

<td width="<?=$button_l?>" height="<?=$button_h?>" style="vertical-align:middle" <?=$bg_fond?>>
   <a href="<?=$menu_url1?>" <?=$class_menu1?> <?=$menu_title_1?>><b>Accueil</b></a>
</td>


[HawkEye]

Petite question / suggestion.

Je vois que tu précises la hauteur de a, élément qui a priori ne devrait pas avoir de "hauteur".

Pour centrer verticalement tes liens dans ton menu horizontal (si j'ai bien compris), ne serait-il pas plus efficace de travailler comme ceci:

Code: Tout sélectionner

<table id="menu">
<tr>
<td><a href="">link</a></td>
<td><a href="">link</a></td>
</tr>
</table>

Code: Tout sélectionner

table#menu td a {
display: block; /* prendra l'espace disponible en largeur */
padding: 4px 0 4px 0; /* rendra le lien cliquable tant 4px plus haut que 4px plus bas */
}

NB: je ne sais pas ce que ça donnerait dans une table... je préfère travailler avec des listes en display: block; pour les menu... mais ça devrait aller.

[Zecat]

finalement j'ai trouve la soluce sur alsacreation :

Code: Tout sélectionner

style="line-height:<?=$button_h?>px;vertical-align:middle"


Ca marche impec

Sinon pour la hauteur sur le lien c'est pour que toute la case soit cliquable ... en tout cas ca marche ... moi je fais dans le pragmatisme

[UsagiYojimbo]

C'est juste qu'un a étant de type inline, tu ne peux en théorie pas préciser de height, a moins de l'avoir passé en display:block (je pense que c'est là où voulait en venir Hawkeye). A vérifier du coup que cela passe sur tous les navigateurs actuels.

[Zecat]

Si vous voulez voir le resultat je viens de le mettre en ligne sur mon www (la nouvelle barre de menu ...).

Pas encore testé sur fox, chrome .. mais sur ie ca roule

Edit : bon ben verdict :

IE : OK c'ets nickel
Fox et chrome : pas beau

C'est chiant, ils pourraient pas se mettre d'acord une fois pour toute (voeux pieu )

[Marie-Aude]

Et surtout que c'est pas dans ce sens là qu'il faut le fait, il faut que ça soit nickel sur fox et chrome, et ensuite ajusté pour les multiples versions de IE (IE 6 , IE7, IE8, IE9)

[Zecat]

Et surtout que c'est pas dans ce sens là qu'il faut le fait, il faut que ça soit nickel sur fox et chrome, et ensuite ajusté pour les multiples versions de IE (IE 6 , IE7, IE8, IE9)

Je raisonne basiquement en parts de marché ... et IE c'est encore 80 ou 85 % des visiteurs chez moi ... donc je règlerai fox et chrome mais déjà que ca roule sur ie !

[Marie-Aude]

C'est pas ça...

1. si ça s'affiche mal sur FF / chrome ça baisse mécaniquement tes parts de marché
2. en terme de logique de programmation, IE est l'exception par rapport à la gestion des règles CSS, et a sa propre façon de gérer les erreurs. De plus IE a la désagréable façon de changer des trucs à chaque version. Donc la bonne façon de faire c'est de partir sur une base saine en termes de css, FF + chrome, et de gérer les différences d'affichage sous IE par des feuilles de styles conditionnelles.

Dans ton cas c'est particulièrement nécessaire, car tu n'as pas mis de doctype. IE se met donc en "crashmode" et interprète très différemment des autres navigateurs.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.qui-est-le-meilleur ... ator%2F1.2

[spout]

Donc la bonne façon de faire c'est de partir sur une base saine en termes de css, FF + chrome, et de gérer les différences d'affichage sous IE par des feuilles de styles conditionnelles.

+1
Et en général si c'est bien codé en respectant les règles de validation, ça passe tel quel sur IE et les autres.

[Zecat]

Donc la bonne façon de faire c'est de partir sur une base saine en termes de css, FF + chrome, et de gérer les différences d'affichage sous IE par des feuilles de styles conditionnelles.

+1
Et en général si c'est bien codé en respectant les règles de validation, ça passe tel quel sur IE et les autres.

Ben vi mais moi comme j'ai tout appris un peu en vrac et pas dans l'ordre, c'est pas ...

Les règles de quoi

Et dès que j'essaye de coller un doctype, tout par en vrille au niveau des css ... faudra que je règle ca un jour mais pour le moment il s'affiche plutôt correctement sans ... alors ...

[Marie-Aude]

Bon alors

css c'est un langage avec des règles

html aussi
dans html il y a plusieurs "type" html 4.01 (strict ou transitional), "xhtml" (pareil strict ou transitionnal) et html5
ça s'écrit pas exactement pareil, ça ne s'interprête pas pareil (autoclose ou pas, par exemple)

ton doctype sert à indiquer comment ton html doit être interprété
sans doctype, chaque navigateur choisi à sa sauce, ou à celle de l'internaute si il a forcé dans les options

le fait que ce soit en vrille si tu rajoutes un doctype semble prouver que tu as pas mal de problèmes de codage dans tes pages, et il vaudrait mieux les corriger avant d'aller plus loin.

[Tristetaupique]

Le centrage vertical, c'est la tannée. L'alignement vers le bas aussi.

Attention, je vais faire l'iconoclaste : c'est la seule chose que la structure en tableau <td><tr> gère mieux que les feuilles de styles. Aussi... peut il être préférable pour certaines choses de remettre une petite dose de tableaux...