xpatval Posté 6 Septembre 2006 Posté 6 Septembre 2006 '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... ) xpatval
ghost Posté 6 Septembre 2006 Posté 6 Septembre 2006 Bonjour, Pas sûr d'avoir tout compris mais pourquoi pas a sup {....} pour ta 2ém balise?
xpatval Posté 6 Septembre 2006 Auteur Posté 6 Septembre 2006 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 Posté 6 Septembre 2006 Posté 6 Septembre 2006 (modifié) 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é 6 Septembre 2006 par v4np13
xpatval Posté 6 Septembre 2006 Auteur Posté 6 Septembre 2006 Pourquoi as-tu mis si longtemps à me donner la solution ? Bravo, et merci, ça baigne. xpatval
ghost Posté 6 Septembre 2006 Posté 6 Septembre 2006 Re, Sur le pourquoi de la chose et pour plus d'info : http://openweb.eu.org/articles/cascade_css/ (Merci Mr Laurent Denis)
ajpg Posté 6 Septembre 2006 Posté 6 Septembre 2006 (modifié) 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é 6 Septembre 2006 par ajpg
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant