Problème CSS alignement vertical

Version imprimable

Hello :)

Voila, je suis encore moyen en css et j'aurai une question.
Je veux faire des cas de 30 pixels de hauteur avec un lien dedans, et au passage de la souris la case change de couleur.

J'ai donc créé un tableau et dans les <td></td> il y a des <a href=""></a> ou j'insère une classe du genre <a href="" class="menu-titre-noir">Texte</a>

Mais le soucis c'est que le texte dans le lien s'affiche en haut de la case créée :(

Voici le code :
Code:

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 a.menu-titre-noir { vertical-align:middle; text-valign:middle; padding-left:12px; height:30px; border-bottom:1px #ffffff dashed; display:block; background-color: #D7D7D7; text-decoration:none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: capitalize; color: #333333; } a.menu-titre-noir:hover { background-color: #E9E9E9; }
J'ai essayé de placé le style vertical-align dans le <td> mais cela ne marche pas. Une idée de comment régler le problème ou refaire le tout autrement si mieux est ?

Merci :)
Bonne soirée

10/08/2006, 03h42
ferrero

salut
ce que tu vx toi c bien un menu vertical!!

alors je crois que tu peux le faire à l'aide de la balise <a href.......> avec des retours à la ligne <br>

et puis tu appliques le style css de ton choix sur le lien hypertexte
10/08/2006, 09h44
Vinzius

C'est en gros ce qui est fait, mais le texte dans le css du <a href> est centré verticalement en haut au lieu de milieu :(
10/08/2006, 09h55
masu
Pour le probleme de centrage vertical change ton line-height
Code:

1 2 3 4 a.menu-titre-noir { line-height: 30px; [...] }

Déjà merci de ton aide,

Alors cela n'a pas résolu mon soucis :(

Donc voici le code mis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
a.menu-titre-noir {
	vertical-align:middle;
	text-valign:middle;
	line-height:30px;
	padding-left:12px;
	width:160px;
	height:30px;
	border-bottom:1px #ffffff dashed;
	display:block;
	background-color: #D7D7D7;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: capitalize;
	color: #333333;
}

Et niveau code php :

Code:

1
2
3
4
5
6
7
while($voir2 = mysql_fetch_array($requete2))  {
 
		$titre2 = stripslashes($voir2['titre']);
		$url2 = $voir2['url'];
		echo '<a href="'.$url2.'" class="menu-titre-noir">'.$titre2.'</a>';
 
	}

J'ai donc toujours mon texte situé en haut :/

10/08/2006, 10h29
masu

tu definissais deja line-height a normal

change ton normal en 30px
10/08/2006, 10h34
Vinzius

Arf ok, je n'avais pas vu que mon Designer avait mis ca, ca m'est passé sous les yeux :)

Merci beaucoup ;)