Partage
  • Partager sur Facebook
  • Partager sur Twitter

comment créer une ligne de séparation

Sujet résolu
    12 mars 2018 à 0:33:44

    Bonjour,

    Je me permets de poster ce sujet car je bloque depuis quelques heures déjà, et ce sais pas si ce n'arrive pas à pbtenir ce que je veux car le problème est CSS ou HTML. (je pense que c'est css mais bon, j'ai besoin d'aide là)

    Ma question est, comment créer une ligne de séparation entre mes deux paragraphes ci dessous ? (j'aimerais aussi par la suite diminuer l'espacement entre le titre H3 et le paragraphe mais, cela est secondaire....

    Je post en PJ code HTML + CSS

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>OpenClassRooms</title>
            <link rel="stylesheet" href="ocr.css" />
            <link rel="stylesheet" href="images/">
        </head>
            <!-- ICI ENTETE DE LA PAGE -->
        <body>
                    <!-- ICI LE CORPS DE LA PAGE -->
            <div class="stories">
                <div class="Marilyn">
            <h3>Titre1</h3>
                    <p class="btra">Poolside<br>
                ... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...</p>
            
            <h3>Titre2</h3>
            <p class ="bn">Creepin<br>
                ... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...... (beaucoup de texte) ...</p>
                </div>
            </div>    
                    
    </body>
    </html>
    body {background-color: beige} /*couleur d'arriére plan du corps de page*/
    
    .stories {width:850px; /*largeur de page*/
    	    height:auto; /*hauteur de page*/
    	    background:#D3D3D3;
            border-radius:10px; /*arrondi du cadre*/
            border: 7px solid black;/*affecte un style et une couleure à bordure de div*/;
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 18px;
            padding: 15px; /*marge interieur - entre texte et cadre*/
            margin: auto; /*marge extérieur - entre l'extérieur et le cadre*/
    }
    
    h3 {color:darkblue
    }
    
    .btra {
        color:#8B008B;
             /*ligne séparation de div*/
            
    }
    
    .bn {color: #B22222
    /*ligne séparation de div*/   
    }

    conteneur paragraphes


    Par avance merci pour votre aide la communauté

    • Partager sur Facebook
    • Partager sur Twitter
      12 mars 2018 à 11:05:44

      Hello,

      Il existe une balise pour créer une ligne de séparation, c'est la balise <hr>.

      Ensuite, pour l'espacement entre le titre et le paragraphe, réduis le margin-bottom de ton h3 et le margin-top de ton paragraphe.

      PS : Tu as oublié des ; à certains endroits dans ton CSS.

      • Partager sur Facebook
      • Partager sur Twitter
        12 mars 2018 à 11:46:53

        Merci pour ton retour MrChampy

        Mais la balise <hr> tu la poses sur quel attribut sur la .class, la <div> ou l'attribut <p> ?

        Merci

        //////////////////////////////////

        Ah non c'est bon laisse j'ai trouvé. 

        C'est une balise html pas css. 

        Il ne me reste plus qu'a appliquer un style dessus maintenant. 

        -
        Edité par jelmouss 12 mars 2018 à 11:51:35

        • Partager sur Facebook
        • Partager sur Twitter

        comment créer une ligne de séparation

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown