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 le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer,
c'est la seule façon 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 */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
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 au <pre> à 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]-->
Passons ensuite à la 3ème étape, nous allons mettre un peu de couleur et d'images.