xpatval 0 Posted September 6, 2006 Share Posted September 6, 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 Link to post Share on other sites
ghost 0 Posted September 6, 2006 Share Posted September 6, 2006 Bonjour, Pas sûr d'avoir tout compris mais pourquoi pas a sup {....} pour ta 2ém balise? Link to post Share on other sites
xpatval 0 Posted September 6, 2006 Author Share Posted September 6, 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 Link to post Share on other sites
v4np13 0 Posted September 6, 2006 Share Posted September 6, 2006 (edited) 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 Link to post Share on other sites
xpatval 0 Posted September 6, 2006 Author Share Posted September 6, 2006 Pourquoi as-tu mis si longtemps à me donner la solution ? Bravo, et merci, ça baigne. xpatval Link to post Share on other sites
ghost 0 Posted September 6, 2006 Share Posted September 6, 2006 Re, Sur le pourquoi de la chose et pour plus d'info : http://openweb.eu.org/articles/cascade_css/ (Merci Mr Laurent Denis) Link to post Share on other sites
ajpg 0 Posted September 6, 2006 Share Posted September 6, 2006 (edited) 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 Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now