Nous allons commencer a manipuler les css, dans cette seconde etape il sera question de positionner les differentes parties du site, pour cet exemple j'ai decide de faire un site de 770 pixels de large (largeur maximale pour que le site soit vu entièrement sans barre de defilement horizontale pour une resolution de 800 par 600 pixels), qui soit centre avec une partie allouee au titre haute de 258 pixels (taille de l'image utilisee ensuite). Nous ne nous occupons pas du menu pour lequel une etape sera consacree entièrement. Ci-après le code css correspondant a cette page, celui-ci est insere en utilisant la balise <style type="text/css"> (</style>) a inserer entre les balises <head> et </head>.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}
/* On definit les marges haute et basse a 10px et les marges droite et gauche a 0 */
/* On met le padding a 0 pour le navigateur Opera qui definit des padding par defaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer,
c'est la seule façon de centrer les elements de type block avec ce navigateur */
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}
/* On definit la largeur de la division qui contient l'ensemble de la page a 770 pixels */
/* margin: 0 auto ; est la methode correcte pour centrer les elements de type
block (comme les divisions), nous centrons donc cette division */
/* Il faut retablir l'alignement a gauche que nous avons change plus haut */
h1#header
{
height: 258px ;
}
/* On definit la hauteur de la partie header, contenant le titre du site */
pre
{
overflow: auto ;
}
/* En passant on definit l'overflow de la balise pre a auto pour
permettre d'afficher des barres de defilement si le texte contenu
dans cette balise est trop grand */
/* On doit donner une largeur au <pre> a cause d'Internet Explorer,
on ne va donc l'appliquer qu'a Internet Explorer en utilisant le
commentaire conditionnel suivant, a placer dans la partie HTML,
et plus precisement dans l'element <head> : */
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
<![endif]-->
Passons ensuite a la 3ème etape, nous allons mettre un peu de couleur et d'images.