Utilisation de plusieurs feuilles de style

Bonjour,

Je rencontre un petit problème de conception, j'espère que quelqu'un pourra m'en dire plus !

Je réalise un site dans lequel chaque page possède un fond d'écran unique, fond qui est déclaré dans un identificateur commun à chaque page, je m'explique :

J'utilise un style "global" pour toutes les pages du site, dans ce dernier, j'ai déclaré un identificateur dénommé "page", commun à toutes les pages du site, il définit entre autres la largeur du bloc principal, ainsi qu'un fond d'écran.

Seul problème : ce fond d'écran doit varier d'une page à l'autre. J'ai pensé aux solutions suivantes :

Ajouter une seconde feuille de style dans chaque page, en redéfinissant l'identificateur "page", et en lui indiquant précisément un autre fond d'écran (background : url(...)), cette solution semble fonctionner, mais une feuille de style supplémentaire pour chaque page me semble pas optimal...

Une autre possibilité serait de redéfinir le fond d'écran directement en ligne dans l'XHTML (<div style="background: url(...);" id="page">) mais c'est totalement contraire à la déontologie de l'XHTML / CSS !...

Troisième "solution", beaucoup trop lourde, consiterait à définir un identificateur "page_" unique pour chaque page, exemple : "id = "page_1" pour la page d'acceuil", "page_2", pour la suivante, ... en redéfinissant à chaque fois la largeur du bloc, et le fond d'écran spécifique. Loin de moi cette idée .

...Je souhaiterais trouver une solution élégante (autre que la première évoquée) pour résoudre le problème. Le tout sans avoir recourt à un langage dynamqiue tel que PHP...

En esperant que quelq'un pourra m'aider,
merci d'avance !
Modifié par Neutron (14 Nov 2005 - 19:33)

Bonjour,

a écrit :
Une autre possibilité serait de redéfinir le fond d'écran directement en ligne dans l'XHTML (<div style="background: url(...);" id="page">) mais c'est totalement contraire à la déontologie de l'XHTML / CSS !...

Il n'y à rien de contraire à la déontologie (bien que je ne savais pas qu'il existait une déontologie ) dans cette pratique.

Mais, comme de toute manière il va te falloir entretenir une propriété de style différente pour chaque page, autant le faire dans le fichier CSS, la dimension par l'id et le fond par autant de classe que nécessaire.

Jean-pierre

La solution la plus accessible reste à mon avis celle de créer une feuille de style supplémentaire dans laquelle tu définirais les éléments souhaités.
(en l'ocurrence l'image de fond et la largeur de ton bloc principal.)
L'autre feuille de style contiendrait les éléments communs à toutes les pages.
Je suppose que cela doit etre négligeable en terme de pertes de perfs, et cela reste simple.

Je ne sais pas comment tu comptais redéfinir le style.dynamiquement suivant la page, mais si tu devais utiliser du javascript, cela te prive des visiteurs ne supportant pas le js.

jpv a écrit :
Bonjour,

Il n'y à rien de contraire à la déontologie (bien que je ne savais pas qu'il existait une déontologie ) dans cette pratique.

Mais, comme de toute manière il va te falloir entretenir une propriété de style différente pour chaque page, autant le faire dans le fichier CSS, la dimension par l'id et le fond par autant de classe que nécessaire.

Jean-pierre

Bonsoir,

Enfaite, j'entends par "déontologie XHTML / CSS" le fait de séparer distinctement le contenu du contenant, c'est à dire, ne laisser aucun élément en rapport avec la mise en page ou l'aspect graphique (exception faite des tableaux, pour des infos volontairement structurées) dans le code XHTML (Strict). Je n'ai pas encore fait le teste pour savoir si la valideur W3C en mode XHTML Strict y verrait une erreur...Mais bon ce n'est pas si important .

J'aurais pu effectivement utiliser des classes, mais ça me ramenerais à la troisième solution (autant d'identificateurs différents que de pages), dans ce cas, j'éviterais d'avoir plusieurs fichiers CSS, parcontre j'aurai 3 fois plus d'instructions (rédondantes) dans le même fichier.

Merci Jean-Pierre !

Jean-Pierre (aussi ).
Modifié par Neutron (14 Nov 2005 - 19:33)

yyoupla a écrit :

Je ne sais pas comment tu comptais redéfinir le style.dynamiquement suivant la page, mais si tu devais utiliser du javascript, cela te prive des visiteurs ne supportant pas le js.

Bonsoir,

Enfaite, j'aurai plutôt utilisé le PHP, (parcequ'il est éxcuté coté serveur), et j'aurai inclu les fichiers CSS en fonction de la page consultée, de façon très simple enfaite...

Merci

Jean-Pierre

Tu peux le faire avec des variables en php de manière toute simplette en effet

bonjour,
sur les page d'un site chaque page a une couleur de fond differentes et le menu principal de la page d'acceuil a un fond de couleur distinct des autres pages.

Le code html est fractionnée pour etre réutilisé avec les" include" php.
je garde pour la balise body la possiblité d'ajouter une "class" en usant des variables et de la commandes echo.

Lorsque je crée une nouvelle page, grace a cette variable je peut donner une class differente supplementaires a body et ou en creer une autre.

Coté css il me suffit de declarer .

body.class_defaut div#global {background:blabla; width:blabla; etc ...}
body.class_page1 div#global {background:blabla; width:blabla; etc ...}
body.class_page2 div#global {background:blabla; width:blabla; etc ...}
etc ...

et dans ma portion html la base est

body class="class_defaut <? echo $class_page ?>">

Cette façon de faire permet a partir de la class body (en principe) d'attribuer une regle specifique css a n'importe quel id, class ou balise de la page en fonction de la "class" attribuer a body.

Amateur et encore pas mal bricoleur, c'est la façon la plus simple et plus efficace que je me suis trouvé pour faire ce genre de chose.
au final cela me fait: une nouvelle page = une variable a declarer dans les premieres lignes de ma page php si je veux modifier le css appliquer par defaut.+ dans ce cas completer la feuille de style.

Je n'ai pas de difficulté par la suite en revenant sur ces pages pour m'y retrouver..

Ce system te convient peut-etre ..

a plus

gcyrillus a écrit :
bonjour,

(...)

Je n'ai pas de difficulté par la suite en revenant sur ces pages pour m'y retrouver..

Ce system te convient peut-etre ..

a plus

Hello,

Effectivement, c'est une solution à laquelle j'avais pensé, pas tout à fait de la même manière, mais à peu de choses près.

Comme je l'ai indiqué dans mon premier message, le but aurait été de se passer d'un langage dynamique (PHP, dans ce cas), pour une question de dépendance et légèreté du code...

Il n'y a donc aucune autre manière de dynamiser des instructions CSS...

Etant donné qu'il s'agit d'un site très compact et plutôt orienté design... Je pense pouvoir m'en sortir avec mes 2 feuilles de styles en "cascade"...

Merci

Jean-Pierre

Bonjour,

Il y a une légère erreur sur le fond, pour l'a priori que tu sembles avoir sur la solution CSS indiquée par jpv et que tu suggérais toi-même dans ton premier message : le fait d'avoir une série d'id de sections dans le site, ou d'id de pages et autant de variantes de styles associés n'a rien de redondant ni de problématique. C'est le mode de fonctionnement normal en CSS, qui n'est effectivement pas un langage "dynamique" (Cette orientation avait été envisagée il y a quelques années lors du développement de CSS2, mais a été résolument écartée).

Laurent Denis a écrit :
Bonjour,

Il y a une légère erreur sur le fond, pour l'a priori que tu sembles avoir sur la solution CSS indiquée par jpv et que tu suggérais toi-même dans ton premier message : le fait d'avoir une série d'id de sections dans le site, ou d'id de pages et autant de variantes de styles associés n'a rien de redondant ni de problématique. C'est le mode de fonctionnement normal en CSS, qui n'est effectivement pas un langage "dynamique" (Cette orientation avait été envisagée il y a quelques années lors du développement de CSS2, mais a été résolument écartée).

Bonjour,

Enfaite, voici l'explication pour laquelle j'ai renoncé à cette solution (problème de rédondance) :

On admet que le site comporte 3 pages et une feuille de style CSS.
Chaque page se décompose de la manière suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
	<title>Titre page</title>
	<link rel="stylesheet" media="screen" href="style.css" type="text/css"/>
	</head>
		<body>

			<div id="page">Bloc principal
			
				<div id="header">En-tête</div>
			
				<div id="content">Corps</div>
		
				<div id="footer">Pied de page</div>
				
			</div>

		</body>
	</html>

La feuille de style ainsi :

body
{
	background: #000;
}

#page
{
	width: 770px;
	background: url(fond.png); 
}

#header
{
 ...
}

#content
{
 ...
}

#footer
{
 ...
}

Dans ce cas, chaque page aura un fond noir (body) et le même bloc principal (#page) d'une largeur de 770 pixels avec une même image de fond en mosaïque.

En admettant que la page 2 et 3 aient des fonds alternatifs, je pourrais utiliser 2 autres id :

body
{
	background: #000;
}

#page
{
	width: 770px;
	background: #fff url(fond.png); 
}

#page_2
{
	width: 770px;
	background: #fff url(fond_2.png); 
}

#page_3
{
	width: 770px;
	background: #fff url(fond_3.png); 
}

Je me retrouve à redéclarer 3 fois la largeur du bloc, ce qui est superflu...

Enfaite, dans chacune des solutions il y a un compromis.

Dans la première solution évoquée, il n'y aucune rédondance, mais des fichiers supplémentaires.

Dans la seconde, il y a un seul fichier mais plusieurs définitions superflues.

...

Bye
Jean-Pierre
Modifié par Neutron (15 Nov 2005 - 12:08)

Bonsoir,

Je suis tombé un peu par hasard sur une solution, (pourtant évidante! ) (pour ceux qui se retrouveraient dans le même cas de figure...) :

Il suffit de définir les identificateurs à la suite lorsqu'il s'agit de définitions communes (comme avec les balises) par exemple :

/* Fichier CSS */

/* Définitions communes */
#page, #page_2, #page_3
{
width: 770px;
}

/* Définitions (ou redéfinitions) individuelles */
#page_2
{
background: url(fond_2.png);
}

Ainsi on se passe de définir plusieurs fois la même chose...

Bye