Les feuilles de style (7/8)

La touche finale

Commençons par le titre

Nous avons placé l'en-tête de la page dans un div avec l'identifiant "Titre". On aurait pu s'en passer, puisqu'on avait déjà la balise <h1> mais si vous voulez ajouter d'autres choses à l'en-tête qu'un titre, ça peut être pratique. Bref. Commençons par coller la div Titre en haut. Pour cela, ajoutons à la déclaration CSS de body la ligne :

margin: 0px;

Cela évite qu'il y ait un blanc entre le titre et les côtés du navigateur. Pour éviter le bord en haut, ajoutons :

#Titre h1 {
	margin:0px;
}

Cela signifie que les balises <h1> appartenant à un élément dont l'id est "Titre" ont une marge de zéro pixel. En l'occurrence, notre titre sera ainsi collé au haut du navigateur. Si vous utilisez des balises <h1> en dehors de l'élément "Titre", elles auront leurs marges habituelles. On voudrait aussi que le reste de la page ne soit pas collé au bas du titre. Il suffit de rajouter :

#Titre {
	margin-bottom:20px;
}

Regardez maintenant notre page d'exemple et le fichier CSS correspondant.

 

Le menu maintenant …

On voudrait mettre notre menu à gauche du contenu de la page, qu'il soit encadré d'un liseré et que sa couleur de fond soit d'un bordeau clair pour aller avec le titre. On voudrait aussi que le <h6>Menu de navigation</h6> soit collé au haut du menu. Aussi, on voudrait cacher les puces devant les liens des pages. D'abord le menu :

#Menu {
	border:2px dashed maroon;
	width:190px;
	background-color:#FFC4C4;
	padding:5px;
}

Maintenant, on va enlever la marge avant le <h6> et fixer la taille de police :

#Menu h6 {
	margin-top:0px;
	font-size:10px;
}

Ensuite on cache les puces, mais seulement celles du #Menu. On veut que les autres continuent d'apparaître dans la page. Par ailleurs, on enlève de la marge à gauche grâce à une marge négative, pour que les textes des puces reviennent à une position plus normale.

#Menu li {
	list-style-type:none;
	margin-left:-35px;
}

Enfin, pour la finition, on va changer la couleur des liens du menu. Mettons-les en noir, non-soulignés :

#Menu a {
	text-decoration: none;
	color:maroon;
}

Ensuite, nous allons changer leur apparence lorsqu'on passe la souris dessus.

#Menu a:hover {
	color:#FFC4C4;
	background-color:maroon;
}

Et voilà le résultat ! Regardez notre page d'exemple et le fichier CSS correspondant.

 

… et pour finir, le contenu de la page

On a dit qu'on voulait mettre le contenu de la page à droite du menu. Il suffit pour cela de lui affecter une marge à gauche plus large que le menu. Et lui ajouter un peu de padding …

#Contenu {
	margin-left:210px;
	padding:0px 10px 10px 20px;
 }

La dernière étape consiste à ajouter float:left; dans la déclaration CSS de #Menu pour que le #Contenu puisse apparaître à sa droite. Voilà au final ce qu'est devenu notre page d'exemple et voilà le fichier CSS correspondant.

 

Allez, un dernier effort : la conclusion.

 

Revenir au sommaire de cette leçon
Revenir à l'index des leçons Web

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French