Bonjour,

Dans modele09 des gabarits je vois pour <body> :

un padding de 10px 20px pour le lien base.css
et
un padding de 20px 30px pour le lien modele.09.css

Il doit y avoir une raison. Mais je ne comprends pas bien ??

Merci d'avance à celle ou celui qui voudra bien m'aider.
Bonjour,

body {
	margin: 0;
	padding: 10px 20px;[#blue][b] /* Note -> 2 */[/b][/#]
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
	font-size: .8em; /* -> 4 */
	line-height: 1.25; /* -> 5 */
	color: black;
	background: white;
}


[#blue][b]2.[/b][/#]	Par défaut, les navigateurs ont un padding (ou, pour certains, un
	margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
	ne soit complètement collé aux bords de la zone de visualisation du
	navigateur lorsqu'on affiche une page «brute», sans mise en forme.
	Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
	[#blue][b]Notez bien que les feuilles de styles des gabarits pourront augmenter
	ce retrait, ou bien l'annuler.[/b][/#]

Dont acte : augmentation !

body {
	padding: 20px 30px;
}


C'est cette dernière déclaration qui prime sur la mise en page.
Cdt,
Sylvain
Florent V. a écrit :
C'est fou ce que j'avais bien documenté ces gabarits, quand même. Smiley jap



Un modérateur visiblement à tout compris lui. Ceci doit être lié au fait d'avoir bien documenté.
Moi aussi j'avais lu précédemment les notes et la conclusion qui est de dire que c'est la derniére déclaration qui compte. Ca j'ai compris ! !

Toutefois en apprenti css je me demande :
1/ pourquoi 2 fichiers css
2/ pourquoi ou à quoi cela sert-il de dire dans l'un 10px et 20px et dans l'autre 20px et 30px ce qui sera retenu en définitif.

Doit y avoir des raisons. Inexpliquées dans les 2 premières réponses reçues.

En tout cas je pense que pour des non initiés cela ne va pas de soi.

A ce stade je me pose la question de savoir si le CD Elephorm est la bonne solution pour moi. Pourtant j'avais envisagé de poursuivre avec Joomla.
Hello,

il y a 2 feuilles de style car la première (base.css) contient des déclarations... de base ( Smiley smile ) valables pour tous les gabarits et ce n'est que dans la seconde que l'on trouve les déclarations spécifiques au gabarit.

Il se peut donc que des déclarations de la seconde feuille de styles annulent et remplacent celles de la première.

Cette feuille de base permet bien sûr de se simplifier la vie en ne redéclarant pas à chaque fois les mêmes choses.
Modifié par Heyoan (30 Jun 2009 - 16:35)
Comme le signale Heyoan, le fichier base.css sert de feuille de styles de... base... à tous les gabarits (11 gabarits, 13 en comptant les variantes). Il contient pour l'essentiel des styles qui s'appliquent aux éléments HTML tels que BODY, P, UL, LI, A, etc.

Ensuite, les styles d'un gabarit donné sont complétés grâce à un fichier CSS qui porte le numéro du gabarit. C'est dans ce dernier fichier qu'on va retrouver l'essentiel des styles de positionnement, ainsi que les styles de couleurs (couleur de texte, couleur de fond). Même si la palette de couleurs reste la même d'un gabarit à l'autre, les couleurs ne sont pas appliquées de la même manière (sur les mêmes éléments) dans chaque gabarit.

La structure modulaire avec un fichier base.css commun à tous les gabarits, et un fichier gabaritNN.css propre au gabarit, s'impose ici. Il s'agit d'éviter de dupliquer du code inutilement. De plus j'ai placé dans base.css tous les styles dont j'estime que l'utilisateur (l'apprenti webmaster) n'aura pas un grand intérêt à les modifier, tandis que le fichier propre au gabarit contient les styles que l'utilisateur voudra personnaliser (notamment les déclarations de couleurs, isolées en début de fichier plutôt qu'éparpillées dans toute la feuille de styles).

Mais même pour un projet pour lequel il existe un seul style de page (un projet de site web simple classique), il peut être utile de séparer les styles les plus basiques des styles de positionnement et de mise en forme des blocs. C'est pourquoi je propose, en dehors des gabarits, une feuille de styles de base à utiliser et personnaliser.