Discussion :

[MasterChief78]

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

Voici le code html du tableau :

Code :

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

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 :

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

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

[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

[Damouille]

Code :

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

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

[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
Damouille merci mais ton code ne fait rien bouger

Merci quand même à vous

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

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

1
2
3
4
 
selecteur {
cursor:pointer
}