Gabarit 04 — variante

Caractéristiques: minimaliste, menu vertical à droite, largeur fluide

• Accueil
• Tous les gabarits
• Utilisation
• Licence
• Crédits

À propos du gabarit 04 (variante)

Code HTML et CSS

Ce gabarit est une variante du Gabarit 04. Il a la même structure HTML, et il utilise les mêmes feuilles de style.

La seule modification apportée aux styles CSS se trouve dans le code de cette page. La voici:

<style type="text/css" media="screen">
#navigation {
	float: right; /* On fait flotter le menu à droite plutôt qu'à gauche */
}
#contenu {
	margin-left: 0; /* On remet à zéro la marge de gauche du contenu... */
	margin-right: 20%; /* ... et on utilise la même marge, à droite */
}
</style>

Passer notre menu à droite est donc un jeu d'enfant.

Attention!

Cette variante sert avant tout à illustrer le fonctionnement du positionnement flottant. En pratique, il est préférable de ne pas placer un menu de navigation tout à droite de la page.

En effet, la plupart des sites web ont un menu de navigation horizontal sur toute la largeur du site, ou un menu de navigation vertical situé à gauche. C'est une convention à laquelle les internautes sont habitués. En plaçant votre menu de navigation à droite (ou tout en bas, ou en plein milieu de votre contenu…), vous prenez le risque d'avoir un menu peu visible, et donc une mise en page inefficace!