xpatval Posté 6 Septembre 2006 Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
ghost Posté 6 Septembre 2006 Partager Posté 6 Septembre 2006 Bonjour, Pas sûr d'avoir tout compris mais pourquoi pas a sup {....} pour ta 2ém balise? Lien vers le commentaire Partager sur d’autres sites More sharing options...
xpatval Posté 6 Septembre 2006 Auteur Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
v4np13 Posté 6 Septembre 2006 Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
xpatval Posté 6 Septembre 2006 Auteur Partager Posté 6 Septembre 2006 Pourquoi as-tu mis si longtemps à me donner la solution ? Bravo, et merci, ça baigne. xpatval Lien vers le commentaire Partager sur d’autres sites More sharing options...
ghost Posté 6 Septembre 2006 Partager 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) Lien vers le commentaire Partager sur d’autres sites More sharing options...
ajpg Posté 6 Septembre 2006 Partager 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant