Texte qui reste tout le temps souligné !! Arrrggg !!!

Bonjour,

Alors voilà, j'ai du XHTML dans ce genre là :

<a href="#" class="vignettes">
<img id="tente" src="images/present_tentes.jpg" alt="Agrandir les tentes" />
<span>
<h3>LES TENTES :</h3>
<p>
Hébergement sous tentes de la mi-mai à fin août.<br />
Capacité d'accueil : 50 lits. Tentes aménagées avec sommiers<br />
et matelas de 4 et 8 personnes, sanitaires à proximité.
</p>
<img src="images/tentes_grande.jpg" alt="Les tentes"/>
</span>
</a>

Et en CSS :

.vignettes span {
display:none;
z-index:50;
}

a.vignettes:hover {
border:0;
}

a.vignettes:hover span {
	display:block;
	position:absolute;
	top:160px;
	left:0px;
}

.vignettes img {
border:0;
}


.vignettes p { /*Formattage du texte d'info des agrandissements*/
	position:absolute;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #FFFFFF;
	left:240px;
	top:34px;
	width: 600px;
	text-decoration:none;
}

.vignettes h3 {
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	left:337px;
	top:10px;
	text-decoration: none;
	width: 500px;
	text-align: right;
}

Le truc bien sur c'est qu'en cliquant sur une vignette, ça affiche le contenu de la balise SPAN qui est masquée et qui comprend une image agrandie, un titre <H3> et un texte <P>.

Dans Internet Explorer et Safari le texte apparaît souligné en bleu (et sous Safari passe en rouge quand on clique dessus) !!
J'ai mis des text.decoration:non un peu partout et j'ai même défini la balise a avec un text-ecoration: none;

Rien à faire, ça reste souligné en bleu !!
Je ne comprends pas pourquoi !!

Si quelqu'un à une idée !!
Merci d'avance.

Bonjour,

Ça vient sans doute du fait que ton code HTML est invalide, et que les navigateurs, ou du moins certains d'entre eux, l'analysent non pas tel qu'il est écrit (car ce qui est écrit n'existe pas en HTML ) mais tels qu'ils arrivent à le recomposer de manière valide.

Donc au final tu as des chances pour que la structure suivante soit utilisée en interne par le navigateur:

<a><span><img ... /></span></a>
<h3><a><span>...</span></a></h3>
<p><a><span>...</span></a></p>
<img ... />

Quelque chose comme ça...

Donc: travailler avec du code valide.
Modifié par Florent V. (29 Sep 2008 - 13:52)

J'ai bien vu donc que j'avais une erreur car j'imbrique des balises <Hx> et <p> dans un <SPAN>.

Mais je ne vois pas comment faire pour rectifier ça et avoir toujours mon texte qui s'affiche en même temps que mon image et formatté et positionné comme je le souhaite !!!

Avez-vous une idée ?

Merci
Modifié par Bjorken (29 Sep 2008 - 15:06)

Bjorken a écrit :
J'ai bien vu donc que j'avais une erreur car j'imbrique des balises <Hx> et <p> dans un <SPAN>.

... et tout ça dans un <a>

L'élément <a> est de type "inline"; il n'accepte aucun élément de type "bloc".