1. #1
    Membre du Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    mai 2014
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mai 2014
    Messages : 62
    Points : 51
    Points
    51

    Par défaut Créer une ligne de séparation

    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
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Open ClassRooms</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>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    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*/}
    Nom : 15208110614543_Capture d’e?cran 2018-03-12 a? 00.30.00.png
Affichages : 77
Taille : 55,9 Ko

    Par avance merci pour votre aide la communauté

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 932
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 932
    Points : 21 647
    Points
    21 647
    Billets dans le blog
    57

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    12 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 12 022
    Points : 24 193
    Points
    24 193

    Par défaut

    Bonjour,

    Tu as déterré un code préhistorique ??
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    515
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 515
    Points : 701
    Points
    701

    Par défaut

    Comme j'ai un peu de temps voici un code plus moderne:
    https://codepen.io/JefReb/pen/BroGVq

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    body {
            background-color: beige
    }
    article {
            width: 850px;
            height: auto;
            background: #D3D3D3;
            border-radius: 10px;
            border: 7px solid black;
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 18px;
            padding: 15px;
            margin: auto;
    }
    article h3 {
            color: darkblue
    }
    article > div:first-type p      {
            color:#8B008B;
    }
    article > div:nth-of-type(2){
            color: #B22222;
    }
    article > div:nth-of-type(2)    {
            margin-top:5px;
            border-top:1px solid black;     /* pour faire un trait sans <hr> */
    }
    </style>
    </head>
    <body>
    <section>
      <article class="Marilyn">
        <div>
          <h3>Titre1</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. 
            In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. 
            Aliquam posuere lobortis pede. 
            Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. 
            Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
            Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p>
        </div>
        <div>
          <h3>Titre2</h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. 
            In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. 
            Aliquam posuere lobortis pede. 
            Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. 
            Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
            Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p>
        </div>
      </article>
    </section>
    </body>
    </html>

Discussions similaires

  1. Réponses: 18
    Dernier message: 11/04/2007, 15h18
  2. [Tableaux] Créer une ligne dynamiquement
    Par Lenaick dans le forum Fonctions
    Réponses: 11
    Dernier message: 24/01/2007, 10h58
  3. [Tkinter] Créer une ligne en pointillée
    Par frky dans le forum Tkinter
    Réponses: 5
    Dernier message: 05/01/2006, 19h04
  4. Créer une ligne dans une table (en 1ere position)
    Par lipao17 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 12/12/2005, 11h09
  5. MFC - créer une ligne de séparation
    Par Amphitryon dans le forum MFC
    Réponses: 4
    Dernier message: 25/11/2004, 16h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo