[Résolu] Gérer les exceptions en CSS ?

Bonjour à tous,

J'ai fait plusieurs recherches sur le forum pour trouver une solution à mon "problème" mais j'ai du mal à formuler ma requête.

Pour gérer tous mes liens, j'utilise :

#centre a, #pied a {
	color: #232aa3;
	font-weight: bold;
	border-bottom: 1px dotted #232aa3;
	text-decoration: none;
}

#centre a:hover, #pied a:hover {
	color: #232aa3;
	font-weight: bold;
	border-bottom: 1px dotted #FFFFFF;
	border: none;
}

Ainsi, tous les liens qui sont dans mes div "centre" et "pied" ont cette forme. Comment je dois faire pour créer une exception pour mes images ? Je voudrais que celles contenues dans "centre" n'aient aucune bordure. Je tourne en rond là ...

Merci d'avance à tous.

uado.
Modifié par uado (02 Mar 2007 - 16:21)

Salut et bienvenue sur Alsacréations,

uado a écrit :
Comment je dois faire pour créer une exception pour mes images ? Je voudrais que celles contenues dans "centre" n'aient aucune bordure. Je tourne en rond là ...

tout simplement par ceci :

a img {
border-style:none
}

Voilà

Salut touvert,

J'avais déjà pensé à mettre ça, mais ça ne fonctionne toujours pas. Je mets le code source généré, au cas où ...

<div id="centre" style="min-height: 546px;">

	<h1>Toooooto</h1>
	<table border="0" width="100%" cellspacing="5">
		<tr>
			<td width="33%" class="td-miniature-photo">
				<a href="./images/diaporamas/1.jpg" rel="lightbox" title="Première photo">
					<img src="./images/diaporamas/1_vignette.jpg" alt="Première photo" />
				</a>
				<br />
				Première photo
			</td>
			<td width="33%" class="td-miniature-photo">
				<a href="./images/diaporamas/2.jpg" rel="lightbox" title="Deuuuuuuxième vignette">
					<img src="./images/diaporamas/2_vignette.jpg" alt="Deuuuuuuxième vignette" />
				</a>
				<br />
				Deuuuuuuxième vignette
			</td>
			<td width="33%" class="td-miniature-photo">
				<a href="./images/diaporamas/3.jpg" rel="lightbox" title="Equipe 1">
					<img src="./images/diaporamas/3_vignette.jpg" alt="Equipe 1" />
				</a>
				<br />
				Equipe 1
			</td>
		</tr>
	</table>
</div>

Et la partie de la CSS :

a img {
	border: none;
}

#centre a, #pied a {
	color: #232aa3;
	font-weight: bold;
	border-bottom: 1px dotted #232aa3;
	text-decoration: none;
}

#centre a:hover, #pied a:hover {
	color: #232aa3;
	font-weight: bold;
	border-bottom: 1px dotted #FFFFFF;
	border: none;
}

Impossible de faire sauter cette foutue ligne pointillée sous l'image ...
Voilà ce que ça donne actuellement :

http://img444.imageshack.us/img444/3684/toooootoeg5.gif

Si quelqu'un a un éclair de génie ...
Merci.

Bonjour uado,

La solution donnée par touvert est pourtant la bonne. Avec un ciblage adéquat de type div#centre a img, cela devrait passer.

C'est un problème de priorité des sélecteurs CSS. #centre a a une priorité (0101) supérieure à celle de a img (0002).

Donc, pour éviter ce genre de désagrément :

#centre a img {border: none;}

Edit : grillé.
Modifié par Florent V. (02 Mar 2007 - 10:12)

Le border est défini pour le <a>. On peut donc pas le supprimer en s'adressant au <img>.

Dès lors, une solution serait de créer une class qu'on attribue manuellement à tous les <a> qui contiennent une <img>.

Ca donnerait:

#centre a.linkImg, #pied a.linkImg {
	border: none;
}

et dans l'html:

<a class="linkImg" href="..."><img ... /></a>

Une autre solution serait de pouvoir s'adresser directement en CSS à tous les <a> parents d'une <img>. Mais je sais pas si c'est possible.

Bonjour,

Préférer autant que possible text-decoration à border (text -decoration, bien qu'imparfaitement implémenté à l'heure actuelle, ne souligne pas les images, et sera plus robuste...)
Modifié par Laurent Denis (02 Mar 2007 - 14:42)

Oui mais... peut-on contrôler un text-decoration de la même façon qu'un border? (taille, style, couleur)

Dans le cas présent par exemple, est-il possible de faire un soulignement "dotted" ?

Humpf.

Question, comme ça, au hasard: vous attachez une importance primordiale à vos pointillés dans IE 6.0 Windows, ou vous êtes plutôt moderne ?

<non, mais, parce si on s'arrête à des détails de cet ordre au détriment du bien-fondé de la chose, évidemment, tout de suite, il faut bricoler ... />
Modifié par Laurent Denis (02 Mar 2007 - 15:48)

Bonjour à tous,

Merci pour toutes ces réponses.

Florent V. & Benjamin D.C. :
J'ai essayé votre solution, mais cela n'a pas fonctionné, le bordure était toujours présente.

<nicolas> :
Ta solution a fonctionné, merci. J'ai juste eu à ajouter un 'border="0"' sur mon img et c'est bon.

Laurent Denis :
Comme le précise <nicolas>, j'utilise border-bottom pour "styler" un peu mon soulignement. Le jour où le text-decoration sera paramétrable, je prends !

Merci à tous en tout cas.

uado.
Modifié par uado (05 Jul 2007 - 11:39)