Admin/Dev

Pour faire suite à mon dernier article sur le pas à pas pour faire un titre de page design, voici une déclinaison dans le même genre, afin de faire des titres de boite, un peu design, toujours en utilisant que les styles CSS.

Voila le résultat que nous souhaitons obtenir

Commençons par écrire le HTML

puis, comme la fois précédente, nos classes CSS vides

.boite {}
.boite .titre {}
.boite .contenu {}

et écrivons les définitions de bases pour le titre, le contenu et la boite sur laquelle nous appliquons un bord

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; }
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

nous ne toucherons plus au contenu, finalement, accessoire pour ce tutoriel, mais sachez que vous pouvez évidemment le customiser comme bon vous semble ou intégrer des images, ou du HTML plus complexe.

Avec le titre de page, nous avions utiliser une astuce simple, réduire la hauteur de l'élément HTML parent tout en conservant un affichage en overflow.

Ici nous ne pouvons pas utiliser cette technique car l'élément HTML est la boite qui ne contient pas que le titre mais aussi le contenu. En appliquant la même technique, le bord serait placé sur la partie supérieure du titre uniquement, bref, pas l'effet escompté.

Nous laissons donc la boite tranquille, afin que le bord reste en place, et nous allons jouer sur le titre. Et puisque le bord supérieur ne peux donc pas descendre sur le titre, ... nous allons monter le titre sur le bord supérieur.

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

Encore une fois, nous pouvons jouer sur la position du titre, en changeant la valeur appliqué à la définition top.

Puis nous ajoutons un fond à notre titre, avec un peu d'espace à gauche et à droite, afin que le trait du bord ne traverse plus notre titre

.boite {border:solid 1px #AEAEAE;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

enfin, nous plaçons notre titre au centre

.boite {border:solid 1px #AEAEAE; text-align:center;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .contenu {font-family:Arial; font-size:12px; padding:8px 16px 16px;}

vous pouvez bien sur choisir de laisser votre titre à gauche, ou le placer à gauche, en ajoutant un peu de marge du côté où vous souhaitez le placer.

Version évoluée

Simplement nous pouvons faire évoluer notre code pour avoir une version encore plus design, comme voici

Il suffit d'ajouter un bord à notre titre

.boite {border:solid 1px #AEAEAE; text-align:center;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:0 8px; position:relative; top:-8px;}
.boite .titre {font-family:Arial; font-size:14px; color:#666666; display:inline-block; background:#FFFFFF; padding:8px; position:relative; top:-18px; border:solid 1px #AEAEAE;}

une nouvelle fois, une fois l'astuce assimilée, les possibilités de customisation restent nombreuses, et ne dépendent que de votre imagination.