/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 07
   ? Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propri?t?s background) et les couleurs
   du texte (propri?t? color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie ?positionnement?. */

/* G?n?ral */
body {
	background-image: url(http://www.fete-anim.com/IMG_FETE_2007/croix.gif);
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
strong {
	color: #A1B55D;
}

/* Bloc central contenant #navigation et #contenu */
#centre {
	background: url(http://www.fete-anim.com/IMG_FETE_2010/07-colonnes.png) repeat-y; /* Voir -> Note 1 */
}

/* Navigation */
#navigation {
	/*background: #660099;*/
}
#navigation a {
	color: #FFFFFF;
}

#navigation p {
	color: #FFFFFF;
	margin:0;
	padding: 0pt; 
}


#navigation a:hover, #navigation a:focus {
	/*background: #000000;*/
}

/* Contenu principal */
#contenu {
	color: #363B29;
	/*background: #660099;*/ 
}
#contenu a {
	color: #332510;
}
#contenu a:hover, #contenu a:focus {
	color: #6E5122;
}
#contenu strong {
	color: #181A12;
}

#contenu p {
	margin:0px;
	padding: 0px;
	padding-bottom:15px;
	padding-top: 5px;
}
/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 10px 5px;
}
#global {
	width: 700px; /* -> 3 */
	margin: 0 auto; /* -> 4 */
}

/* En-t?te */
#entete {
	padding: 20px 20px 0px 0;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: left;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	margin: 4px 0 15px 0;
}

/* Bloc central contenant #navigation et #contenu */
#centre {
	width: 100%; /* -> 5 */
	overflow: hidden; /* -> 5 */
}

/* Menu de navigation */
#navigation {
	width: 180px;
	float: left; /* -> 6 */
}
#navigation ul {
	margin: 0;
	padding: 20px 10px 20px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 1%; /* -> 7 */
	padding: 6px 10px 6px 10px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Contenu */
#contenu {
	margin-left: 200px; /* -> 8 */
	padding: 10px 20px;
}
#contenu > :first-child {
	margin-top: 10px;
}
#contenu p, #contenu li {
	line-height: 1.5;
}

/* Pied de page */
#pied {
	margin: 0;
	padding: 15px 20px 10px 0;
	font-size: .85em;
}

/* Mention de copyright */
#copyright {
	margin: 8px 0 0 0;
	font-size: 1em;
	text-align: left;
}


/* --- NOTES ---

1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe
	div#navigation et div#contenu uniquement. C'est ce conteneur que l'on
	utilise pour placer une image de fond r?p?t?e en hauteur, qui dessine
	le fond de la colonne de gauche et de la colonne de droite.
	Ainsi, quelle que soit la colonne la plus longue, on aura bien,
	visuellement, deux colonnes de hauteurs ?gales.

2.	On utilise ici des couleurs de fond pour div#navigation et div#contenu.
	Et pourtant, nous avons d?j? une image de fond, sur div#centre, qui
	?dessine? nos deux colonnes. Pourquoi rajouter des couleurs de fond ?
	ces blocs, alors? C'est en fait une s?curit?, au cas o?:
	- l'image de fond mettrait du temps ? se charger (?a arrive);
	- l'image de fond ne peut pas ?tre charg?e (rare, mais ?a arrive aussi).
	Ainsi, si ces probl?mes surviennent, le contenu restera lisible. Notamment
	le contenu de div#contenu, qui est sombre, tandis que le fond de la page
	est d?j? sombre.
	Notez que dans certains cas ce genre de ?s?curit?? sera difficile ? mettre
	en place, par exemple parce que la couleur de fond des blocs masquerait
	une image de fond comportant des motifs.
	Mais, plus g?n?ralement, un bon design de site web devrait rester lisible
	m?me si les images sont d?sactiv?es (ce qui est une option de beaucoup
	de navigateurs).

3.	On utilise ici une largeur fixe de 750px. Pourquoi 750px? Parce que c'est
	une largeur dont on peut ?tre ? peu pr?s s?r qu'elle passera sur un
	?cran en 800x600 (r?solution encore utilis?e par une partie des
	internautes), sans g?n?rer de barre de d?filement horizontal inutile.
	De plus, pour un site au contenu relativement r?duit, cette largeur suffit
	g?n?ralement.
	Pour un site au contenu plus important, avec un design en trois colonnes
	par exemple, une largeur plus importante, telle que 900 ou 950px, peut
	?tre pertinente.

4.	Les marges automatiques ? gauche et ? droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global ? gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global ? droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global ? droite avec un retrait (? droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

5.	On utilise ces propri?t?s pour emp?cher le d?passement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).
	Le overflow:hidden cr?e un contexte de formatage qui vient contenir les
	flottants. Le width:100% a le m?me r?le, mais uniquement pour Internet
	Explorer 6 (utilisation du HasLayout). Dans l'id?al, on le placera avec
	des correctifs destin?s ? IE6 dans une feuille de styles appel?e via un
	commentaire conditionnel.

6.	C'est la propri?t? "float" qui nous permet de placer deux blocs
	c?te-?-c?te. Notez bien que l'?l?ment flottant (ici, notre menu de
	navigation) doit ?tre plac? en premier dans le code HTML. Il est
	pr?f?rable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 180px;".

7.	Correction d'un bug d'Internet Explorer 6. Voir la derni?re partie de
	http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-
	mise-en-forme-du-code-html
	Dans l'id?al, on placera ce correctif dans une feuille s?par?e, appel?e
	via un commentaire conditionnel visant IE6.

8.	Les ?l?ments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu principal forme
	une colonne distincte du menu, on lui donne donc une marge ? gauche de
	200px.
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le pr?c?dent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/