21 réponses à ce sujet

[goudurisc]

Bonjour,

Je souhaiterais pouvoir insérer un filet horizontal et le répéter dans un texte pour séparer les paragraphes.

Si je place un classique <HR> ça fonctionne mais comment intégrer son formatage dans mes css pour pouvoir le modifier facilement ?

[goudurisc]

Bon, j'ai fait un style filet normal que j'ai appliqué dans le texte en span avec un paragraphe dessus/dessous, ça marche à peu près...

[Eddy.vh]

Bonsoir.
Comment souhaiterais-tu formater ce "hr" ?

[goudurisc]

uniquement dans la largeur de ma zone de texte, graisse 1px, une couleur (chartée), c'est tout...

[Eddy.vh]

Salut.
Pardon de n'avoir suivi ce post plus tôt. ( débordé ).

Voici un exemple de formatage de HR

hr {
    width:50%; /*Largeur en % pour du fluide et en pixels pour du fixe*/
    height:1px; /*Une hauteur qui définira la graisse*/
    background-color:red; /*Un fond de couleur au choix*/
    border:none; /*Si la graisse est de plusieurs pixels pour éviter le bord de bloc*/
    }

Modifié par edfred, 28 July 2010 - 10:25 AM.
Erreur de mise en commentaires, rectification.

[goudurisc]

C'est parfait, merci beaucoup !

[goudurisc]

...et si je peux encore abuser, comment obtenir un pointillé ?

[Eddy.vh]

Salut.
Abuse, abuse

Voici un code à améliorer selon ton envie mais comme cela, il donne un pointillé par petits traits de 1px d'épaisseur et de couleur rouge.

hr {
    width:50%;
    border:none; /*Suppression des bord par défaut de la boite hr*/
    border-bottom:1px dashed red; /* création d'un bord bas.
            Remplacer dashed par dotted pour un petit
            pointillé et choisir la couleur appropriée*/    
}

[goudurisc]

Ok, pour le style des filets, c'est bien rentré mais je pense que la manière de l'appliquer n'est pas correcte.

En effet, pour pouvoir utiliser mon style filet dans mon texte courant, je dois aller dans ma feuille de styles et ajouter un point avant "hr" mais du coup, "hr" devient un simple nom de style et non plus une fonction et pourrait se nommer aussi bien ".filet".

Actuellement, pour placer un filet, je vais dans mon texte courant, je fais un retour (paragraphe) et j'applique le style .hr
Même si je ne maîtrise pas vraiment les marges au dessus et au dessous, ça fonctionne.

je suis à côté de la plaque ?

[Eddy.vh]

Le <hr /> se place entre deux paragraphes et est une balise de type bloc.

Exemple :

<p>Voici un hr stylé par la CSS fournie plus haut</p>
<hr />
<p>Ceci est un nouveau paragraphe</p>
<hr />
<p>Et celui-ci aussi</p>

Il ne faut pas ajouter de point devant hr dans la CSS sous peine de devoir lui donner une classe dans le html mais alors tu formateras TOUS les hr de tes pages influencées par ta CSS

Si tu as besoin de hr classique ailleurs dans ton html alors tu peux appliquer une classe aux hr concernés par le pointillé comme l'exemple ci dessous :

hr.pointille { /*ou .pointille, comme tu veux*/
width:50%;
border:none;
border-bottom:1px dashed red;
}

et dans le html tu indiqueras la classe aux hr à formater de la manière suivante :

<p>Bonjour le hr suivant est non formaté</p>
<hr />
<p>Et le hr ci-dessous est formaté pointillé.</p>
<hr class="pointille" />

Je t'ai fait un petit exemple simple dans un fichier html avec CSS dans le fichier, à toi de les séparer. Étudie-le tu comprendras vite, c'est tout simple.

Fichier(s) joint(s)

•  essai.html   576 octets   113 téléchargement(s)

[goudurisc]

Evidemment, avec bon exemple, la lumière s'allume d'un coup ! J'ai donc bien compris l'essentiel et c'est forcément préférable à ma méthode bancale.
Par contre, dans ton exemple avec pointillé, il y a juste au dessus (collé) un deuxième filet standard...

[Eddy.vh]

Sous quel navigateur ?

[goudurisc]

Safari

[Eddy.vh]

Goudurisc, le 28 July 2010 - 14:35 PM, dit :

Safari

Internet explorer faisait la même chose, essaye de remplacer le :

border:none;

par :

border:1px solid transparent;

Ça devrait le faire.

[goudurisc]

Pour l'instant, jai

hr.pointille {
margin-top: -20px;
border-bottom: 1px dotted #7A6075;
}

Si j'ajoute : border:1px solid transparent;

hr.pointille {
margin-top: -20px;
border-bottom: 1px dotted #7A6075;
border:1px solid transparent;
}

Ca ne change pas...

[goudurisc]

...et je viens de tester sur Explorer 8, c'est la même chose. Je trouve ça sidérant !

[Eddy.vh]

Normal, tu indiques au navigateur de créer un bord pointillé puis ensuite tu lui dis de virer les bords.
Le traitement d'un fichier CSS se fait comme la lecture normale d'un document, du haut vers le bas.

Il faut d'abord lui dire de virer les bords puis seulement en recréer un pour ton formatage, dans l'ordre où je te l'ai indiqué plus haut. Mais je viens de m'apercevoir que firefox et Chrome ne comprennent pas le 1px slid transparent

Je n'ai pas mon PC sous la main, je dois bosser pour le moment sur un portable qui n'est pas à moi et je ne peux tester comme à l'habitude.

Toutefois je viens de tester ceci et ça affiche correctement sur Firefox, IE et Chrome (les trois navigateurs dispos sur ce portable).

hr.pointille {
        width:50%;
        border:none; /*Compris par firefox et Chrome*/
        border: 1px solid tranparent; /*compris par IE*/
        border-bottom: 1px dashed red; 
}

[goudurisc]

Incroyable, ça fonctionne. Il faut donc mettre solid 0 plutôt que none 0 sur les autres bordure
Trés trés grand merci à toi pour ton soutien et ta ténacité ainsi que ta compétence !!!!

[Eddy.vh]

Attention, il faut que tu mettes les deux attributs sous peine de non compréhension par l'un ou l'autre navigateur.

Retransmets la CSS comme dans mon dernier exemple et tu ne devrais avoir de soucis avec aucun navigateur.

[vovotte]

Bonjour,
j'aimerais savoir comment coller mon filet <hr> à mon titre de niveau <h1> pour que celui ci fasse toute la longueur de la page et non du texte

<h1>mon titre</h1> <hr/> <p>mon paragraphe</p>

Pour le moment, j'ai le résultat desiré mais je veux que mon filet colle le titre

[Eddy.vh]

makasayo, le 08 November 2010 - 18:21 PM, dit :

Bonjour,
j'aimerais savoir comment coller mon filet <hr> à mon titre de niveau <h1> pour que celui ci fasse toute la longueur de la page et non du texte

<h1>mon titre</h1> <hr/> <p>mon paragraphe</p>

Pour le moment, j'ai le résultat desiré mais je veux que mon filet colle le titre

Un border bottom et une marge affinée serait peut-être mieux.

[vovotte]

En effet, c'est ce qu'il me fallait. Merci. J'avais oublié le border bottom !!!