Créer une ligne de séparation

**jelmouss** · 12/03/2018, 11h37

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 : 1945
Taille : 55,9 Ko

Par avance merci pour votre aide la communauté

**danielhagnoul** · 12/03/2018, 11h43

Tag HTML <hr>, voir : https://developer.mozilla.org/fr/doc...TML/Element/hr

Invité · 12/03/2018, 19h26

Bonjour,

Tu as déterré un code préhistorique ??

**JefReb** · 13/03/2018, 09h24

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) p  {
        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>

Créer une ligne de séparation

Tableau en CSS

Discussions similaires

Partager

Partager