KooNDeLLiTcH²

Je vous propose de reproduire simplement la barre de choix de langue du site Fubiz, modèle d’élégance du design web français tant dans le code que dans le rendu.
Voici ce que l’on va reproduire :

Barre de choix de langue de Fubiz

Comme quasiment toute liste de ce genre en HTML, la structure est une base ul stylée en CSS placée juste après votre tag body:

	
		EN
	


	
		FR
	

Ce qui est à noter ici et à prendre comme best practice, c’est la présence du span avec les lettres « EN » et « FR ». En effet, ce span est destiné à être caché en CSS. Alors pourquoi le mettre ? Tout simplement pour l’accessibilité aux screen-readers pour les malvoyants. Un très bon point pour les devs web de chez Fubiz. Donc à ce niveau, on a fini avec l’HTML et on a aucun CSS. Du coup, c’est moche mais lisible et accessible :

HTML seul

Maintenant, construisons notre CSS au fur et à mesure. Tout d’abord, stylons le body, la div topsite comme il faut en ajoutant le code dans une feuille CSS liée ou dans le style du header :

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: black;
}
#topsite {
	height: 153px;
	border-top: 3px solid #D2344F;
	background-color: black;
}

Puis, positionnons le ul lang . La liste doit avoir 900 pixels de large, être centrée dans le body (margin:auto) et ses éléments poussés à droite (float:right sur les li) et espacés de 2 pixels (margin-right:2px) :

#lang {
	width: 900px;
	margin: auto;
}
#lang li {
	float: right;
	margin: 0 2px 0 0;
}

Enfin, on va cacher le texte des li et les remplacer par des images en arrière-plan. Ces images sont ce qu’on appelle des tiles : chaque image contient les images de tous ses états. On passera d’un état à un autre en décalant le x ou le y (ici le y) et en fixant la largeur et la hauteur de l’élément décoré. D’abord voici les images dont chaque état fait 35 px de largeur et 16 px de hauteur :

L’état par défaut est au-dessus et l’état sélectionné ou survolé est en dessous. On va maintenant cacher le texte (display:none sur le span) et appliquer la bonne image en background du a avec la class correspondante :

#lang li span {
	display: none;
}
#lang li a.langFR {
	width: 35px;
	height: 16px;
	background: url(images/header_btn-fr.jpg) no-repeat 0 0;
	display: block;
}
#lang li a.langEN {
	width: 35px;
	height: 16px;
	background: url(images/header_btn-en.jpg) no-repeat 0 0;
	display: block;
}

A noter le display:block pour forcer l’affichage du a même sans contenu mesurable.
Il ne nous reste plus qu’à décaler verticalement de 16px en CSS le background de nos a lorsque ceux-ci sont survolés (pseudo-classe hover) ou sélectionné (class: current) :

#lang li a:hover, #lang li a.current {
	background-position: 0 -16px;
}