Discussion :

[Vinzius]

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 :

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
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

[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

[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

[masu]

Pour le probleme de centrage vertical change ton line-height

Code :

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

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

[Vinzius]

Déjà merci de ton aide,

Alors cela n'a pas résolu mon soucis

Donc voici le code mis :

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
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 :

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

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 :/

[masu]

tu definissais deja line-height a normal

change ton normal en 30px

[Vinzius]

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

Merci beaucoup