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 bloc 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 de classe .comment, ceux utilisés pour les commentaires
