Tuto "menu roll-over/css/image unique"... ennuis

Bonjour à tous!

j'ai une petite question sur ce tutoriel: http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Le procédé fonctionne "parfaitement" excepté un certain bémol (qui m'ennuie d'ailleurs beaucoup et dont je ne trouve de solution):

lorsqu'on agrandit la taille des caractères du navigateurs ou lorsqu'on veut faire 2 lignes de texte plutôt qu'une, dans notre menu...

-cela dévoile "la partie roll-over" de l'image en 2 parties...
-le texte n'est plus centré verticalement

J'ai essayé de définir un "height: 0000px;" en plus du "line-height: 0000px;", ce qui aide à ne pas dévoiler l'image roll-over... mais le texte n'est jamais vraiment centré verticalement... Je ne comprends pas pourquoi on ne peut utiliser la propriété: "vertical-align: middle;" pour le centrage vertical alors que "text-align: center;" fonctionne pour le centrage horizontal...

Bref, j'ai besoin de vos lumières, chers professeurs...
Modifié par toluol (05 Jan 2006 - 02:51)

Bonjour,

Pour éviter l'apparition de la partie "roll-over", modifier l'image pour placer les 2 parties l'une à côté de l'autre, adapter le background pour :hover (right top), et ajouter la couleur d'arrière-plan de la partie du bas des images dans les deux propriétés background.

Pour améliorer le rendu en cas d'agrandissement des caractères, remplacer le line-height par un padding: 7px 0 (valeur à ajuster à sa guise), et remplacer éventuellement le text-indent par un text-align: center
Modifié par Laurent Denis (02 Jan 2006 - 04:35)

merci beaucoup...

Oui... j'arrive "presque" à mes fins avec ce procédé...
On arrive presque toujours à être centré verticalement en ajustant le padding...

ça améliore beaucoup le tutoriel. Merci Laurent.

Ah ben zut... non... J'ai un autre problème...

Mon but est de faire un "menu" à quatre images, une en haut à gauche, une en haut à droite, une en bas à gauche et une en bas à droite... Mais je dois mal les placer en CSS car il se trouve que le padding pour centrer mon texte au milieu de ces quatre images me crée un espace entre les 2 images du haut et celle du bas... pffff...

J'avais fait comme cela:

div#images {margin: 15px 0 0 0; width: 430px ; height: 290px ;}
	
div#images A {display: block;
	float: left;
	width: 215px ;
	height: 145px ;
	padding: 70px 0;
	color: #FFF;
	font-family: Arial, Verdana, Helvetica, Sans-Serif;
	font-weight: bold;
	text-align: center;
	text-decoration: none ;}
	
div#images A:hover {color: #202020;}

A.imagesHG{background: url(images/HG.jpg) no-repeat 0 0;}
A.imagesHD{background: url(images/HD.jpg) no-repeat 0 0;}
A.imagesBG{background: url(images/BG.jpg) no-repeat 0 0;}
A.imagesBD{background: url(images/BD.jpg) no-repeat 0 0;}

A:hover.imagesHG {background: url(images/HG.jpg) no-repeat 215px 0;}
A:hover.imagesHD {background: url(images/HD.jpg) no-repeat 215px 0;}
A:hover.imagesBG {background: url(images/BG.jpg) no-repeat 215px 0;}
A:hover.imagesBD {background: url(images/BD.jpg) no-repeat 215px 0;}

<div id="images"> 
<A class="imagesHG">lien 1 sur image 1</A>
<A class="imagesHD">lien 2 sur image 2</A>
<A class="imagesBG">lien 3 sur image 3</A>
<A class="imagesBD">lien 4 sur image 4</A>
</div>

.... en définissant une classe par image cliquable... Mais j'ai un doute sur le float...
Je vous remercie d'avance pour vos réponses.

Je peux illustrer mon problème par ces deux visuels:

Ici, avec un line-height de la hauteur des images
http://www.article.ch/tests/essai1/index.html
Le texte au centre bouge énormément lorsqu'on change la grosseur des caractères...
(Et pas question d'avoir un retour à la ligne dans le texte...)

Et ici avec un padding de la moitié de l'image:
http://www.article.ch/tests/essai2/index.html
(Ici, le texte centré ne bouge presque pas verticalement lorsqu'on augmente la taille des caractères dans le navigateur... Et on peut faire un texte sur deux lignes... Par contre... j'ai un joli espace entre les images du haut et du bas...)

Y aurait-il une solution pour que le padding n'influence pas la position de mes images?

beuuu... et en plus sur IE (En tout cas IE Mac)... Mon texte n'est pas centré sur les images (Il est à gauche...) et les images sont comme bloquées...


bouuuuh ouh ouhhhh


Sur Firefox, c'est centré, mais le roll-over me fait une image blanche... C'est sur Safari que ça fonctionne le mieux... Mais que sont mes erreurs????
Modifié par toluol (06 Jan 2006 - 03:02)

Est-ce que quelqu'un aurait une idée? ...pourrait m'aider?

Ce doit être une question de div et de float mal placé, non?
Modifié par toluol (07 Jan 2006 - 20:48)