Voilà qui est mieux, un cadre, des couleurs, des images décoratives pour la partie header, la partie page et pour les titres de pages. On commence à voir quelque chose d'un peu plus présentable.
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */
h1#header
{
height: 258px;
background: url(apple.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
de tout à l'heure, attention à bien compresser vos images */
div#contenu
{
padding: 0 30px 0 100px ;
background: url(bg_page.gif) no-repeat 15px 15px ;
}
/* On ajoute un petit élément décoratif sur le côté
de la page et on crée un espace à gauche et à droite du contenu */
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
/* Mise en forme du titre de page, une petite image,
on décale le texte en fonction de l'image, on donne un couleur au texte et
on met une bordure basse */
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h2, à ceci près qu'on
ne donne pas d'image décorative cette fois ci */
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié,
alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2;
}
/* On met en forme les liens contenu dans la page */
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
et un léger espace entre le texte et les bords du pre */
pre span
{
color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
eux mêmes compris dans un pre */
pre span.comment
{
color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
utilisés pour les commentaires */
Nous avons fait le plus facile, rien de bien technique jusqu'ici, passons donc à la 4ème étape, la mise en forme du titre et du menu.