Jump to content

balise a, classe et id, autour des css


Recommended Posts

'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

Link to post
Share on other 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

Link to post
Share on other 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>

Edited by v4np13
Link to post
Share on other 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é.

Edited by ajpg
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...