28220 sujets

CSS et mise en forme, CSS3

[Résolu] Un div de différentes couleurs selon les pages

Bonjour,
J'ai un p'tit doute sur ce que je suis en train de faire en CSS, ça marche mais je me demande si y'aurait pas plus simple.

Je m'explique :

J'ai un div sur mes pages de site qui fait une colonne à droite avec un fond de couleur. J'ai besoin que cette colonne change de couleur selon la page du site où l'on se trouve. J'ai donc créé une classe avec juste la definition de la couleur de fond et je l'applique à mon div, ça donne ce qui suit :


// Dans la css commune à tout le site :

#col_droite {
	position: absolute;
	right:0;
	width: 188px;
	color: #FFFFFF;
	margin-top: 30px;
	margin-right: 22px;
}

.coldroite_page1 {
	background-color: #9831A8;
}
.coldroite_page2{
	background-color: #000000;
}

// et ensuite dans mes pages en php :
<?php $page="page1"; ?>

<div id="col_droite" class="coldroite_<?php echo $page; ?>">...</div>


J'espère que c clair. Est-ce que je me suis compliqué la vie pour rien et y-aurait-il moyen de faire ça plus simplement en CSS ?

Merci d'avance à ceux qui voudront bien prendre le temps de lire mon code.
Smiley biggrin
Modifié par Dojoji (26 Mar 2005 - 17:46)
désolé, là je saurais pas t'aider, mais juste pour te dire de patinenter un peu avant d'attendre un réponse Smiley cligne
bon courage pour la suite
Salut, je te conseil plutot d'utiliser javascript, je m'explique:
document.getElementById("col_droite").style.backgroundColor = "red";
Si tu places dans chaque page ce code avec la couleur que tu désires pour ta colonne, je crois que ca pourras marcher.
Si tu utilise Dreamweaver, va dans fenetres>references et prend le dico CSS, en bas de chaque descriptif il y à le code javascript associé.
Modifié par ocb2b (26 Mar 2005 - 10:37)
Merci pour ta réponse.

Mais en fait je préférerais pouvoir piloter l'ensemble des pages du site en n'ayant qu'à modifier la css, sans avoir à repasser dans chaque page, c'est pour ça que j'ai créé des classes, mais je ne sais pas s'il y aurait une syntaxe css qui me permettrait de faire a plus simplement.
Modifié par Dojoji (26 Mar 2005 - 12:35)
C'est peut-etre pas ce que tu recherche mais avec cette technique tu peux tout piloter a partir d'un fichier. Le principe est simple, tu déclare un fichier java.js:
var couleur_page1 = "red";
var couleur_page2 = "blue";
var couleur_page3 = "green";

function change_la_couleur(couleur){
document.getElementById("col_droite").style.backgroundColor = couleur;
}

Dans chaque page tu lie le fichier .js et tu passe en parametre a la fonction la couleur de la page.
page1.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<script src="java.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="col_droite" style="height:100px; width:100px;">
bla bla</div>
<script>
change_la_couleur(couleur_page1)
</script>

</body>
</html>

page2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<script src="java.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="col_droite" style="height:100px; width:100px;">
bla bla</div>
<script>
change_la_couleur(couleur_page2)
</script>

</body>
</html>

page3.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<script src="java.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="col_droite" style="height:100px; width:100px;">
bla bla</div>
<script>
change_la_couleur(couleur_page3)
</script>

</body>
</html>

Voila si tu veux changer les couleurs sans te casser la tete, tu edite le .js et tu change les valeurs des variables. Smiley cligne
Modifié par ocb2b (26 Mar 2005 - 14:56)
Je pense que l'utilisation du php est aussi simple et efficace que le js, mais fonctionne même si le js est désactivé côté client.

Tu aussi peux tout simplement avoir une css générale et une spécifique à chaque page :

<link href=\"./css/general.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"./css/page1.css\" rel=\"stylesheet\" type=\"text/css\" />


Et le tour est joué. (tu peux aussi utiliser le php pour lui passer en paramètre le nom de la feuille anexe)


FoW
Modifié par FoW (26 Mar 2005 - 13:36)
FoW a écrit :


<link href=\"./css/general.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"./css/page1.css\" rel=\"stylesheet\" type=\"text/css\" />


euh... Juste par curiosité...

C'est quoi cette syntaxe avec les « backslash » ?
C'est pour pouvoir enregistrer dans une variable php.
<?php $variable = "<link href=\"./css/general.css\" rel=\"stylesheet\" type=\"text/css\" />";
?>
Comme cela les " ne sont pas interprétés.
Dsl si je répond à la place des autres. Smiley confuse
Modifié par ocb2b (26 Mar 2005 - 14:58)
Tu as bien fait de répondre à ma place vu que la réponse est juste!

Mes pages sont intégralement incluse dans des scripts en php, c'est beaucoup plus facile, tu inclus ton header, ton menu, ton contenu, ...
Merci de parler CSS dans le salon CSS Smiley cligne

Pas plus simple comme ça ?

<html>

 <head>
  <title></title>
 </head>

 <body id="rouge">
  <div id="col_droite"></div>
 </body>

</html>



#rouge #col_droite {
   background-color: red;
}

En fait, chaque page que je juge importante possède un <body id="">

<body id="home">
<body id="map">
<body id="infos">
<body id="links">

Ça me permet beaucoup plus de contrôle via CSS.

Exemple :

#infos #content p {
   /* agira seulement sur les paragraphes du contenu de la page infos */
}

Modifié par Stephan (26 Mar 2005 - 14:55)
@ocb2b

Est-ce que tu peux corriger ton HTML parce que tu as placé ton code entre le head et le body Smiley biggol ?
Modifié par Stephan (26 Mar 2005 - 14:25)
lol j'avais pas fait gaffe que le code était dans le head. Smiley sweatdrop
Je corrige ca tout de suite.
En ce qui concerne le javascript, j'essairai de trouver des solutions pure CSS à l'avenir dsl.
Modifié par ocb2b (26 Mar 2005 - 14:59)
Stephan a écrit :

Pas plus simple comme ça ?

<html>

 <head>
  <title></title>
 </head>

 <body id="rouge">
  <div id="col_droite"></div>
 </body>

</html>



#rouge #col_droite {
   background-color: red;
}



Alors là merci beaucoup Stephan !!!
Tellement simple, ça crevait les yeux, enfin bon comme c'est ma première mise en page en css... !!! Smiley sweatdrop
C'est exactement ce que je cherchais, merci encore Smiley biggrin
Sujet clos
Aller à