Bordure à enlever

Sujet résolu

6 avril 2021 à 8:56:38

Bonjour,

il y a entre la section et le bord de la page une marge que je n'arrive pas à enlever. Pouvez vous m'orienter svp ?

<!DOCTYPE html>
    <html>
<head style="border: black 2px solid;">
    <title>Mon Blog de Vacances</title>
    <link rel="stylesheet" href="sitecomplet.css" />
</head>
<body style="border: 1px solid red;">
    <!--barre laterale gauche-->
    <div class="gauchebarre">
        <section id="sidebar">
                <nav>
                    <ul>
                        <li><a href="#intro">Welcome</a></li>
                        <li><a href="#one">Who we are</a></li>
                        <li><a href="#two">What we do</a></li>
                    </ul>
                </nav>
        </section>
    </div>


</body>
</html>

ul{
    list-style: none;

}

.gauchebarre{
    background-color: hsl(257, 42%, 34%);
    width: 23%;
    height: 100%;
    position: fixed;
    margin-top: 0;
    margin-left: 0;
    padding-top: 0;
    padding-left: 0;
}

a{
    text-decoration: none;
    color: white;
}

nav{
    height: auto;
}

.sidebar{
    margin-left: 18em;
    margin: 0px;
    padding: 0px;
}

-
Edité par CyrilNkl 6 avril 2021 à 15:10:44

-RR-

6 avril 2021 à 9:18:45

Bonjour,

tu peux utiliser l'inspecteur d'éléments de ton navigateur pour l'identifier.

Le problème vient probablement du padding appliqué par défaut sur les ul.

Bon dev !

PS: quand tu veux partager du code sur le forum, il faut que tu le fasse à l'aide du bouton adapté : "</>" et non en image.

Lamecarlate

6 avril 2021 à 10:41:41 - Message modéré pour le motif suivant : La demande de l'équipe de modération a été honorée.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

CyrilNkl

6 avril 2021 à 12:24:53

Merci pour votre réponse, je ferai plus attention à partir de maintenant et je vais essayer de regarder pour le padding.

En faisant inspecter l'élément, j'obtiens margin : 0; padding : 0 et border : 0.

-RR- a écrit:

Bonjour,

tu peux utiliser l'inspecteur d'éléments de ton navigateur pour l'identifier.

Le problème vient probablement du padding appliqué par défaut sur les ul.

Bon dev !

PS: quand tu veux partager du code sur le forum, il faut que tu le fasse à l'aide du bouton adapté : "</>" et non en image.

-
Edité par CyrilNkl 6 avril 2021 à 12:45:10

AbcAbc6

6 avril 2021 à 12:48:19

Bonjour, à noter que la balise <il> n'existe pas, c'est <li>. Passer votre code au validateur pour voir et corriger ce genre d'erreur de syntaxe. => https://validator.w3.org/

CyrilNkl

6 avril 2021 à 12:55:03

En faisant inspecter l'élément, j'obtiens margin : 0; padding : 0 et border : 0.

-RR- a écrit:

Bonjour,

tu peux utiliser l'inspecteur d'éléments de ton navigateur pour l'identifier.

Le problème vient probablement du padding appliqué par défaut sur les ul.

Bon dev !

PS: quand tu veux partager du code sur le forum, il faut que tu le fasse à l'aide du bouton adapté : "</>" et non en image.

En faisant inspecter l'élément, j'obtiens margin : 0; padding : 0 et border : 0

AbcAbc6

6 avril 2021 à 13:00:45

Merci de retirer les images de code et de les remplacer par du texte (votre code corriger) comme le recommande ma collègue Lamecarlate. Votre code n'est pas testable, on ne sais rien faire avec des images de codes.

La modération

Liens conseillés

Règles générales du forum

Sur quel élément avez vous regardez?

Sur le <ul>? ou sur un autre?

CyrilNkl

6 avril 2021 à 14:24:46

J'ai refait le code comme vous m'avez dit.

En regardant bien, j'ai trouvé qu'il y avait une marge de 9 sur le div

AbcAbc6 a écrit:

Merci de retirer les images de code et de les remplacer par du texte (votre code corriger) comme le recommande ma collègue Lamecarlate. Votre code n'est pas testable, on ne sais rien faire avec des images de codes.

La modération

Liens conseillés

Règles générales du forum

Sur quel élément avez vous regardez?

Sur le <ul>? ou sur un autre?

-
Edité par CyrilNkl 6 avril 2021 à 15:09:12

AbcAbc6

6 avril 2021 à 15:43:02

Re, sur le <div>?

Par contre le body à une marge de 4px par défaut et le <ul> à un padding de 40px à gauche. Donc pour coller le texte au bord du navigateur reset les marges par défaut de ces éléments.

            body {
                margin : 0;
            }
            ul {
                padding: 0;margin : 0;
            }

Je conseillerais de laisser les espacements sur le <ul> pour plus de lisibilité.

CyrilNkl

6 avril 2021 à 16:38:04

Vous aviez raison, je vous remercie vous avez résolu mon problème.

AbcAbc6 a écrit:

Re, sur le <div>?

Par contre le body à une marge de 4px par défaut et le <ul> à un padding de 40px à gauche. Donc pour coller le texte au bord du navigateur reset les marges par défaut de ces éléments.
            body {
                margin : 0;
            }
            ul {
                padding: 0;margin : 0;
            }
Je conseillerais de laisser les espacements sur le <ul> pour plus de lisibilité.

-
Edité par CyrilNkl 6 avril 2021 à 16:38:18