28201 sujets

CSS et mise en forme, CSS3

<a> et background:

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 Smiley decu ! Une idée ?
Kevin a écrit :

Mais rien à faire , il veut pas afficher l'image Smiley 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...
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 .
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

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

Smiley 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]).
Smiley 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 Smiley smile !

Pour en revenir à mon problème, j'ai testé sans le * , ca ne fonctionne pas mieux ........
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.
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) !
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.
Un tag [Résolu] serait bienvenu dans ton sujet si ton problème est réglé.
Modifié le 22 Nov 2004 - 06:14
Sujet clos
Aller à