Changer de bannière dans la div <header> selon les pages

Hello,

j'ai un site dont quasi toutes les pages sont des catégories, pour l'instant la bannière est géré dans une div header dans le css que voici

#header { 
color : #333; 
width : 820px; 
float : left; 
padding : 0px; 
height : 131px; 
margin : 0; 
background-color :#FFF; 
background-image : url(images/header.png); 
background-repeat : no-repeat; 
}

la question : y'a t il un moyen d'assigner à partir du css un header.png différent selon les pages visitées ? sinon, laisser une div blanche et appeler l'image dpeuis l'html ?

merci pour votre aide
Modifié par anatok (14 Jun 2009 - 21:52)

Tu fait une class différente pour la page où tu veux changer le header, tu gardes donc les mêmes propriétés pour tous tes headers, sauf l'image qui change.

j'ai tenté en faisant ça

header.2 { 
background-image : url(images/header_2.png); 
} 

et ça

<div id="header">
<header class="2">
</div>

mais ça passe pas

la balise header n'existe pas voyons !!

Il faut faire :

HTML

<div id="header2">

</div>

CSS

#header2 {background: url(img.png)... }

Enfin voilà quoi, tu crées un id ou une class pour chaque header.

Ok merci pour l'éclairci

Hello,

En passant, un id ou une class ne peut pas commencer par un chiffre :

.2 { 
background-image : url(images/header_2.png); 
} 

Est donc invalide

Si tu souhaites créer une classe supplémentaire pour chaque catégorie pour modifier l'image de fond du header, tu peux procéder de cette façon :

#header.categorietruc {
background: #FFF url(tonimage) no-repeat;
}
#header.categoriemachin {
background: #FFF url(tonautreimage) no-repeat;
}
etc...

Et appeller ta class de cette manière dans le html :

<div id="header" class="categorietruc">
Ton contenu...
</div>

Arthur : Tu perds les déclarations faites sur l'identifiant #header en procédant de cette façon.

Ce n'est pas la seule manière de procéder, mais cela fonctionne

Cdt,
Sylvain

Arthur69 a écrit :
la balise header n'existe pas voyons !!

La balise header n'existe pas, ni en HTML 4, ni en HTML 5. La balise <header> (balise ouvrante de l'élément header) existe en HTML 5 (encore en brouillon), mais je doute que anatok cherchait à faire du HTML 5. La remarque est donc valable.

Une autre raison pour laquelle les essais de anatok ne marchent pas, c'est que "2" est un nom de classe invalide. Une classe doit commencer par une lettre, et ne peut pas commencer par un chiffre. (Edit: grillé.)
Modifié par Florent V. (14 Jun 2009 - 23:07)

Merci de ces précisions^^