Etape 3 : les couleurs & images de fond
Le fond général de la page ne pose pas de problème, il s'agit d'une image de fond toute simple de 5*5px qui se répète :
html {
background: #ddd url(img/html.png);
}
Passons au conteneur #global. Accrochez-vous, c'est l'heure du tour de passe-passe. Vu qu'il est difficile d'obtenir 2 colonnes de même hauteur sans passer par l'utilisation d'un tableau, nous allons nous contenter d'en obtenir l'aspect, à l'aide des colonnes factices : on simule la présence des colonnes en utilisant l'arrière-plan de leur conteneur.
Nous allons donc appliquer une image de fond à #global qui reprend non seulement les bordures de la page, mais aussi les arrière-plans des 2 colonnes (voir l'image). Ici, je n'ai utilisé qu'un simple trait de séparation entre les 2 colonnes, mais on peut être beaucoup moins sobre ;)
div#global {
min-height: 100%;
width: 750px;
padding: 0 10px;
margin: 0 auto;
position: relative;
padding: 0 10px;
background: url(img/global.png) center repeat-y;
}
On va également s'occuper du bloc #header en le dimensionnant et en lui appliquant un arrière-plan
div#header {
background: #7fcf2e url(img/header.jpg) no-repeat;
color: #fff;
height: 201px;
}
Vous aurez sans doute remarqué que le fond ne monte pas jusqu'au sommet de la page sous Firefox ou Opera. C'est dû à la fusion des marges. On peut corriger ce petit problème esthétique en supprimant les marges du titre h1 :
div#header h1 {
margin: 0;
}
Pour le footer, nous allons utiliser un léger dégradé de vert qui se répète horizontalement :
div#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7fcf2e url(img/footer.png) repeat-x;
color: #fff;
}
Il est important de préciser des couleurs de fond telles que le texte reste lisible si les images sont indisponibles. Le choix des couleurs de fond est donc lié au choix de la couleur du texte !
Passons maintenant à la mise en forme du menu de navigation : étape suivante.