Forums Développement Multimédia

Aller au contenu

Filet de séparation formaté

CODE HTML CSS

21 réponses à ce sujet

#1 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 06 July 2010 - 13:30 PM

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 ? ;-)

#2 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 06 July 2010 - 14:39 PM

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...

#3 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 06 July 2010 - 22:17 PM

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

#4 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 06 July 2010 - 22:42 PM

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

#5 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 27 July 2010 - 07:27 AM

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 dfinira 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.


#6 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 27 July 2010 - 10:22 AM

C'est parfait, merci beaucoup !

#7 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 00:02 AM

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

#8 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 July 2010 - 10:14 AM

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 dfaut de la boite hr*/
    border-bottom:1px dashed red; /* cration d'un bord bas.
            Remplacer dashed par dotted pour un petit
            pointill et choisir la couleur approprie*/
   
}


#9 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 10:40 AM

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 ? ;)

#10 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 July 2010 - 12:37 PM

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)

  • Fichier joint  essai.html   576 octets   111 téléchargement(s)


#11 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 13:30 PM

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...

#12 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 July 2010 - 14:32 PM

Sous quel navigateur ?

#13 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 14:35 PM

Safari

#14 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 28 July 2010 - 15:44 PM

Voir le messageGoudurisc, 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.

#15 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 16:06 PM

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... ;)

#16 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 28 July 2010 - 16:35 PM

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

#17 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 29 July 2010 - 06:30 AM

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; 
}


#18 goudurisc

  • Members
  • PipPipPipPipPipPipPipPip
  • 674 messages

Posté 29 July 2010 - 10:24 AM

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 !!!! ;)

#19 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 29 July 2010 - 11:43 AM

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.

#20 vovotte

    Ceinture Orange

  • Members
  • PipPipPip
  • 35 messages

Posté 08 November 2010 - 18:21 PM

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

#21 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 09 November 2010 - 13:39 PM

Voir le messagemakasayo, 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.

#22 vovotte

    Ceinture Orange

  • Members
  • PipPipPip
  • 35 messages

Posté 09 November 2010 - 14:36 PM

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



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP