[Résolu] Alignement vertical d'une ligne de texte

[ZyriK]

Bonjour à tous,

Je viens à poster ici car je suis vraiment désespéré, au bord du suicide, de la pendaison à l'aide de ma souris sans fil ...

Bref, en gros, j'utilise un menu javascript que j'ai besoin pour un site, et après de long heures de configuration, j'arrive à afficher le menu comme je le souhaite.

Manque de bol, travaillant sur FireFox, je me suis pas rendu compte que sur IE c'est complètement pas la même chose.

Je travaille en local, je ne peux donc pas vous montrer d'exemple concret mais je pense que quelques explications seront suffisantes :

Le menu se compose d'une image en arrière plan et d'un texte dans une surface de 120*107 px. Mon seul problème est que ce texte est au milieu du bloc verticalement sur IE (ce que je ne veux pas) alors qu'il est tout à fait aligné en haut sur FF. Je le règle grâce au "vertical-align: top;" en CSS.

Il y a une classe en CSS pour le texte par défaut (minner), pour lorsque la souris est sur le texte (mover), et lorsqu'elle clique (mover aussi).

Le CSS ressemble à ça :

.minner {
font-size: 11px;
font-family: tahoma, verdana, arial;
border: none;
text-align: center;
vertical-align: top;
color: #FFFFFF;
}

.mouter {
border: none;
color: #FFFFFF;
}

.mover {
border: none;
text-decoration: underline;
color: #FFFFFF;
}

Le truc le plus bizar c'est le texte par défaut est au milieu du bloc, alors que lorsque je passe la souris dessus, il se place au bon endroit ^^ Alors que le code est identique !

Je vous remercie d'avance pour vos réponses :)

[windu.2b]

Par hasard, ça serait pas tout simplement le:

text-align: center;

qui poserait des problèmes?

Parce que si je me souviens bien, IE l'utilise pour centrer horizontalement les blocs dans une page, au lieu de seulement centrer le texte au sein de son bloc (qui est le comportement normal).

[ZyriK]

J'ai eu un petit doute quand même, mais finalement après essai ça ne change rien à part l'alignement horizontal du texte.

[LukeSkyPator]

C'est sur quel composant que tu balances ton vertical-align ? Pcq je sais que ça marche avec un tableau, maintenant, avec un div...

LSP, le manchot perplexe

[Cubic-Design]

vertical align marche si tu as un code du type :

<p><img src="" alt="" />blablabla</p>

Dans ce cas tu peux aligner l'image et le texte verticalement avec vertical-align, tu peux aussi mettre un lien avec...

Dans ton cas tu peux utiliser un méthode peu orthodoxe qui est celle du spacer. C'est à dire un image que l'on ne verra pas qui te permet d'aligner le contenu

Enfin je rapelle juste que c'est

vertcial-align: middle;

et non center

[ZyriK]

vertical-align: middle;

je suis d'accord

mais

text-align: center;

non ?

Le spacer c'est vrai que c'est une bonne idée je n'y avais pas pensé !

Ensuite, pour ce qui est du vertical-align, j'ai essayé plusieurs choses.

J'ai essayé de ramener le contenu d'un tableau vers le haut avec

vertical-align: top;

Succès puisque sous Firefox ca fonctionne, mais sous IE, raté.

Ensuite, j'ai essayé de faire la même chose avec un div, et le résultat est identique.

J'ai uploadé une partie du menu pour que vous voyez correctement ce qui ne vas pas : C'est par ici

Donc ce qu'on voit sous Firefox c'est comme ca doit être, et ce qu'on voit sous IE, vous verrez que c'est pas le top.

Je vous remercie tous pour vos réponses rapides ! :)

[windu.2b]

en effet, avec IE6 le texte se trouve sur le bouton au lieu d'être au-dessus... Pas normal, ça

[ZyriK]

en effet, avec IE6 le texte se trouve sur le bouton au lieu d'être au-dessus... Pas normal, ça

Et avec IE7 aussi ... Mais pourquoi ? POURQUOI ??? Pourquoi tant de haine !

[ZyriK]

Bon bah finalement j'ai trouvé tout seul ^^

Comme mon menu fait 107px de hauteur, j'ai mis :

vertical-align: middle;
padding-bottom: 91px;

En fin de compte mon texte est tout en haut du menu comme voulu, sous IE et sous FF !

C'est un peu contourné mais ca fonctionne.

[Yangzebul]

Heu juste pour info car il me semble que ce n'est pas très clair pour certains :

La propriété CSS "vertical-align" ne fonctionne que pour des éléments inline et permet de faire des alignements en prenant comme point de références les limites des line-blocks (baseline, super, text-top, top, ect).

Celà n'a rien à voir avec l'attribut v-align des tableaux qui permet d'aligner par rapport aux limites d'un block.

Par exemple :

p{ vertical-align : middle; }

N'aura aucun effet et c'est totalement normal, IE ou non.