Suivez le fil RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» <a> et background:
Auteur
Kevin
# 18 Nov 2004 - 10:43:50
Citer
<PlopMaster />
239 Posts
 Dans le cadre de la création d'une skin pour DotClear , j'ai entrepris d'utiliser des images pour les liens du "prelude" dont voici la structure : 


 <p id="prelude"><a href="#main">Aller au contenu</a> | <a href="#sidebar">Aller au menu</a> | <a href="#search">Aller &agrave; la recherche</a></p>


Je voudrais que le texte ne soit pas affiché par défaut, et mettre une image à la place, donc, j'ai fait ceci : 


a[href*='#main'] {

background:url('images/b_contenu.gif');

}


Mais rien à faire , il veut pas afficher l'image decu ! Une idée ?
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Stephan
# 18 Nov 2004 - 10:50:38
Citer
3160 Posts
Kevin a écrit :

Mais rien à faire , il veut pas afficher l'image decu ! Une idée ?


il ?

Si tu parles de IE, tu peux essayer le background sans les apostrophes : 


a[href*='#main'] {

background:url(images/b_contenu.gif);

}


Sinon plus d'infos ne pourrait pas nuire...
^
Kevin
# 18 Nov 2004 - 10:55:17
Citer
<PlopMaster />
239 Posts
 Nan, IE, j'ai pas encore testé, j'l'ai pas à portée de main là ... Je parlais de Firefox, enfin, n'importe quel navigateur à priori ...

Donc, pour plus d'infos, beeeeeen, j'ai mis en ligne ici .
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Kevin
# 18 Nov 2004 - 11:33:00
Citer
<PlopMaster />
239 Posts
 J'ai testé en enlevant les apostrophes, ca ne marche pas mieux ...
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Raphael
# 18 Nov 2004 - 12:36:55
Citer
twitter.com/goetter
Administrateur
11636 Posts
 Humm puisque tu me l'as demandé, je vais essayer de répondre même si je n'ai pas lu les specs à ce sujet.

a[href*='#main'] {

background:url('images/b_contenu.gif');

}

je connais :
sélecteur[attibut='valeur'] mais pas sélecteur[attibut*='valeur']

Donc le problème vient peut-être de là.

Pour info, ça ne marchera dans aucun cas sur IE

Voici de la doc :
http://www.yoyodesign.org/doc/w3c/css2/selector.html#attribute-selectors
Le saviez-vous ? Alsacréations propose dorénavant des formations web (XHTML/CSS, accessibilité, Flash, jQuery).
http://www.goetter.fr 
^
Kevin
# 18 Nov 2004 - 12:41:52
Citer
<PlopMaster />
239 Posts
 Ca ne marche pas mieux avec : 
selecteur[attribut='valeur']


Pour information, le 
selecteur[attribut*='valeur']

signifie "contient la valeur" , donc pas forcément la valeur exacte, mais une partie de la valeur !

Est-ce que tu vois une autre facon de déterminer les 3 liens à part en utilisant cette technique ?
En utilisant 


#prelude a { }

#prelude a + a { }

etc

??
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Raphael
# 18 Nov 2004 - 12:46:23
Citer
twitter.com/goetter
Administrateur
11636 Posts
Kevin a écrit :

Pour information, le 
selecteur[attribut*='valeur']

signifie "contient la valeur" , donc pas forcément la valeur exacte, mais une partie de la valeur !

Où as-tu trouvé ça ?
Je ne vois que ça dans la doc :
Doc CSS2 a écrit :
Les sélecteurs d'attribut peuvent trouver une correspondance de quatre façons :

att
Quand un élément a un attribut "att", quelle que soit sa valeur ;
[att=val]
Quand un élément a un attribut "att" dont la valeur est exactement "val" ;
[att~=val]
Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des blancs, une des valeurs est exactement "val". Avec ce sélecteur, les valeurs de la liste ne doivent pas contenir de blancs (car ceux-ci font déjà office de séparateurs) ;
[att|=val]
Quand un élément avec un attribut "att" qui admet comme valeur une suite de valeurs séparées par des tirets, la première valeur est "val". La correspondance intervient toujours au début de la valeur de l'attribut. Ceci, principalement, pour permettre une correspondance sur les sous-codes des langues qui sont décrits dans RFC 1766 ([RFC1766]).

Le saviez-vous ? Alsacréations propose dorénavant des formations web (XHTML/CSS, accessibilité, Flash, jQuery).
http://www.goetter.fr 
^
Kevin
# 18 Nov 2004 - 12:54:26
Citer
<PlopMaster />
239 Posts
 confused je ne sais plus où j'avais vu ca, je ferais des recherches ... Il me semble que c'est sur un site concernant Mozilla, car en fait, je me sers de cette technique en particulier dans la personnalisation de mon userContent.css de Firefox ... (feuille de style perso), avec des choses de ce genre : 


IFRAME[src*='rad.msn.com'] { display:none; }

Donc ca n'affiche pas toutes les iframes contenant ca (comme les pubs d'Hotmail par exemple) ... sauf qu'en réalité, les iframes d'Hotmail sont sous cette forme : 


<iframe src="http://rad.msn.com/ADSAdClient31.dll?GetAd?PG=HOTJ10?TF=_NEW?AP=1390?SC=LG?HM=045d47425b5f585a471c5744521c1403496e7b51102852155d4b13595e5e54530b61044f6c7a?LOC=I?ID=00016170A0B6829B?UC=127">

Avec donc l'adresse générée dynamiquement ... Grace au *= , ca bloque tout ca smile !

Pour en revenir à mon problème, j'ai testé sans le * , ca ne fonctionne pas mieux ........
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Olivier
# 18 Nov 2004 - 14:02:34
Citer
5827 Posts
 Bah la solution la plus facile à mettre en oeuvre c'est d'utiliser un span et de cacher le texte du span.

Au final avec une structure de ce type ça fonctionne impec :


<ul id="menu">

  <li><a href="pwetpwet" id="lien_pwet"><span>item1</span></a></li>

  <li><a href="truc" id="lien_truc"><span>item2</span></a></li>

  <li><a href="machin" id="lien_machin"><span>item3</span></a></li>

  <li><a href="zeuurk" id="lien_zeuurk"><span>item4</span></a></li>

</ul>

Et pour les CSS (juste pour le cachage du texte et l'affichage de l'image)


ul#menu li a span

{

  position: absolute ;

  clip: rect(1px 1px 1px 1px) ;

  clip: rect(1px, 1px, 1px, 1px) ;

}

/* voir  http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image  pour plus d'explications */



ul#menu li a

{

  display: block ;

  width: XXpx ;

  height: YYpx ;

}



a#lien_pwet { background: url(image_pwet.png) no-repeat ;

a#lien_truc { background: url(image_truc.png) no-repeat ;

a#lien_machin { background: url(image_machin.png) no-repeat ;

a#lien_zeuurk { background: url(image_zeuurk.png) no-repeat ;


Voilà ça doit fonctionner comme ça.
La FAQ répond aux questions fréquemment posées. Vérifiez qu'elle ne contient pas une réponse à votre problème.
^
Kevin
# 18 Nov 2004 - 14:04:51
Citer
<PlopMaster />
239 Posts
 Le problème, c'est que ... Pour faire ma skin, je suis censé ne toucher qu'à la CSS ! Parce qu'en ajoutant des balises, je peux y arriver, c'est sûr, mais si possible, j'aimerais ne pas toucher à la structure XHTML (je le rappelle, c'est pour une skin DotClear) !
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Olivier
# 18 Nov 2004 - 14:09:44
Citer
5827 Posts
 Bah tu peux modifier le template de DC pour un skinnage, tu as un fichier template dans le thème par défaut sur lequel le site est basé si j'ai bonne mémoire, tu ajoutes ce qu'il faut dedans et ça roule.

Sinon je vois pas comment tu peux faire pour distinguer tes différents titres, il faut bien avoir un id sur chaque item de toute façon pour afficher l'image qui va avec, donc un span en passant et ça roule.

Une autre solution un peu de racro mais qui marche (pt de vue accessibilité sur certais navigateur, je peux pas dire, mais je pense que c'est moyen, enfin j'en sais trop rien). Tu met height: 0 ; à ton texte, et une couleur de texte correspondant grosso modo au fond (parceque sous IE t'auras pas 0 de hauteur mais 1px ou 1pt je sais plus), et tu met les images comme il faut.
Par contre, si le texte est redimenssioné, ça tombe à l'eau.
La FAQ répond aux questions fréquemment posées. Vérifiez qu'elle ne contient pas une réponse à votre problème.
^
Kevin
# 18 Nov 2004 - 14:20:52
Citer
<PlopMaster />
239 Posts
 Ok, bha j'vais plutot opter pour une modif' de la structure alors ...

Merci bien ^^ !
Kévin DESCOUBES kevindescoubes[@]gmail[.]com
http://kevin.descoubes.free.fr/kisscoolblog/ msn 
^
Stephan
# 22 Nov 2004 - 06:13:51
Citer
3160 Posts
 Un tag [Résolu] serait bienvenu dans ton sujet si ton problème est réglé.
Modifié le 22 Nov 2004 - 06:14
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.7 beta in 29.5 ms © dew