Discussion :

[lvr]

Bonjour,

J'avais envie que mes liens soient soulignés d'un pointillé et lorsque la souris passe dessus, cela se transforme en trait plein.
Alors j'ai écrit ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
a[href], P.ExtraLink a[href]  {
	border-bottom-color: Black;
	border-bottom-style: dashed;
	border-bottom-width: thin;
	text-decoration: none;
	color: Black;
}
 
a[href]:hover, P.ExtraLink a[href]:hover {
	border-bottom-color: Black;
	border-bottom-style: solid;
	border-bottom-width: thin;
}

Problème, si mon lien est une image, ce bord pointillée est très moche et je voudrais le virer, mais je n'y arrive pas:

Code :

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

1
2
3
a[href] img, P.ExtraLink a[href]  img, a[href]:hover img, P.ExtraLink a[href]:hover img  {
	border-bottom-style: none;
}

Ceci ne marche pas et je crois comprendre pourquoi: je dis que l'image ne dois pas avoir de bordure, alors que mon style précédent dit que l'élément <a> doit en avoir une. Je formatte donc deux éléments différents.
Faudrait que je puisse dire "Si le <a> contient une image, alors de bord"....

Merci pour vos idées,

[cdgidev]

C'est pas en CSS, mais le seul moyen que je connaisse si ca peut t'aider c'est que mettre border=0 dans l'<img>

[Macmillenium]

Bonsoir,

Tout d'abord je me demande à quoi servent tes sélecteurs d'attributs (a[href]), une balise <a> doit obligatoirement avoir un href.

Voici un petit exemple ou le sélecteur a[href] devient utile :

Code CSS :

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

1
2
 
a[href="developpez.net"] { color:green; }

Seules les balises <a> qui ont developpez.net comme valeur d'attribut href seront en vert

Sachant que cela n'est pas supporté par IE6

Pour ton problème, les styles sont appliquées sur tes <a> et non pas sur les <img>, essai avec 2 classes une pour les liens avec image et une pour les liens sans image.

[GihefBey]

Bonjour,

Oui, tous tes bidouillages semblent un peu alambiqués.

Code css :

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

1
2
3
4
5
6
7
8
9
a, p.ExtraLink a {
  border-bottom: thin dashed #000;
  text-decoration: none;
  color: #000;
  }
 
a:hover, p.ExtraLink a:hover {
  border-bottom: thin solid #000;
  }

serait suffisant.


Mais c'est un peu plus compliqué.
Alors, le plus simple est que tu appliques une classe qui annulera les bordures sur les images.

Code css :

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

.lien_image_sans_bordure { border : none; }

avec

Code html :

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

<a class="lien_image_sans_bordure"><img src="etc. /></a>

-

[lvr]

Merci pour vos commentaires. J'essaye toujours d'éviter les classes de type "présentation" et de ne garder que des classes de type "sémantique". Faut croire que j'exagère un peu

La raison du selecteur a[href] est que j'ai écris des balises dans certaines pages:

Code :

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

<a name="titre1">Le Titre Un</a>

et que si je ne mettais pas le "[href]" dans le sélecteur il le soulignerait aussi. Peut-être est-ce du mauvais html et devrais-je écrire

Code :

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

<a name="titre1"/>Le Titre Un

[Macmillenium]

La raison du selecteur a[href] est que j'ai écris des balises dans certaines pages:

Code :

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

<a name="titre1">Le Titre Un</a>

Le problème vient de ton CSS (essai le code de GihefBey) et puis comme je l'ai dit plus haut, une balise <a> doit obligatoirement avoir un href.

devrais-je écrire

Code :

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

<a name="titre1"/>Le Titre Un

Non, <a> n'est pas une balise naturellement vide (comme <br /> ou <hr />), elle ne peut pas être auto-fermante.