28216 sujets

CSS et mise en forme, CSS3

Ligne horizontale pointillée

Hello Smiley smile

Je me demandes qu'elle serait la meilleure solution pour styler un élément (lequel ?) réutilisable qui serait une ligne horizontale pointillé (border-bottom 1px dashed grey).

Pour un hr ce n'est pas possible...

"bêtement" un div ?
Si cette séparation est "logique" c'est à dire que ce n'est pas purement visuel, il convient d'utiliser <hr /> et pour appliquer ce style (assez périlleux à cause du foutoire de style des <hr />), le mieux reste de mettre ce <hr /> dans une division et de lui appliquer le style (à la div) en masquant le <hr />

Si c'est une séparation purement visuelle, border-bottom ou border-top sur l'élément qui précède ou qui suit la dite séparation et le tour est joué.

<edti>Cherche pas Igor, je t'ai grillé Smiley biggol </edit>
Modifié par Olivier (16 Jul 2005 - 13:32)
Tu peux faire ceci en Css il me semble :

hr {
	height: none;
	border: none;
	border-top: 1px dashed grey;
}



Voila, bonne après-midi.
Gaylord.P

<Edit>Apparemment je suis complètement à côté de la plaque Smiley biggol </Edit>
Modifié par Olivier (16 Jul 2005 - 13:30)
Gaylord.P a écrit :

<Edit>Apparemment je suis complètement à côté de la plaque Smiley biggol </Edit>


Nan, pas tout à fait Smiley cligne
En fait, les <hr /> c'est une galère à styler, et encore plus quand on veut pareil sous les différents navigateur. Et pour plus de souplesse et de faciliter, il vaut mieux utiliser un <div> supplémentaire et masquer le <hr /> bidouille bidouille quand tu nous tiens Smiley langue
Gaylord.P a écrit :
<Edit>Apparemment je suis complètement à côté de la plaque biggol </Edit>

Pour compléter ce que dis Olivier, tu peux lire cet article sur nanoum.net: l'apparence du hr
Bonjour,

Tiens, je vais dire une "horreur" :

Une règle horizontale en image <img src="..." alt="Nouvelle section">

- présentation à volonté
- accessibilité parfaite
- interopérabilité nickel, sans hacks ni bidouilles
- Sémantique... Ah, la sémantique ! bah, bonne aussi, la sémantique assurée par l'attribut alt Smiley lol

<edit>provocation ? Pas tout à fait</>
Modifié par Laurent Denis (16 Jul 2005 - 13:38)
Merci bien, je ne savais même pas que tous les navigateurs ne l'interprétait pas le même façon, je vais donc revoir de suite quelques lignes de mon site Smiley smile

Merci bien
& Smiley biggthumpup
Bonne journée Smiley smile
Laurent >> le problème c'est que ce n'est pas facilement redimensionnable en largeur...

c'eut été du svg Smiley langue
Bonjour,
Tu peux mettre une image d'arrière plan dans ton hr. Par exemple un rectangle de 20px X 5px divisé en en largeur par deux plages dcouleur différentes ( ou une moitié transparente ) comme celle ci : upload/579-dashed.gif Ensuite, important, il faut définir une hauteur à ton hr.
----------------- CSS --------------------
hr.dashed {
background: url("dashed.gif");
height: 2px;
width: 80%;
border: 0; /* border et color sont à zéro, c'est une indication importante */
color: 0;
}
----------------- HTML --------------------
<hr class="dashed" /> <!-- une superbe séparation en pointillés. -->
color ne peut pas prendre la valeur 0. C'est une typo ? Tu pensais à inherit, peut-être ?
Modifié par Laurent Denis (16 Jul 2005 - 14:28)
C'est parce que le border de IE-Mac est à la fois border et color. Quant tu élimines la bordure il en reste encore une qui, comme le texte est modifiable par l'attribut color (il faut d'ailleurs peut-être, plutôt que zéro, indiquer none ou transparent ?), C'est bizarre, mais c'est comme ça.
Laurent Denis a écrit :
D'accord, j'aurais appris quelque-chose sur IEMac Smiley smile

Mais c'est affreeeeeusement invalide Smiley rolleyes
Et encore t'as rien vu, par exemple clear-both est à la fois clear-both & clear-left... Donc on ne peut pas l'utiliser sans tout casser.
Pourquoi pas en partant de l'idée de Laurent quelque chose de ce genre ? 
<img src="pixelTransparent.gif" alt="Nouvelle Section" class="nouvelleSection" />

img.nouvelleSection {
  margin : auto;
  width : 80%;
  height : 5px;
  background : none url("pointilles.gif") repeat-x;
}

Avec tous les bons points soulevés par Laurent + le "redimensionnable à souhait". Alors par contre je ne sais pas si le pixelTransparent.gif est encore acceptable dans vos contrées (il me parait adapté à ce cas) Smiley cligne
La barre pointillée ci dessous est une balise hr avec en arrière plan l'image que j'ai mise au dessus. Il n'y a aucun inconvénient à ce qu'une des deux couleurs soit transparente.
upload/579-hr.jpg
Par contre pour placer une image dans HR pour le cas d'IE-Mac. C'est pas tout à fait comme je l'expliquais plus haut, "le problème color" ( pardon Laurent Denis, ma feuille de style par défaut était loin dans les oubliettes de mon esprit ). Je met une capture d'écran commentée qui sera bien plus claire que mes explications.

upload/579-hrie.jpg
Un post sur Alsacréations traitait de ce sujet : Une image pour hr ?
Modifié par Aureance (16 Jul 2005 - 18:02)
Sujet clos
Aller à