[resolu] Surcharge classe CSS - propriété background image

Bonjour a tous !

D'abord merci pour votre site très clair, et a tous les membres qui postent grace a qui j'ai trouvé de nombreuses solutions à mes problèmes...

Je me retrouve justement confronté à un problème un peu plus vicieux que d'habitude, et j'ai du mal a savoir quoi chercher pour trouver la solution, je franchis donc le pas de l'inscription et je viens vous poser la question après quelques heures de lecture.


J'ai un menu de naviguation qui comporte une image de fond décorative derrière chaque "titre" du menu. Sur certaines parties du site, c'est toujours la même image, pas de soucis ! Par contre sur d'autres parties du portail, avec un autre design, les titres du menu ont des images de fond différentes, et la j'aimerais garder ma classe générique assez lourde en propriétés (paddings, etc...) et faire une "surcharge" de cette classe pour laquelle je changerais juste la propriété background-image.


Je vous expose déjà la solution de base avec l'image qui ne change pas :


Titre type de menu :

....
<a class="menu_niv0" id="titre0_1" href="...">
titre_niveau_0 n°1</a>...
<a class="menu_niv0" id="titre0_2" href="...">
titre_niveau_0 n°2</a>...
...

CSS correspondant :

.menu_niv0
{
	background-image: url(forme_menu_niv0.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 40px;
	padding-top: 6px;
	padding-left: 12px;
	padding-bottom: 15px;
	margin: 0px;
	display: block;
}

Moi j'aimerais une solution similaire a ce genre de truc (qui ne marche pas bien sûr, c'est une "vision" de l'esprit ) :

<a class="menu_niv0.motif1" id="titre0_1" href="..."> 
titre_niveau_0 n°1</a>...
<a class="menu_niv0.motif2" id="titre0_2" href="..."> 
titre_niveau_0 n°2</a>...
...

et

.menu_niv0
{
	/* background-image: url(forme_menu_niv0.gif); */
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 40px;
	padding-top: 6px;
	padding-left: 12px;
	padding-bottom: 15px;
	margin: 0px;
	display: block;
}

.menu_niv0.motif1
{
background-image: url(forme_menu_niv0_motif1.gif);
}

.menu_niv0.motif2
{
background-image: url(forme_menu_niv0_motif2.gif);
}

.....

Ceci afin déviter de faire plusieurs classes ou 90% des propriétés seront les mêmes et ou seule l'image de fond changera...

Pendant un temps, je me suis servi de l'ID #... pour la surcharge, mais cette solution n'est plus viable, en effet le contenu du menu n'est pas statique du tout... Autrement dit comme vous l'aurez deviné, j'aurais par exemple 4-5 images de fond différentes qui seront appliquées de manière aléatoire (ou plus simplement cyclique) aux titres du menu, qui ne seront pas d'un nombre fixe.

J'espère que vous pouvez m'aidez (soit en me disant comment faire, soit en me disant que ce que je veux faire est impossible et a ce moment la, au diable la propreté du CSS )

Merci a vous !
Modifié par philipPF28 (14 May 2007 - 18:08)

Ce qui est possible :
Mettre plusieurs class à un élément, il suffit de les séparer par un espace (class="menu_niv0 motif1" et pas class="menu_niv0.motif1").

Ce qui n'etspas vraiment possible :

utiliser .menu_niv0.motif1 comme selecteur, car ca ne marche pas sous ie. Donc tu ne pourras pas sélectionner les élements qui font partie de la class A ET de la class B.

Par contre, rien ne t'empeche de définir une class générale avec les propriété de ton menu et des classes particulières pour les images de fond.

.menu_niv0

{

	/* background-image: url(forme_menu_niv0.gif); */

	background-repeat: no-repeat;

	background-position: left bottom;

	padding-right: 40px;

	padding-top: 6px;

	padding-left: 12px;

	padding-bottom: 15px;

	margin: 0px;

	display: block;

}



.motif1

{

background-image: url(forme_menu_niv0_motif1.gif);

}



.motif2

{

background-image: url(forme_menu_niv0_motif2.gif);

}

Modifié par yahrou (14 May 2007 - 18:01)

Ca marche !

C'est pile poil la syntaxe que je cherchais !

Il faut en effet séparer les classes par un espace et non par un point !

Merci encore, manquait pas grand chose pour que ca marche, mais je sens que j'aurais pu chercher longtemps... thx !