balise a, classe et id, autour des css

[xpatval 0]

'Jour,

Je bute sur l'attribution d'une classe css, sur une balise <a>, je m'explique en donnant le code au préalable:

<div id="info">
   <p>
	  <a id="link1" href="#" class="imagefloat" title="blabla."><em></em><span><img class="img" src="xx.jpg" alt="blabla." /></span></a>
		  texte texte texte mot<sup><a class="to" href="#ancre">1</a></sup>.
   </p>
</div>

id="link1" sur la première balise <a> me sert à un mode d'affichage particulier d'une photo. J'ai ainsi plusieurs id (link1, link2...). Fonctionnant très bien, je n'y touche pas. Pour mieux comprendre:

#info a {
display:block; 
width:160px; 
height:120px; 
}
#info a em, #info a span {display:none;}
a:visited#link1 {
display:block; 
width:120px; 
height:160px;
}
a#link1 {
background:#930 url(xx_min.jpg) no-repeat center;
}
a:hover#link1 {
background:#842b00 url(xx_min.jpg) no-repeat center; 
}
a:hover#link1 span {display:block;padding:3px; position:absolute; left:80px; top:200px; width:307px; height:409px; border:1px solid #000;background:#842b00;}
a:hover#link1 em {display:block; position:absolute; margin-left:180px; top:200px; width:0; height:0;}

Par contre, je suis dans la panade pour associer une simple classe à ma deuxième balise <a> (^{<a class="to" href="#ancre">1</a>}).

J'ai essayé ceci:

a.to:link, a.to:visited, a.to:hover, a.to:active {
color:#000;
display:inline;
}

Bien entendu, cette classe n'est pas prise en compte, et je me retrouve avec un lien "bénéficiant" des attributs de l'id="linkx" !!

Comment puis-je oeuvrer afin de n'avoir qu'un lien simple ?

Me suis-je bien fait comprenu ? (je doute... )

xpatval

[ghost 0]

Bonjour,

Pas sûr d'avoir tout compris mais pourquoi pas a sup {....} pour ta 2ém balise?

[xpatval 0]

En résumé très succint, les attributs css de classe d'une balise <a> sont "overridés" par les attributs d'un id d'une balise <a> précédente.

Ces balises <a> sont contenues dans un <div> ayant lui aussi des attributs.

<div id="id_div>
   <p>
	  <a id="id_lien></a> -->> attributs pris en compte
   </p>
   <p>
	  <a class="class_lien"></a> -->> attributs non pris en compte !!
   </p>
</div>

xpatval

[v4np13 0]

Trouvé !!

Un joli problème d'héritage: voici la solution, tout d'abord le CSS:

#id_div a{ color:black;} /*par défaut*/
#id_div a#id_lien{color:green;}
#id_div a.class_lien{color:red;}

Et le HTML:

<div id="id_div">
   <p>
	 <a href="#">par défaut en noir</a>
   </p>
   <p>
	  <a id="id_lien" href="#">id en vert </a>
   </p>
   <p>
	  <a class="class_lien" href="#"> class en rouge </a>
   </p>
</div>

Edited September 6, 2006 by v4np13

[xpatval 0]

Pourquoi as-tu mis si longtemps à me donner la solution ?

Bravo, et merci, ça baigne.

xpatval

[ghost 0]

Re,

Sur le pourquoi de la chose et pour plus d'info : http://openweb.eu.org/articles/cascade_css/

(Merci Mr Laurent Denis)

[ajpg 0]

Un joli problème d'héritage

Bonsoir,

Il ne s'agissait pas d'un problème d'héritage mais de priorité (voir l'article indiqué par ghost).

Un élément A ne pouvant en contenir un autre, l'héritage ne peut être concerné.

Edited September 6, 2006 by ajpg