Placer un titre dans une barre de séparation

Comme pour la balise legend dans un fieldset, on place un texte sur une règle de séparation et le fond sous le texte est effacé.

Cela permet de séparer deux sections dans une page, en minimisant l'utilisation de l'espace.

Compatibilité: IE6+, Chrome, Firefox, Safari.

Le principe consiste à placer un calque avec le texte à l'intérieur d'un autre, donner un fond sombre au conteneur et réduire sa hauteur pour afficher un trait, donner un fond blanc au calque intérieur et le décaler pour qu'il apparaisse dans le conteneur.

Démonstration:

Code HTML:

<div class="bartext"><div>Salut le Monde!</div></div>

Code CSS:

.bartext {
  height:8px;
  width:100%;
  padding:0px;
  background:#333;
  overflow:visible;
  position:relative;
  margin-top:24px;
}
.bartext div {
  color:#333;
  background-color:#FFFFFF;
  top:-5px;
  margin-left:100px;
  padding: 0 8px 8px 8px;
  display:inline;
  position:absolute;
}

Il est possible de changer la couleur de la barre et celle du texte, l'épaisseur de la barre avec la propriété height, la position du texte qui est donnée par la propriété margin-left.
Si on veut centrer le texte, on utilisera text-align: center dans la règle .bartext et on supprimera margin-left dans .bartext div.

Arrondir les extrémités de la barre

Il suffit d'ajouter une propriété border-radius dans la règle .bartext.

border-radius:8px;

Voici le résultat:

Ou lui donner une extrémité en biseau

L'exemple ci-dessous est en pur CSS:

Cet effet est complexe à réaliser en CSS pur, et il faut rajouter une balise pour l'obtenir.

<div class="slantdiv"></div>
<div class="barslant"><div>Salut le Monde!</div>
<br>

Voici le code CSS:

.barslant {
  padding:0px;
  overflow:visible;
  position:relative;
  background:#333;
  height:0;  
  line-height:16px;  
  margin-top:0;
  width:90%;		
}
.barslant div {
  background-color:#FFFFFF;
  margin-left:100px;
  padding:0 8px 8px 8px;
  display:inline;
  position:absolute;
  color:#000;
  top:-12px;
}
.slantdiv {
  width:96%;
  height:0px;
  border-bottom:8px solid #333;
  border-right:8px solid white;
  margin-top:24px;
}

Une limitation dans la méthode utilisée - quelle que soit la forme de la barre - est qu'il faut que le fond de la page soit blanc, ou plus précisément que le fond du texte soit de la même couleur que celui de la page.

Si l'on veut utiliser ce widget sur un fond de page qui soit une image, une autre solution est présentée sur jsfiddle. Elle a aussi l'avantage qu'une seule balise est nécessaire dans le code HTML. Mais elle a aussi ses inconvénients. Positionner le texte du coté gauche ou droit est presque impossible. Personnaliser la barre comme on l'a fait ci-dessus n'est pas non plus envisageable. La compatibilité est aussi restreinte à IE à partir de la version 8.

En page d'accueil vous trouverez d'autres astuces pour créer des effets graphiques sans images.

Licence: Vous êtes libre d'utiliser ce code pour la présentation de vos pages, sans restriction. Ne réutilisez pas le contenu de cette page ou le code comme sujet d'autres tutoriels en ligne. Cette licence s'applique à tout le contenu du site.