Pour ajouter des lignes horizontales de style séparateur à vos sites Web, une option consiste à ajouter des fichiers image de ces lignes à votre page, mais cela nécessiterait que votre navigateur récupère et charge ces fichiers, ce qui pourrait avoir un effet négatif au performances du site. Vous pouvez également utiliser le CSS propriété border à ajouter limites qui agissent comme des lignes en haut ou en bas d'un élément, créant ainsi votre ligne de séparation.
Ou, mieux encore, utilisez le HTML élément pour la règle horizontale.
L'élément de règle horizontale
L'apparence par défaut des lignes horizontales n'est pas idéale. Pour les rendre plus jolis, ajoutez du CSS pour ajuster l'apparence visuelle de ces éléments afin qu'ils correspondent à l'apparence que vous souhaitez donner à votre site.
Une balise RH de base affiche la manière dont le navigateur souhaite l'afficher. Les navigateurs modernes affichent généralement des balises HR sans style avec une largeur de 100 %, une hauteur de 2 pixels et une bordure 3D en noir pour créer la ligne.
La largeur et la hauteur sont cohérentes entre les navigateurs
Les seuls styles qui sont cohérents entre les navigateurs Web sont le largeur et les styles. Ceux-ci définissent la taille de la ligne. Si vous ne définissez pas la largeur et la hauteur, la largeur par défaut est de 100 % et la hauteur par défaut est de 2 pixels.
Dans cet exemple, la largeur est de 50 pour cent de l'élément parent (notez que ces exemples ci-dessous incluent tous des styles en ligne. Dans un environnement de production, ces styles seraient en fait écrits dans une feuille de style externe pour faciliter la gestion sur toutes vos pages):
style="largeur: 50 % ;">
Et dans cet exemple la hauteur est de 2em:
style="hauteur: 2em ;">
Changer les frontières peut être difficile
Dans les navigateurs modernes, le navigateur construit la ligne en ajustant la bordure. Donc, si vous supprimez la bordure avec la propriété style, la ligne disparaîtra de la page. Comme vous pouvez le voir (enfin, vous ne verrez rien, car les lignes seront invisibles) dans cet exemple:
style="bordure: aucune ;">
L'ajustement de la taille, de la couleur et du style de la bordure rend la ligne différente et a le même effet dans tous les navigateurs modernes. Par exemple, dans cette démonstration, la bordure est rouge, pointillée et large de 1 pixel:
style="border: 1px en pointillé #000;">
Faire une ligne décorative avec une image de fond
Au lieu d'une couleur, définissez une image d'arrière-plan pour votre règle horizontale afin qu'elle ressemble exactement à ce que vous voulez, mais qu'elle s'affiche toujours sémantiquement dans votre balisage. Dans cet exemple, nous avons utilisé une image composée de trois lignes ondulées. En le définissant comme image de fond sans répétition, cela crée une rupture dans le contenu qui ressemble presque à ce que vous voyez dans les livres:
style="hauteur: 20px; arrière-plan: #fff url (aa010307.gif) centre de défilement sans répétition; bordure: aucune ;">
Transformer les éléments RH
Avec CSS3, vous pouvez également rendre vos lignes plus intéressantes. L'élément RH est traditionnellement un horizontal ligne, mais avec la propriété CSS transform, vous pouvez modifier leur apparence. Une transformation préférée sur l'élément RH est de changer la rotation.
Faites pivoter votre élément HR de manière à ce qu'il soit légèrement en diagonale:
h {
-moz-transform: rotation (10 degrés);
-webkit-transform: rotation (10 degrés);
-o-transform: rotation (10deg) ;
-ms-transform: rotation (10 degrés);
transformer: tourner (10deg) ;
}
Ou vous pouvez le faire pivoter pour qu'il soit complètement vertical:
h {
-moz-transform: faire pivoter (90 degrés);
-webkit-transform: rotation (90 degrés);
-o-transformer: faire pivoter (90 degrés);
-ms-transform: faire pivoter (90 degrés);
transformer: faire pivoter (90 degrés);
}
Cette technique fait pivoter la HR en fonction de son emplacement actuel dans le document, vous devrez donc peut-être ajuster le positionnement pour l'obtenir là où vous le souhaitez. Il n'est pas recommandé de l'utiliser pour ajouter des lignes verticales à un dessin, mais c'est un effet intéressant.
Une autre façon d'obtenir des lignes sur vos pages
Une chose que certaines personnes font au lieu d'utiliser l'élément RH est de s'appuyer sur les frontières d'autres éléments. Mais parfois, un RH est beaucoup plus pratique et plus facile à utiliser que d'essayer de définir des frontières. Les problèmes de modèle de boîte de certains navigateurs peuvent rendre la configuration d'une frontière encore plus délicate.