Aller au contenu

balise a, classe et id, autour des css


xpatval

Sujets conseillés

'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> (<sup><a class="to" href="#ancre">1</a></sup>).

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... :whistling: )

xpatval

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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>

Modifié par v4np13
Lien vers le commentaire
Partager sur d’autres sites

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

Modifié par ajpg
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...