Nous allons commencer à manipuler les css, dans cette seconde étape il sera question de positionner les différentes parties du site, pour cet exemple j'ai décidé de faire un site de 770 pixels de large (largeur maximale pour que le site soit vu entièrement sans barre de défilement horizontale pour une résolution de 800 par 600 pixels), qui soit centré avec une partie allouée au titre haute de 258 pixels (taille de l'image utilisée ensuite). Nous ne nous occupons pas du menu pour lequel une étape sera consacrée entièrement. Ci-après le code css correspondant à cette page, celui-ci est inséré en utilisant la balise <style type="text/css"> </style> à insérer entre les balises <head> et </head>.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}
On définit les marges haute et basse à 10px et les marges droite et gauche à 0. On met le padding à 0 pour éviter le padding par défaut pour le body. On utilise text-align: center ; pour les anciennes versions d'Internet Explorer afin de centrer les éléments de type block avec ce navigateur.
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}
On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels. La marge automatique permet de centrer le bloc. Il faut rétablir l'alignement à gauche que nous avons changé plus haut pour le centrage de l'élément.
h1#header
{
height: 258px ;
}
On définit la hauteur de la partie header, contenant le titre du site.
pre
{
overflow: auto ;
}
En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand
On doit donner une largeur à ce dernier élément à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant le commentaire conditionnel suivant, à placer dans la partie HTML, et plus précisément dans l'élément <head> :
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]-->
