Webmaster Hub > balise a, classe et id, autour des css

Version complète: sur le forum Webmaster Hub : balise a, classe et id, autour des css

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

xpatval

mercredi 6 septembre 2006 à 10:57

'Jour,

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

CODE

<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:

CODE

#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:

CODE

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

mercredi 6 septembre 2006 à 12:30

Bonjour,

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

xpatval

mercredi 6 septembre 2006 à 13:40

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.

CODE

<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

mercredi 6 septembre 2006 à 13:57

Trouvé !!

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

CODE

#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:

CODE

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

xpatval

mercredi 6 septembre 2006 à 14:02

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

Bravo, et merci, ça baigne.

xpatval

ghost

mercredi 6 septembre 2006 à 17:37

Re,

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

(Merci Mr Laurent Denis)

ajpg

mercredi 6 septembre 2006 à 19:01

CITATION(v4np13 @ mercredi 6 septembre 2006, 14h57)

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.