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.
Exemple 1 (déconseillé) :
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;).
Exemple 2 (conseillé) :
<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 :
Exemple 3 :
On appelle l’image avec un background transparent, en précisant ses dimensions en
widthetheight, 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 :
Exemple 4 (final) :
1. définissons ainsi le style (dans une feuille de style externe) :
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) :
3. 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
# Le 27 septembre 2005 à 17:13, par Mortimer
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
# Le 18 février 2006 à 01:36, par G . G.
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.
# Le 10 septembre 2007 à 18:39, par avril
ce petit mot d’encouragement...bravo, très utile. je bouquemarque !
# Le 17 avril 2008 à 19:38, par Virginie
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
# Le 18 avril 2008 à 18:04, par Romy Duhem-Verdière
Virginie : vérifier l’adresse de l’image ?
# Le 7 septembre 2009 à 15:01, par Cédric
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 !
# Le 1er novembre 2009 à 07:34, par Mars
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 çà.
Un message, un commentaire ?
Suivre les commentaires :
| 