nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

l'apparence du hrmardi 19 octobre 2004

Modifier une balise hr avec les CSS n'est pas si évident que cela, en effet, les différents navigateurs ont chacun une interprétation propre de la balise, par exemple :

Mozilla et Netscape: hr = une ligne de 1px de haut + une bordure de 1px
Internet Explorer : hr = une ligne de 1px de haut
Opéra et Safari : hr = une bordure de 2px

Afin de modifier ne serait ce que la couleur de la ligne sous tous les navigateurs, il faut avoir recours à color (ie), border-color (opéra et safari) et background-color (mozilla).

Pour pouvoir également contrôler la hauteur de la ligne, le plus simple est de supprimer la bordure générée et de stipuler une hauteur fixe (height) qui devient alors la hauteur totale de l'élément.

Une ligne de 1 px rouge, aura donc le style CSS appliqué suivant :
color: red; background-color: red; height: 1px; border: 0;

19/10/2004 17:38Jep site
Pas mal cette petite mise au point... je sens que je vais moins galérer maintenant. Est-ce que par hasard tu saurais s'il y a un moyen de supprimer l'espacement par defaut avant et après les HR sous IE... avec les autres, c'est géré via la propriété margin, mais avec IE mystère !
19/10/2004 18:35nanoum
je n'avais pas pensé à regarder pour les espacements autour des hr, pensant que les margin suffisaient ... apparemment non
je viens de tester, je n'ai pas trouvé pour l'instant
par contre, si margin fonctionne avec mozilla et opéra, chez moi netscape (7.2) ne réagit qu'au line-height auquel il ne faut pas donner de valeur nulle pour que cela fonctionne

je vais regarder ca plus en détail
19/10/2004 20:35nanoum
oups, erreur de frappe, je parlais de netscape 7.02
19/10/2004 22:02piloue
Justement cet après midi je me disais qu'un peu de couleur ferai du bien à mes HR.
Merci pour l'astuce
22/10/2004 10:19sebou san site
ah ba voilà, je comprenais pas pourquoi firefox ne prenais pas en compte la couleur indiqué dans le css (il faut mettre "background-color:")
merci
23/10/2004 23:51Sib site
Hello Nanoum, ton blog va faire exploser mon agrégateur !

Juste deux liens en complément :
http://www.sovavsiti.cz/css/hr.html
http://www.blakems.com/experimental/hr/
24/10/2004 15:00ElMoustiko
Pour faire le lien avec le clear: both; de ton article sur :after et :before, hr est une bonne alternative si l'on doit ajouter une balise suplémentaire, un hr avec clear: both; et visibility: hidden est plus élégant qu'un div vide. C'est vraiment galère à gérer les hr franchement, pourquoi ils font tous un truc différent, non mais c'est vrai quoi !
2/08/2005 18:21meul
moi j'uttilise:
<hr color='#CC0000' size='1'>
mais je n'est pas tester ss safari et opera
2/08/2005 18:23re:meul
on peut aussi modifier sa largeur avec width='12' mais il doit y avoir un equivalent CSS...
2/08/2005 18:34nanoum site
en css pour la largeur tu peux utiliser tout simplement :
width: 12px;
et donner une valeur en px, % ou autre
13/04/2006 13:54Nagirrok site
J'utilise cette méthode qui marche pas mal :
hr {
clear: both;
width: 95%;
border: 0; /* enleve toute bordure */
border-bottom: 1px black solid; /* une seule bordure (sinon firefox met une bordure en haut ET en bas mais pas IE */
height: 1px; /* pour IE */
}
26/04/2006 15:39NoD
Merci beaucoup à tous
15/05/2006 20:34makina-galaxy
Est-ce que tu as trouvé pour l'histoire de l'espacement par défaut sous IE ? La on voit vraiment que c'est une grosse daube, parce qu'il n'y a pas de problème avec Firefox et Opéra.
25/05/2006 16:45MDPI314
Ah mais alors personne n'a trouvé la solution à cette réponse d'espacement... dommage ça m'intéressait aussi de le savoir...
25/05/2006 16:52MDPI314
Bon en fait une solution est donnée sur le Net : englober le <hr> dans une <div>.
la div va bien prendre la largeur de la hr, même si on n'affiche pas la hr et que la ligne séparatrice est jouée par une des bordures de la div. A méditer ...

CODE:
<div style="border-top: 1px solid black;"><hr style="display: none;" /></div>
2/06/2006 20:10sajaris
salut au fait j'ai le meme probleme avec l'espacement de hr avec IE.
mais j'utilise une image( par exemple une ligne horizontale) je le charge avec IMG et je le met dans un div qui le positionne.
2/06/2006 21:09Poiraud site
Bonjour

Quand on tape ---- SPIP trace une ligne horizontale.
Je suis allée voir à spip_style.css pour modifier sa grosseur et sa couleur.
mais je n'ai pas trouvé comment modifier le raccourci lui-même.

je voudrais que les tirets ---- donnent
1) une ligne
2) ceci : <div style="text-align: right;"><a href="">Haut-de-Page</a></div>

cela me ferait donc ceci

----------------------Haut-de-Page

Il m'a été dit (naguère ! ) de faire un filtre
mais je n'ai rien trouvé dans la doc à ce sujet.
- je ne sais pas du tout faire un filtre
- je ne sais pas quel filtre faire
- et si je le savais, je ne sais pas où le placer.

kicétikipeumédé ?

Merci d'avance
2/06/2006 21:21nanoum
@sajaris : utiliser un div ou une image peut remplacer l'effet visuel mais cela n'aura pas le même sens qu'une ligne faite avec une balise hr

@poiraud : si tu as des questions sur spip, je te conseille de t'adresser plutot à des forums de discussion
2/06/2006 22:11Poiraud site
merci
29/08/2006 16:15Yury V. Zaytsev
@nanoum: amusant, hier j'ai du inventer qqchose pour remplacer les <hr /> avec un image. Peut-etre la solution finale (y en a plusieurs, merci Google) t'interesserait ainsi que les visiteurs du blog:

CSS:
<main.css>
#centercontent hr {
height: 1px;
margin: 5px 0 5px 0;
background: url(/img/background-hr.gif) repeat-x;
border: 0; outline: 0;
}
<iehacks.css>
#centercontent hr {
height: 1px;
width: 1px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/background-hr.gif);
}

HTML:
<link rel="stylesheet" type="text/css" href="/css/main.css" />



....

<hr />

-- Yury.
29/08/2006 16:19nanoum
il existe effectivement plusieurs solutions avec des images, surtout lorsque tu ne veux pas avoir un simple trait d'une couleur

par contre, je ne suis pas trop fan des filtres internet explorer ...

tu peux aussi y arriver en utilisant une image de fond et la propriété clip par exemple
29/08/2006 18:36Yury V. Zaytsev
Oui, en fait la solution clip avait ete decouverte recemment, mais elle pose aussi pas mal des problemes (une belle revue des tous les options disponibles ici: http://dhtmldev.com/content/view/13/27/ ). Suis pas le fan des trucs proprietaires MS non plus, mais etant donne que la seule solution "CSS only for IE" qui persistera en IE7 est "conditional includes", je prefere depuis lors de creer un feuille style pour IE separament.

Salut de Nizhny Novgorod

--Yury.

Commentaires momentanément fermés. Merci de votre compréhension.

nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

l'apparence du hrmardi 19 octobre 2004