Discussion :

[pierrot10]

Bonjour,
Je me casse la tete depuis plus de 2 heures....
J'aimerai pouvoir parametrer mon CSS pour que lorsque mon <li> ne contien pas de liens, il affiche l'image "zoom_no.gif" et si il contient un lien, l'image de fond a une autre image (zoom.gif).

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul>
<li>pas de lien(avec l'image de fond"zoom_no.gif"</li>
<li><a href="#">line avec l'image de fond "zoom.gif"</li>
</ul>

J'ai essayé des millier de solutions sans tomber sur la bonne. Ci-desous c'était l'une de mes première idée. Que corrigeriez-vous?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#body #content #content-row-2-left li{
	background-image:url(../img/zoom_no.gif);  
	background-repeat:no-repeat; 
	background-position:left middle;
	line-height:12px;
	padding-left:18px;
 
 }

Quand je paramettre comme ci-dessous, l'imahe "zoom.gif" se place a coté de "zoom_no.gif" alors qu'elle devrait remplacer cette dernière.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
#body #content #content-row-2-left li:link,#body #content #content-row-2-left li:visited,#body #content #content-row-2-left li:active{
	background-image:url(../img/zoom.gif);  
	background-repeat:no-repeat; 
	background-position:left middle;
	line-height:12px;
	padding-left:18px;
 }

Comment pouuriez-vous m'aider?? Merci

[Bisûnûrs]

Essaie comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#content-row-2-left li{
   background-image:url(../img/zoom_no.gif);  
   background-repeat:no-repeat; 
   background-position:left middle;
   line-height:12px;
   padding-left:18px;
}
#content-row-2-left li a{
   background-image:url(../img/zoom.gif);  
   background-repeat:no-repeat; 
   background-position:left middle;
   line-height:12px;
   padding-left:18px;
}

[Candygirl]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#body #content #content-row-2-left li{
	background-position:left middle;
 }

Un petit détail:
La valeur middle n'est pas reconnue pour la propriété background-position; c'est la valeur center qu'il faut utiliser.

[pierrot10]

merci pour vo réponse, mais malheureusement ca change rien.

J'ai remplacé le middel, par le center, j'ai également fait la correction que ma recommendé Bisunurs, mais j'ai toujours l'image "zoom_no.gij" pour les <li> dont le texte n'est pas un lien, et j'ai l'image "zoom.gif" qui s'joute à la pécédente image, aux texte qui sont des liens

[Candygirl]

C'est à cause du padding-left sur le li qu'il faut virer, il me semble, autrement il est clair que ton image du a ne peut pas recouvrir celle du li; je n'avais pas fait attention

[MasterOfChakhaL]

salut,

En css il n'existe pas de sélecteur ascendant...

C'est-à-dire que si tu peux modifier l'affichage d'un élément en fonction de ses parents:

#menu ul li => (un li qui soit dans un ul qui soit dans un élément dont l'id est "menu")

tu ne peux pas sélectionner un élément en fonction de ce qu'il contient

Il faut donc, je pense que tu changes ton fusil d'épaule.
Tu peux mettre ton image de fond sur le le lien. Les items de liste qui n'ont pas de lien auront un span par exemple...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#content-row-2-left li span { background-image: url(../img/zoom_no.gif);}
#content-row-2-left li a { background-image: url(../img/zoom.gif);}
 
#content-row-2-left li span, #content-row-2-left li a {
   /*les propriétés communes*/
}

[pierrot10]

merci pour ta réponse detailée. je vais donc changer de stratégie.
merci pour les conseil

[pierrot10]

la complication c'est que j'utilise a CMS (Typo3) et quand depuis le htmlarea (RTE) je crée donc mon <li>, il ne me mets pas de <span>
exemple:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul>
<li>texte sans [<span>]</li>
<li><a href="#">lien</a>
</ul>

[pierrot10]

Ceci dit, si j'ajoute un span manuellement, ben ta proposition fonctionne bien, mais je dois trouver unealternative pour qu'une secréraire n'aye pas a touché le code telqu'ajouter la balise <span>, chose qu'elle n'aurait meme pas idée de ce que c'est....

[MasterOfChakhaL]

J'imagine que si tu peux intégrer des liens, il doit y avoir moyen d'intégrer d'autres éléments...

Peut-être une solution en allant voir du côté du nouveau forum CMS

P'tet que le sujet est résolu pour la partie qui nous concerne ici??

[pierrot10]

oui tout a fait, merci

[Candygirl]

En fait, tout dépend de savoir s'il y a une image, à l'origine, sur le a ou non. Si ce n'est pas le cas il me semble que la solution de bisûnûrs est pertinente (en enlevant le padding du li) dans le sens où l'image sur le a viendra par-dessus celle du li (à voir après si les images n'ont pas la même taille, jouer sur une couleur de fond,...). Le seule truc c'est que l'image sera aussi cliquable.

Par contre, il est clair que s'il y a une image de fond sur le a en plus de celle du li, il va falloir recourir aux moyens proposés par MasterOfChakhal.