Etape 5 : Décoration du contenu

Placer le titre

Nous allons positionner le titre dans le header. Puisque les dimensions sont connues, on peut utiliser le positionnement absolu sans risque. Et on change de police, dans le même temps :

div#header {
	background: #7fcf2e url(img/header.jpg) no-repeat;
	color: #fff;
	height: 201px;
	position: relative;
	}
div#header h1 {
        margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}

Un peu d'espace

Nous allons donner un peu d'air au texte en le décollant des bordures. On peut faire cela à l'aide des marges ou des padding. Le choix va dépendre de la présence d'un arrière-plan ou non, de l'utilisation antérieure de ces propriétés, etc. A vous de voir !

div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 10px;
	}
div#content {
        float: left;
	width: 530px;
	margin-left: 10px;
	}

La police de caractères

Nous allons changer de police de caractères et opter pour une police de type sans-serif, plus agréable à lire à l'écran, par exemple Trebuchet MS.

De plus, la police par défaut est un peu grande à mon goût. Nous allons redéfinir la taille de base des caractères pour la réduire un peu.

Pour obtenir un rendu aussi proche que possible dans les différents navigateurs, on applique la taille "de base" à body, exprimée en %. Pour les autres balises, on indique les tailles en "em". Lire aussi Typographie web : gérer la taille du texte avec les 'em'.

En utilisant la propriété raccourcie font :

body {
	font: 90% "Trebuchet MS", sans-serif;
}

N'oubliez pas de préciser la famille de police à utiliser si la fonte demandée n'est pas disponible sur l'ordinateur de l'utilisateur. Il y a 5 familles de police génériques : serif, sans-serif, cursive, fantasy & monospace.

Les noms de police sont écrits entre guillemets lorsqu'ils comportent des espaces. Sinon, les guillemets ne sont pas nécessaires.

Les titres

Pour mettre les titres en évidence, nous allons leur attribuer une couleur différente, ainsi qu'une image de fond pour les titres h2 et des petites majuscules pour les titres h3.

div#content h2 {
	padding-left: 35px;
	background: #fff url(img/titre.png) left center no-repeat;
	color: #6c0;
	}
div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}

Le pied de page

Nous allons diminuer la taille de police par rapport au reste du texte, et réduire les marges :

div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}

Les liens hypertextes

Pour mettre en évidence les liens, on leur attribue une couleur & une police plus grasse. Le survol sera marqué par un changement de couleur.

a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}

Il ne reste plus qu'à faire en sorte que le rendu soit correct sous IE : étape suivante.