28172 sujets

CSS et mise en forme, CSS3

Même nom de classe mais affichage différent selon le contexte

Bonjour, avant tout je m'excuse de ne pas avoir trouvé de titre plus explicite Smiley cligne .

Ma page est constituée d'un header (grand bandeau horizontal en haut de la page sur toute la largeur), et d'une partie contenu.

<div class="header orange/bleu/jaune">
	<a href="index.php"><img class="logo" src="style/images/logo.png" /></a>
</div>

<div class="contenu">
	<h1 class="orange">Titre</h1>
	<p>Blablabla</p>
</div>


.header{
	height: 125px;
	background: url(images/liner-orange.jpg) top left repeat-x;
}

.orange{background-image: url(images/liner-orange.jpg);}
.jaune{background-image: url(images/liner-jaune.jpg);}
.bleu{background-image: url(images/liner-bleu.jpg);}
.rose{background-image: url(images/liner-rose.jpg);}


La couleur du header varie selon les pages (orange, bleu, jaune...). J'aimerais ainsi attribuer à mes titres h1 la classe .orange, .jaune... pour que les titres soient en accord avec le header.

Seulement si j'écris <h1 class="orange">, il va reprendre les attributs (background orange).

Ce que je voudrais faire c'est deux classes du même nom (orange), mais qui se comportent différemment (attributs différents) selon que l'élément AIT aussi la classe header ou pas.

Merci
Modifié par Galdon (25 Feb 2010 - 09:42)
Salut,

plusieurs remarques :
* lorsqu'une classe n'est utilisée qu'une seule fois dans un document (je suppose que c'est le cas de .header et de .contenu) il est plus rigoureux d'utiliser un id : lire Quelle est la différence entre une classe et un id ?
* plutôt que de rajouter une classe (par exemple orange) à tous les éléments il serait plus logique de l'affecter à toute la page donc par exemple à l'élément BODY (et du coup cela aussi devrait être un id) :
<body id="orange">

* ensuite c'est tout simple de faire les déclarations CSS :
#orange #header {
	background: #f90;
}

#orange h1 {
	color: #f90;
}
Ok, merci pour tes conseils.

En fait ta solution c'est de l'encapsulation (je connaissais déjà), et en utilisant body pour encapsuler, ça évite de recréer une classe d'encapsulation en plus et donc d'alourdir le code HTML.

Je pensais qu'on pouvait ajouter des contraintes (par exemple on peut définir un style uniquement pour les input de type text). D'ailleurs je ne connais pas bien les possibilités "avancées" de CSS 2.

On peut affecter plusieurs classes à un element :
<div class="classe1 classe2 classe3"></div>

On peut définir une hiérarchie (encapsulation) :
#content strong{}
#content .astuce strong{}

On peut utiliser des sortes d'événements :
#content a:hover{}

Et aussi faire varier le style selon certains paramètres :
#content form input[type=text]{}

Qu'est ce qu'on peut faire d'autre dans le genre ?
Sujet clos
Aller à