[CSS] Bar blanche autour de ma bar NAV.

Sujet résolu

9 avril 2021 à 16:24:34

Bonjour,Bonsoir

J'ai un problème avec ma bar NAV, je débute dans l'HTML / CSS et je ne comprend pas pourquoi ma bar nav ne prend pas toutes la taille de page.

J'ai déjà essayer les margin : 0; paddind : 0; ou encore width: 100% ou 95 %; mais rien n'as faire je me retrouve toujours avec ça...

CODE :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Acceuil</title>
  <link rel="stylesheet" href="cvcss.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="script.js"></script>
</head>
<nav>
    <div class="navbar">
        <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Acceuil</a>
        <a href="#"><i class="fa fa-fw fa-user"></i> Présentation</a>
        <a href="#"><i class="fa fa-fw fa-search"></i> Localisation</a>
        <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
    </div>
</nav>
<body>

</body>
</html>

CSS :

nav{
    width: 100%;
    margin: 0;
    padding: 0;
}
.navbar {
    background-color: rgb(144, 199, 199);
    overflow: auto;
    border: none;
  }
  

  .navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 3em;
    margin: 0;
  }
  

  .navbar a:hover {
    background-color: #a75a5a;
  }
  

  .active {
    background-color: #a75a5a;
  }
  

  @media screen and (min-width: 340px) {
    .navbar a {
      float:none;
      display: block;
    }
  }

RENDU :

-
Edité par SKO_ 10 avril 2021 à 10:31:20

Nyut

9 avril 2021 à 16:43:58

Bonjour,

Met un margin:0 a ton body

Je viens de voir ton code est en dehors du body

-
Edité par Nyut 9 avril 2021 à 16:44:47

arf !!!

SKO_

9 avril 2021 à 17:52:15

Oui j'ai déjà essayez c'est pour ça qu'il y a

nav{
    width: 100%;
    margin: 0;
    padding: 0;
}

de base c'étais body j'ai modif par nav mais tjr rien :/

Lucky13

10 avril 2021 à 10:33:14

Hello,

Juste pour te dire que c'est Accueil et non Acceuil

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

SKO_

10 avril 2021 à 11:37:45

Lucky13 a écrit:

Hello,

Juste pour te dire que c'est Accueil et non Acceuil

Avoir une notif sur un poste qui me prend la tête pour voir se genre de message... autant t'aurais donner une piste de réflexion pour mon problème mais la t'es jute venu faire l'enfant.

phil83

10 avril 2021 à 11:40:18

Et si tu enlèves ton padding:12px ?

SKO_

10 avril 2021 à 11:52:10

phil83 a écrit:

Et si tu enlèves ton padding:12px ?

J'ai déjà essayer il permet de mettre de la séparation entre les lignes mais ça ne change pas les bars blanche autour :/

Dommage

phil83

10 avril 2021 à 12:08:56

Essaie de passer un border:1px solid red dans ta class .navbar pour voir si ta marge blanche est dans ton div ou a l'extérieur.

Si elle reste à l'extérieur, tente de passer un width:100%; dans ton .navbar

SKO_

10 avril 2021 à 12:17:30

phil83 a écrit:

Essaie de passer un border:1px solid red dans ta class .navbar pour voir si ta marge blanche est dans ton div ou a l'extérieur.

Si elle reste à l'extérieur, tente de passer un width:100%; dans ton .navbar

Alors c'est régler il manquer un Body margin:0 . Juste une question je fait du mobile firts et en gros j'effectuer des test mais rien ne vas quand je met une valeur dans le media screen (min-width 640px) rien ne se change au 640 px donc ça m'énerve et quand je regarde le mode dev je voie ça :

-
Edité par SKO_ 10 avril 2021 à 13:04:51