Je me bats en ce moment avec une hr qui me donne du fil à retordre… Pourquoi diable une hr ? Rien de mieux pour poser une séparation entre deux contenus. Mais quelle galère pour la personnaliser en CSS !
HR ? ligne de séparation
Il s’agit d’une balise HTML qui s’écrit : <hr>, sans balise fermante (voir la syntaxe détaillée). Elle n’agit pas sur le contenu mais a une signification en elle-même : c’est l’élément idéal pour signifier une séparation entre deux contenus. Par défaut, la balise hr entraîne la restitution d’une ligne horizontale par le navigateur.
Comment styliser une hr ?
Problème : chaque navigateur interprète très différemment la balise hr, même stylée. Voici un exemple pour s’en convaincre.
Voici comment votre navigateur interprète une balise hr dotée du style suivant : <hr style="height: 3px; color: #839D2D; width: 50%; border: 1px dashed #000;"> c’est-à-dire : une épaisse ligne horizontale de couleur verte, moitié moins large que ce texte, et bordée de pointillés noirs, que voici :
Ce n’est pas forcément très réussi, n’est-ce-pas ? C’est surtout très fantaisiste d’un navigateur à l’autre :
Voyons donc les styles CSS qui permettent de contrôler au mieux l’apparence de la hr :
- Pour en régler la longueur et l’épaisseur :
widthetheight. Spécifiez bien l’épaisseur sinon elle sera différente d’un navigateur à l’autre. - Pour en définir la couleur, utiliser à la fois
background-color(pour Opera, Mozilla, etc.) ETcolor(pour IE) - Evitez
border, tentant, mais qui cause quelques soucis (on préférera doncborder: none;).
<hr style="height: 2px; color: #839D2D; background-color: #839D2D; width: 50%; border: none;"> donnera un résultat moins variable selon les navigateurs :
Remplacer la hr par une image
Remplacée par une image appropriée, la hr sera utilisée à bon escient pour séparer différents éléments (d’un menu vertical par exemple). Pour remplacer la ligne par une image, on utilisera background-image. De cette façon :
On appelle l’image avec un background transparent, en précisant ses dimensions en width et height, sans oublier de supprimer la bordure :
<hr style="background: transparent url(tuto/filaretordre1.gif) no-repeat; width: 350px; height: 10px; border: none;"> affichera ceci :
C’est simple et logique, mais ce n’est pas satisfaisant, notamment sur IE [1]. En attendant une interprétation plus homogène dans les différents navigateurs, la seule solution valable est... d’inclure la hr dans une div dédiée. Ce qui est très agaçant, j’en conviens. Voici comment procéder :
1. définissons ainsi le style (dans une feuille de style externe) :
.separation {
background: transparent url(img/filaretordre2.gif) no-repeat top left;
width: 250px;
height: 87px;
}
.separation hr {
display: none;
}La première définition de style (« .separation ») contrôle l’apparence. La seconde empêche l’affichage de la hr (radical, mais enfin efficace ;o)
2. puis appliquons-lui (dans le code HTML) :
<div class="separation"><hr></div3. voici le résultat, identique quelque soit le navigateur [2] :
Mais alors... pourquoi utiliser hr ?!?
Bonne question ! Puisqu’on s’en débarrasse (via CSS), pourquoi conserver la hr, et ne pas préférer une div seule ? Même si ça complexifie un peu le code, c’est sémantiquement plus correct : n’oubliez pas que dans un navigateur textuel votre hr jouera son rôle de séparateur.
Vos commentaires
1. Le 27 septembre 2005 à 17:13, par Mortimer
En réponse à : > Comment styliser une hr ?
pour la dernière solution, ce qui serait marrant, pour éviter cette div, c’est de faire un simple petit javascript qui passe en revu tous les hr et les remplaces par un div+hr quand il faut (si on sait que le navigateur aime pas les images, etc...).
ainsi, les navigateurs « basiques » qui aime pas le css et le javascript afficheront juste le hr et ne seront pas géné par ce div. Et les navigateurs un peu plus « avancés » traiteraient la chose un peu plus graphiquement.
mais bon, le js n’est peut être pas toujours la solution... j’suis pas expert, juste bidouilleur :D
2. Le 18 février 2006 à 01:36, par G . G.
En réponse à : > Comment styliser une hr ?
Et bien justement, c’est interessant.
Ainsi, ceux qui utilisent IE le feront un peu bosser pour corriger ses lacunes.
Pour le webmestre, c’est un peu de bande passante économisée, sauf si le script Javascript est trop long.
D’ailleurs, il peut-il être conditioné à un navigateur ?
Un script qui chargerait si besoin un autre script ?
La page sursauterait un peu pendant le traitement.... mais que pour ceux qui sont sous IE et déjà habitués aux plantouillages de Windows....
C’est quand même de la bidouille et de la prise de tête pour IE.
Plus on contourne les bugs d’IE, moin les gens en prennet conscience.
3. Le 10 septembre 2007 à 18:39, par avril
En réponse à : Comment styliser une hr ?
ce petit mot d’encouragement...bravo, très utile. je bouquemarque !
4. Le 17 avril 2008 à 19:38, par Virginie
En réponse à : Comment styliser une hr ?
Bonsoir,
Merci pour toutes ces infos pour remplacer la
<hr>par une image.J’ai essayé les deux solutions proposées, exemple 3 et exemple 4 sans y parvenir.
J’ai bien un trait gris qui s’affiche, de la taille demandée mais je n’ai toujours pas l’image à la place.
J’ai testé avec safari, netscape, ie, mozilla.
Y-a-t-il un truc à vérifier ?
Merci de votre aide.
Cordialement.
Virginie
5. Le 18 avril 2008 à 18:04, par Romy Têtue
En réponse à : Comment styliser une hr ?
Virginie : vérifier l’adresse de l’image ?
6. Le 7 septembre 2009 à 15:01, par Cédric
En réponse à : Comment styliser une hr ?
Mervi beaucoup pour ce petit tuto. Je m’arrachais les cheveux pour avoir le même rendu sur IE et Firefox avec mes HR graphique, et la solution 4 fonctionne à merveille !
7. Le 1er novembre 2009 à 07:34, par Mars
En réponse à : Comment styliser une hr ?
Quand on tape un article depuis l’interface utilisateur il suffit de taper 4tirets pour que ce soit ré-interprété comme une hr.
Où se trouve le script qui effectue ce remplacement ? est-ce qu’on peut le modifier pour qu’il remplace par ce qui est décrit à l’exemple 4 ?
Mieux encore, le surcharger sans le toucher en ajoutant dans un fichier supplémentaire (genre mes_fonctions.php) de quoi remplacer les 4 tirets par le code voulu. Je sais pas si ça fait appel à php, jusqu’ici j’ai juste bidouillé des bouts de codes que je récupérais.
En tout cas mercie Romy, ça marche chez moi, il doit rester beaucoup d’autres trucs foireux pour IE mais pas çà.
8. Le 5 octobre 2011 à 15:28, par Codron
En réponse à : Comment styler une hr ?
Très intéressant, merci pour cet article. Je n’aurais pas pensé à pousser si loin la fonction HR. Je vais tester tout cela. Gianni
9. Le 13 juillet 2012 à 17:00, par Romy Têtue
En réponse à : Comment styler une hr ?
Voir aussi :
<hr />, par Raphael, Alsacreations, 200910. Le 4 février 2013 à 21:03, par Jean-Michel
En réponse à : Comment styler une hr ?
Intéressant, surtout le HR avec background
11. Le 30 octobre 2017 à 17:01, par nguirasow
En réponse à : Comment styler une hr ?
Enfin quelque chose qui marche très bien
12. Le 6 janvier 2022 à 02:09, par Rubis
En réponse à : Comment styler une hr ?
Merci beaucoup !!!!
Répondre à cet article
Suivre les commentaires :
| 