28220 sujets

CSS et mise en forme, CSS3

Problème Background-image

Bonjour,
J'ai un petit souci :

J'ai un menu avec une image de fond pour chaque option et je souhaite la changer lorsque celle-ci est active. J'ai donc une feuille de style qui contient :

#menu_gauche li {
background-image: url('images/fond-option-menu.gif');
background-repeat: no-repeat;
margin-top: 5px;
padding-left: 3px;
font-weight: normal;
}
et
#actifass {
background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0;
}

Dans mon code, lorsque j'essaye de changer l'image de fond, cela ne fonctionne pas :

<div id="menu_gauche">
<ul>
<li id="actifass">Option 1</li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
...
</ul>
</div>

Je n'ai réussi à faire apparaître la nouvelle image qu'en utilisant <li style="background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0;">

Merci pour votre aide.
déjà je te conseille d'éviter les ID pour les LI, etc...

ensuite, dans #actifass, remplace :
background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0;

par
background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0 !important;


cela permet de forcer à changer la composante car autrement c'est la valeur d'origine qui est pris en compte.

Le fait de mettre le background dans le code HTML en ligne fait qu'il est pris en priorité. Cela est marqué dans manuels sur le CSS concernant les priorités.
Modifié par anthony (23 Feb 2005 - 11:11)
Merci pour cette réponse rapide.
Ca fonctionne nickel.
Que vaut il mieux employer ? "class=" ?

J'ai un autre souci maintenant :
Pour mieux voir l'option, je met du blanc en gras :
#actifass {
background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0 !important;
color: #FFFFFF;
font-weight: bold;
}

Le gras ne fonctionne pas...
Le fait de rajouter !important; impose le naviguateur à le prendre en compte en priorité.

Et oui, il vaut mieux employer les class="" car les ID vont mieux avec les blocs conteneurs plutôt que les LI, les A, etc...
Modifié par anthony (23 Feb 2005 - 11:04)
anthony a écrit :
Le fait de rajouter !important; impose le naviguateur à le prendre en compte en priorité.


!important, c'est un peu l'artillerie lourde, dans ce cas. Avec le fait qu'une règle auteur !important l'emporte sur une règle user normale (mais pas sur une règle user !important)...

Une solution plus élégante consiste à acrroître simplement la spécificité du sélecteur, avec par exemple:


#menu_gauche li#actifass {
background: url(images/OptionMenuActifRouge.gif) no-repeat 0 0;
}


a écrit :

Et oui, il vaut mieux employer les class="" car les ID vont mieux avec les blocs conteneurs plutôt que les LI, les A, etc...


???
Un id s'applique à n'importe quel élément, dès lors qu'il est unique dans le document. Le fait qu'un élément soit un conteneur ou non n'a aucun rapport.
Laurent Denis a écrit :
???
Un id s'applique à n'importe quel élément, dès lors qu'il est unique dans le document. Le fait qu'un élément soit un conteneur ou non n'a aucun rapport.

ouais, je pensais juste dans le cas ou le background qu'il veut appliquer ne va pas forcément concerner qu'un seul LI Smiley lol dans ce cas, il faut utiliser CLASS.
Hum... Pas si ordonné que cela, en fait, puisque je ne retrouve plus l'url de la traduction intégrale de l'article, pourtant faite depuis par je ne sais plus qui je ne sais plus où... Smiley decu

Quelqu'un aurait meilleure mémoire que moi ?
( EDIT par Raphael : Double post. Je supprime.

Merci d'ouvrir un nouveau sujet pour vos questions plutot que de s'incruster et de complexifier un sujet d'un autre membre. )
Modifié par Raphael (02 Mar 2005 - 16:10)
Sujet clos
Aller à