Surlignement dans une page

**labarre2002** · 06/02/2023, 18h55

Bonsoir

j’intègre la maquette suivante:

Nom : fffaire.jpg
Affichages : 155
Taille : 111,6 Ko

voici mon travail :

Nom : 1.jpg
Affichages : 157
Taille : 194,0 Ko

mon problème est j'ai du avec la barre en dessous du menu

et au dessus du footer.

mon code html :

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
<body>
    <header>
        <div class="s0">
            <div class="gauche">
                <h1>thom-soon</h1>
            </div>
            <nav class="entete">
                <a href="#">portofolio collections</a>
                <a href="#">service list</a>
                <a href="#">contact now</a>
            </nav>
 
        </div>
 
 
 
    </header>
 
  <main class="container">
 
<section class="central">
<div class="titre0">
<div class="first">outdoor</div>
<div class="first">blogger  <span class="italic">passion</span>  </div>
<div class="first">mission</div>
 
 
 
</div>
 
<div class="picture">
 
    <img src="img/villa.jpg" alt="Belle Villa Luxueuse">
</div>
<p class="texte">
    my greatest passion is photographing public places and exploring<br>
 
    beautiful landscopes and fashion.Check my profile on<br>
 
    Unsplash -free photos for download.<br>
 
 
</p>
 
</section>
 
 
 
 
  </main>  
<footer>
    <span class="line"></span>
    <p>copyright &copy;&nbsp;&nbsp;1422&nbsp; &nbsp;studio platform  all right reserved</p>
</footer>
 
</body>
</html>

mon css:

Code css :

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
footer:before{
    content: "";
    width: 100%;
    height:1px;
    background-color: white;
    position: absolute;
    display: block;
    margin: 0 auto;
    }
 
.s0::after{
content: "";
width: 100%;
height:1px;
background-color: white;
position: absolute;
 
}

Pourrais-je avoir des explications ?

Merci.

**NoSmoking** · 07/02/2023, 18h12

Bonjour,
j'aurais tendance à dire : « comme toujours il nous manque des infos ».

Ceci étant pourquoi passer par des pseudo-éléments, les bordures devraient amplement faire l'affaire.

**labarre2002** · 07/02/2023, 21h49

Bonsoir NoSmoking

Sur ma capture d'ecran la barre au dessus du footer n' est pas centré elle deborde en dehors de la page ajoutant une scroll-bar horizontale.

je voudrai ajuster la barre au dessus du footer au centre.

**labarre2002** · 08/02/2023, 19h27

en effet avec les bordures j'obtiens ce que je veux

merci.

**NoSmoking** · 09/02/2023, 10h46

Pourrais-je avoir des explications ?

Dans ton cas le 100% se réfère aux 100% non pas du parent mais de l'élément <html> aucun parent n’étant positionné donc référent.

Il aurait suffit de mettre ton <footer> en position:relative pour que ton pseudo-élément fasse la bonne taille.

De plus, ton <span class="line"></span> sert strictement à rien.

Ton pseudo-élément n'est pas franchement utile.

Une border-top est donc bien largement suffisante et si tu veux l'éloigner il y à le padding qui fait le job.

Surlignement dans une page

CSS

Discussions similaires

Partager

Partager