Intégration 3 : coder la css

Maintenant que nous disposons d’un html décrivant l’ensemble des éléments de la page et sémantique, on peut attaquer le codage de la css.

Précédent | 17/19 | Suivant

Comportements généraux

On commencera par définir les comportements généraux de la page : taille des caractère de texte principal, fonte des éléments principaux, comportement général des liens.

body {
font-family: Georgia,Times,serif;
font-size:13px;
background-color:#101010;
color:#9B968C;
margin:0;       
}

a {
text-decoration:none;
color:#63BDAB;       
}

a:hover {
color: #367A6C;       
}

"Resetter"

Comme déjà évoqué, tous les tags à part div et span ont un comportement par défaut (les liens sont bleus et soulignés par exemple). Certains de ces comportements nous ennuient, et on va les remettre "à zéro". c’est le rôle des "resetter". Dans le code ci-dessus, "marghin:0 ;" sur le body signifie que l’on enlève les marges par défaut du body.

ul, li {
margin:0;
padding:0;       
list-style-type:none;
}

Ici, on enlève les marges et les "bullets" des listes, que l’on emploiera nulle part. Il est possible dans un second temps de donner des marges et du padding aux éléments de type li, mais on le fera pour certains éléments précis. Ici, on les remet tous à zéro.

Positionnement
On va maintenant coder le positionnement des éléments principaux, ceux qui ont des id dans notre code html. Rappelons que l’on va éviter de positionner ce qui reste "dans le flux".
On va commencer par le "wrapper" puis attaque le header et la navigation :

#wrapper {
width:960px;
margin:0 auto;
position:relative;
}

#header {
height:150px;
background-color:#0c0c0c;
margin-bottom:40px;
}

h1 {
position:absolute;
left:0;
top:110px;
text-indent:-9999px; /* cacher le texte */
background-image:url(img/logo.gif);
width:216px;
height:12px;
margin:0;
}

h1:hover {
background-position:-216px top;       
}

Le "margin : 0 auto ;" sur le wrapper permet de le centrer horizontalement. Le "position:relative ;" permettra le positionnement en absolu du h1, son enfant, toujours au bon endroit : si on ne met pas un positionnement sur wrapper, h1 se positionnera par rapport à body, et n’accompagnera pas le centrage du wrapper si on agrandit la page du navigateur. Testez en supprimant ce "position:relative" pour mieux comprendre.

H1 comporte des codes étrange : le text-indent permet de décaler le texte à l’intérieur du bloc H1. Ici on le bouge négativement. En fait, on fait disparaitre ce texte, pour pouvoir le remplacer par une image avec une typo plus élégante. On aurait pu mettre cette image directement dans le tag h1, mais dans ce cas le titre du site aurait été illisible pour les moteurs de recherche. C’est donc un truc qui est employé ici : on cache le texte et fait apparaitre à sa place une image de fond plus jolie. Du coup, on doit forcer la taille du bloc en largeur et hauteur.

le sur vol du h1 comporte une autre finesse : en passant avec la souris sur l’élément h1, on décale l’image de fond pour faire apparaitre une version plus sombre de l’image. Pourquoi décaler l’image plutôt qu’en faire apparaitre une autre ? Simplement pour éviter d’attendre le chargement de cette deuxième image par le net.

La navigation

La navigation est positionnée en absolu. On connait sa taille et elle ne bougera pas, on peut donc se le permettre. On place le div en absolu, puis on place les élément de la liste en float, pour qu’ils se positionnent les uns à la suite des autres. On crée un espace à droite de chaque élément de 40 pixels pour bien les séparer. Ne pas oublier de donner une largeur : un élément en absolu a une largeur dépendante de son contenu, par défaut.

#site-navigation {
position:absolute;
width:500px;
left:520px;
top:110px;
font-family:arial,verdana, sans-serif;       
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.05em;
}

#site-navigation li {
float:left;
margin-right:40px;
}

Le page header

Le page-header, cette petite fantaisie, reste dans le flux, avec des marge. son texte est aussi remplacé par une image. Remarquez qu’il comporte une ligne en dessous, qui est un border bottom, et qu’il est séparé par un padding et d’un margin pour que cette ligne soit bien séparée du texte.

#page-header {
padding-bottom:15px;
border-bottom:1px #282828 solid;
margin-bottom:26px;
text-indent:-9999px;
background-image:url(img/work.gif);
background-repeat:no-repeat;       
}

le main
La partie centrale sera placée en float à droite, puisque la sidebar doit occuper la partie gauche de la page. On lui force sa largeur, sinon elle va se choisir elle-même une largeur qui ne nous conviendra pas.

#main {
float:right;
width:615px;
}

le main est composé de trois sous-ensemble. Une image qui occupe la partie haute, puis deux blocs, un à gauche et l’autre à droite. Ces deux derniers seront aussi placé avec un float. L’image ne doit pas être codée maintenant puisqu’elle occupe toute la largeur de l’espace disponible.

#texte {
float:left;
width:370px;
font-family:georgia, times, serif;
font-size:13px;
line-height:22px;       
}

#information {
width:172px;
float:right;
font-family:arial, helvetica,sans-serif;
font-size:11px;       
}

La sidebar

La sidebar va normalement occuper sa place à gauche, mais il faut pour cela forcer simplement sa largeur : si elle est plus large que l’espace à gauche du main, elle va glisser en dessous de celui-ci. On lui donne donc la taille prévue par le layout : 295 pixels de large.

Chaque "li" de la sidebar contient une image et du texte. L’image doit venir à gauche. Le plus simple est de positionner ces images avec un float :

#sidebar {
width:295px;
font-family:arial,helvetica, sans-serif;       
}

#sidebar li {
padding:15px 0;
border-bottom:1px solid #282828;
}

#sidebar img {
float:left;
margin-right:10px;
}

.clearer {
clear:left;       
}

Le clearer est un élément que l’on a ajouté en bas à l’intérieur de chaque élément "li". Il permet d’être sûr que chaque bloc "li" sera bien en dessous du précédent, et pas à sa droite à cause du float. Testez la page en supprimant le code du clearer pour constater le résultat.

Footer

Le footer est dans bas de la page, il est logiquement sans positionnement. Il va juste se placer sous tous les éléments et donc le seul code de positionnement est le "clear:both" qui assure qu’il se mettra bien en dessous de tous ce qui est positionné en float.
A l’intérieur, le #footer-copy et #footer-contact sont en float left et right, avec le #quote qui s’assure lui aussi d’être sous ces deux éléments avec un clear:both.

#footer {
border-top:1px #282828 solid;
padding-top:10px;
font-size:11px;
clear:both;       
}

#footer-copy {
float:left;
}

#footer-contact {
float:right;       
}

#quote{
clear:both;       
}

Couleurs, etc.

Ce n’est pas fini, évidemment, mais à partir d’ici, il sera question de marges, de couleurs et de couleur de liens, de graisse, d’espaces, etc. Analysez le code complet de la page ci-joint pour en savoir plus.