Transformations des éléments de type lien avec display:inline-block
Par défaut, les balises <a> sont des éléments en ligne qui ne permettent pas de définir des dimensions. En appliquant display: inline-block;, on peut leur attribuer une largeur et une hauteur personnalisées.
L'état a:hover cible le survol souris de l'élément lien.
La propriété background: url(image.png) bottom; positionne l'image de fond en bas du conteneur.
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.lien-bouton {
display: inline-block;
width: 80px;
height: 40px;
background: url("bouton.png") no-repeat center;
}
.lien-bouton:hover {
background: url("bouton.png") no-repeat center bottom;
}
</style>
</head>
<body>
<a href="#" class="lien-bouton"></a>
</body>
</html>
Centrage horizontal et vertical du texte
text-align: center permet d'aligner horizontalement le contenu textuel à l'intérieur d'un bloc.
Pour un centrage vertical, on attribue au texte une hauteur de ligne (line-height) identique à celle de son conteneur parent.
La propriété text-decoration: none supprime le soulignement par défaut des liens.
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.navigation-item {
display: inline-block;
width: 130px;
height: 60px;
text-align: center;
text-decoration: none;
color: #ffffff;
line-height: 60px;
margin: 5px;
}
.nav-accueil { background: url(img/icone1.png); }
.nav-services { background: url(img/icone2.png); }
.nav-contact { background: url(img/icone3.png); }
.nav-blog { background: url(img/icone4.png); }
.navigation-item:hover {
background: url(img/icone-hover.png);
}
</style>
</head>
<body>
<a href="#" class="navigation-item nav-accueil">Accueil</a>
<a href="#" class="navigation-item nav-services">Services</a>
<a href="#" class="navigation-item nav-contact">Contact</a>
<a href="#" class="navigation-item nav-blog">Blog</a>
</body>
</html>
Utilisation de l'espacement intérieur (padding)
Le padding crée un espace entre le bord d'un élément et son contenu, permettant d'aérer les liens de navigatoin.
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.barre-menu {
height: 44px;
background-color: #f0f0f0;
border-top: 3px solid #e74c3c;
border-bottom: 1px solid #cccccc;
}
.conteneur-menu {
width: 960px;
height: 44px;
margin: 0 auto;
line-height: 44px;
}
.element-menu {
display: inline-block;
height: 44px;
color: #888888;
font: 13px/44px Arial, sans-serif;
text-decoration: none;
padding: 0 15px;
}
.element-menu:hover {
background-color: #666666;
color: #ffffff;
}
</style>
</head>
<body>
<div class="barre-menu">
<div class="conteneur-menu">
<a href="#" class="element-menu">Accueil</a>
<a href="#" class="element-menu">Actualités</a>
<a href="#" class="element-menu">À propos</a>
</div>
</div>
</body>
</html>
Personnalisation des listes
Les listes HTML (ul, li) peuvent être stylisées pour créer des panneaux d'information ou des menus déroulants avec des puces personnalisées.
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.panneau-actus {
width: 260px;
height: 180px;
border: 1px solid #d5dae5;
border-top: 4px solid #2ecc71;
margin: 0 auto;
}
.titre-panneau {
height: 38px;
border-bottom: 1px solid #d5dae5;
line-height: 38px;
padding-left: 14px;
font-weight: bold;
}
.panneau-actus ul {
margin-top: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.panneau-actus li {
padding-left: 20px;
background: url("puce.png") no-repeat 10px 8px;
font: 13px/28px Arial, sans-serif;
color: #555555;
}
</style>
</head>
<body>
<div class="panneau-actus">
<div class="titre-panneau">Dernières actualités</div>
<ul>
<li>Nouveau produit lancé</li>
<li>Mise à jour du système</li>
<li>Événement à venir</li>
<li>Promotion du mois</li>
<li>Offre spéciale étudiants</li>
</ul>
</div>
</body>
</html>
Le flottement (float) en CSS
La propriété float permet de retirer un élément du flux normal du document. Ses usages principaux :
- Habillage de texte autour d'une image
- Création de menus de navigation horizontaux
- Mise en page multi-colonnes
Exemple de navigation horizontale avec float :
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-horizontal {
list-style: none;
}
.menu-horizontal li {
float: left;
}
.menu-horizontal li a {
display: block;
height: 42px;
font: 15px/42px Arial, sans-serif;
padding: 0 22px;
text-decoration: none;
color: #333333;
}
.menu-horizontal li a:hover {
background-color: #bdc3c7;
}
.conteneur-nav {
width: 750px;
height: 42px;
background-color: #ecf0f1;
margin: 25px auto;
}
</style>
</head>
<body>
<nav class="conteneur-nav">
<ul class="menu-horizontal">
<li><a href="#">Recherche</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Actualités</a></li>
</ul>
</nav>
</body>
</html>
Exemple de navigation avec séparateurs visuels :
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.en-tete {
height: 58px;
background: url("fond-en-tete.jpg");
border-top: 1px solid #999999;
margin-top: 20px;
}
.en-tete-interne {
width: 980px;
margin: 0 auto;
height: 58px;
}
.en-tete-interne ul {
list-style: none;
}
.en-tete-interne li {
float: left;
background: url("separateur.png") no-repeat right;
height: 58px;
padding: 0 28px;
}
.en-tete-interne a {
display: inline-block;
height: 58px;
font: 14px/58px Arial, sans-serif;
text-decoration: none;
color: #777777;
}
.en-tete-interne a:hover {
color: #27ae60;
}
</style>
</head>
<body>
<header class="en-tete">
<div class="en-tete-interne">
<ul>
<li><a href="#">Ordinateurs</a></li>
<li><a href="#">Accessoires</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Mon compte</a></li>
</ul>
</div>
</header>
</body>
</html>
Mise en page avec colonnes flottantes :
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
.bandeau, .pied-page {
width: 520px;
height: 100px;
background: #2c3e50;
margin: 10px 0;
}
.zone-principale {
width: 520px;
height: 320px;
background: #ecf0f1;
}
.colonne-contenu {
width: 340px;
height: 320px;
background: #e67e22;
float: left;
}
.colonne-laterale {
width: 170px;
height: 320px;
background: #3498db;
float: right;
}
</style>
</head>
<body>
<div class="bandeau"></div>
<div class="zone-principale">
<div class="colonne-contenu"></div>
<div class="colonne-laterale"></div>
</div>
<div class="pied-page"></div>
</body>
</html>
Techniuqes de suppression du flottement
Lorsque des éléments flottants dépassent de leur conteneur parent, il est nécessaire de « nettoyer » le flottement pour restaurer le flux normal.
Méthode 1 : Ajouter un élément vide avec clear: both après les éléments flottants.
<style>
.nettoyage { clear: both; }
</style>
Méthode 2 : Appliquer overflow: hidden au conteneur parenet. Attention, cette technique empêche le débordement visible des éléments flottants.
<style>
.parent { overflow: hidden; }
</style>
Méthode 3 : Utiliser un pseudo-élément ::after pour nettoyer le flottement (approche la plus courante et compatible avec tous les navigateurs) :
<style>
.clearfix::after {
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1; /* Compatibilité avec Internet Explorer */
}
</style>
Il suffit ensuite d'appliquer la classe .clearfix au conteneur parent des éléments flottants.