Lien image+texte style différent

Version imprimable

Bonjour tout le monde,
Alors j'ai un tableau avec différents liens composé d'une image et d'un texte en dessous.
J'aimerais que quand je passe la souris dessus, le texte se souligne, mais pas l'image, hors ce que j'ai pour l'instant c'est que les deux se soulignent :calim2:

Voici le code html du tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table width="600" border="0" cellspacing="5" cellpadding="5" align="center" style="font-weight:bold">
  <tr valign="middle" align="center">
    <td valign="middle"><a href="#"><input type="image" src="../media/coquette/png/128x128/mail_receive.png"  /><br />
    Message(s) non lus</a></td>
    <td><a href="#"><input type="image" src="../media/coquette/png/128x128/help.png"  /><br />Gestion de la FAQ</a></td>
    <td><a href="users_gestion.php"><input type="image" src="../media/coquette/png/128x128/users.png"  /><br />Gestion des utilisateurs</a></td>
  </tr>
  <tr valign="middle" align="center">
    <td><a href="#"><input type="image" src="../media/coquette/png/128x128/comments.png"  /><br />Gestion des discussions</a></td>
    <td><a href="cat_gestion.php"><input type="image" src="../media/png/128x128/database.png"  /><br />Gestion des catégories</a></td>
    <td><a href="urgences_gestion.php"><input type="image" src="../media/png/128x128/folder_conflicted.png"  /><br />Gestion des urgences</a></td>
  </tr>
</table>

Et le css, j'ai essayé plein de combinaison en me disant peut être ça peux marché ^^ :

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
28
29
30
31
32
33
34
35
36
37
 
body{
font:Arial, Verdana, Geneva, sans-serif;
}
 
a{
text-decoration:none;
color:#000;
padding-left:5px;
}
 
a img
{
border:medium black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
 
}
a:hover{
text-decoration:underline;
padding-left:5px;
}
 
a:hover img
{
text-decoration:none;
}
 
img:hover
{
	text-decoration:none;
}
input:hover
{
	text-decoration:none;
}

En passant, ma police ne se met pas en arial dans toutes mes pages, un problème dans mon css body ?

Merci d'avance :)

21/08/2009, 23h28
pop_up

Avec le code que tu as, l'image sera forcement soulignée.

Tout d'abord, tu ecris dant ta css "quand la souris passe sur le lien, souligne moi tout le lien."

Du coup, vu que ton input est dans ton lien, il sera forcement souligné.

Donc pour ne pas souligner l'image, il faut que tu la sortes de ta balise <a href=.....></a>

Sinon, a quoi te sert un input alors qu'il n'y a pas de formulaire ?
Si tu veux que ton image soit aussi un lien (enfin... ton input), tu peux ajouter le parametre onclick a ton input de manière a avoir le même lien que la balise <a href=....></a>
24/08/2009, 17h56
Doki95

Salut,

Un petit truc en plus, dans t'es balise a, je te conseil de ne pas mettre un # dans la valeur du href. Utilise plutôt un javascript:void(0);. Ça pourra t'éviter pas mal de problème notamment avec ie6.

Et pour ton problème de police, utilise font-family et non font tout court.
Je me passe d'explication et te fournit un site qui t'en donnera : http://austral.chez-alice.fr/references-css/text.htm

Doki

Code:

1
2
3
a:hover input {
text-decoration: none;
}

27/08/2009, 19h21
MasterChief78

Ok merci à tous pour vos réponses,
Le pourquoi du input : c'est pour avoir la souris qui se transforme en main que je passe dessus :aie:
Damouille merci mais ton code ne fait rien bouger :(

Merci quand même à vous :)
27/08/2009, 20h46
cssman
Euh.... ça, ça s'appelle du détournement de balise ;)

Si c'est juste parce que tu veux un curseur en forme de main, il y a cursor pour ça.
Code:

1 2 3 4 selecteur { cursor:pointer }