marge 0 impossible en-tête et bandeau

11 juin 2018 à 20:39:50

Bonjour,

je tente de debugger un collègue où je bloque moi-aussi (débutant). Le problème est que je n'arrive pas à avoir un bandeau de navigation "collé" au header avec une image de fond hormis de mettre une marge négative mais je ne comprends pas pourquoi...

En inspectant, il semblerait que l'image en background est plus petite en hauteur et laisse donc un effet de couleur de fond...et pourtant l'image semble bien coorespondre...

Pourriez-vois m'aider.

Voici le debut du html et du css :

Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css" />
        <title>FARMINFO</title>
    </head>
   
 <body>
     <!--page complete-->
   
     <div id="bloc_page">
         <header>
             <div id="titre1">
                <div id="logofarminfo">
                    <img src="images/farminfologo.gif">
                    <h1>LE JOURNAL DU MONDE DE L'ELEVAGE</h1>
                </div>
                <div id="logodroite">
                     <img src="images/explofondnu.gif">
                </div>
             </div>
        </header>
        <nav><!-- bandeau de navigation -->
                <ul id= "nav"><!-- le id n'est pas necessaire et fait doublon -->
                       <li><a href="actualites">Actualités</a></li>
                       <li><a href="paroledeleveur">Parole d'éleveur</a></li>
                       <li><a href="vetinfo">Vetinfo</a></li>
                       <li><a href="gastronomie">Gastronomie</a></li>
                       <li><a href="rubriques">Rubrique</a></li>
                       <li><a href="annonces">Annonces</a></li>
                       <li><a href="tutoriels">Tutoriels</a></li>
               </ul>
        </nav>

CSS:

@font-face {
    font-family: 'blackswordregular';
    src: url('polices/blacksword-webfont.woff2') format('woff2'),
         url('polices/blacksword-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'squared_displayregular';
    src: url('polices/squared_display-webfont.woff2') format('woff2'),
         url('polices/squared_display-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'brandishregular';
    src: url('polices/brandish_regular-webfont.woff2') format('woff2'),
         url('polices/brandish_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }
@font-face{
    font-family:'Ballparkweiner';
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
    url('polices/ballpark.woff') format('woff'),
    url('polices/ballpark.ttf') format('truetype'),
    url('polices/ballpark.svg#BallparkWeiner') format('svg');
         }

@font-face{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
    url('polices/dayrom.woff') format('woff'),
    url('polices/dayrom.ttf') format('truetype'),
    url('polices/dayrom.svg#Dayrom') format('svg');
    }


body{
    
     background-image: url(images/fondnu.jpg);
}

#bloc_page{
    
    width:1024px;
    margin:auto;
    
}

header {
    
    background-image: url(images/headerbleu.jpg);
    background-size: 1024px;
    background-repeat: no-repeat ;
    }

#titre1{
    
    display:flex;
    justify-content: space-between;
}

#titre1 h1{
    
    font-family: 'squared_displayregular', 'dayrom',  sans-serif;
    font-size: 2.8em;
    margin-left: 10px;
}
nav{
    font-family: 'arial', sans-serif;
    background-color:  cadetblue;
    font-size: 1.2em;
    font-weight: bold;
}

nav ul{ 
    display: flex;
    justify-content:space-between;
    padding-left:0px;

  }
nav li{
    list-style: none;
    
}

nav a{
    text-decoration:none;
    
}

L'image à la base fait 1400*250px

Merci pour votre aide.

-
Edité par sebastienhadj 11 juin 2018 à 20:40:55

philiga

11 juin 2018 à 21:16:24

Bonsoir,

C'est à cause des marges par défaut dont est dotée l'ul ; la solution est donc:

nav ul{
  margin:0;
}

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

12 juin 2018 à 13:43:38

j'essaie mais cela ne semble pas fonctionner...

philiga

12 juin 2018 à 15:07:52

Même en actualisant la page (avec CTRL-F5 pour vider le cache)?

Pourtant, cela fonctionne bien :

http://jsbin.com/vaqimeyipi/1/edit?html,css,output

( S'il ne s'agit que de recoller le menu au header ; mais, tes explications n'étant pas très claires et si le but est de n'avoir aucune marge, est-ce que margin:0; sur body répond mieux à ton attente ?)

-
Edité par philiga 12 juin 2018 à 15:09:56

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

12 juin 2018 à 18:32:49

Regarde avec ça:

header {
    
    background-image: url(https://picsum.photos/1240/250/?random);

Ce sont les mêmes dimensions que mon image et cela me laisse perplexe car si je change le lien ci-dessus avec 900/215, ça fonctionne...et pareil avec une image moins haute en local...

Merci de ton aide @philiga.

philiga

12 juin 2018 à 19:02:42

Je ne vois pas de problème chez moi ; peux-tu montrer une image de ton souci ?

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

12 juin 2018 à 19:16:28

Avec ce code là:

header {
     
    background-image: url(https://picsum.photos/1240/250/?random);

cela donne ça:

philiga

12 juin 2018 à 19:25:31

Pas chez moi ; tu n'as pas fait sauter le

nav ul{margin:0;}

au passage ?

Si ça persiste même avec ce code, donne un lien jsbin avec le problème (share/snapshot).

-
Edité par philiga 12 juin 2018 à 19:27:14

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

12 juin 2018 à 20:27:17

effectivement tu as raison ça marche sur jsbin, je pense que ça vient de chrome car j'ai testé sur ie et firefox et tu as raison ça marche très bien...bizarre

philiga

12 juin 2018 à 20:43:56

Je suis sur Chrome et pas de souci ; mais ça peut en effet être un problème de cache non vidé.

Tu peux tenter Shift-CTRL-SUPP, méthode radicale ;

Moins brutal: Tente ceci: (extrait de : https://www.justgeek.fr/vider-cache-site-web-chrome-51089/ )

si vous souhaitez vider le cache d’un site web en particulier, Chrome ne sera pas en mesure de le faire. Même le raccourci clavier CTRL + F5 ne semble pas faire l’affaire, Chrome exécute un rechargement dur de la page en revanche, le cache reste intact.

Alors, pour supprimer le cache d’un site web en particulier sans supprimer celui des autres, vous devez obligatoirement passer par les outils de développement de Chrome. N’ayez pas peur, c’est très simple, vous verrez.

Comment supprimer le cache d’un seul site web dans Chrome ?

Ouvrez dans un premier temps le navigateur Chrome. Visitez ensuite le site Web sur lequel vous voulez vider le cache. Utilisez le raccourci clavier CTRL + i pour ouvrir les outils de développement de Chrome. Une fois la console développeur ouverte, faites un clic droit sur le bouton de rafraîchissement à côté de la barre d’adresse.

Vous verrez alors 3 options dans un menu contextuel : Actualisation normale, Actualisation forcée ou Vider le cache et effectuer une actualisation forcée. La troisième option est celle qui nous intéresse. Sélectionnez-la pour effacer le cache du site Web sur lequel vous vous trouvez.

Notez qu’il est indispensable d’ouvrir les outils de développement pour effectuer cette action. Si vous effectuez un clic droit sur le bouton de rafraîchissement sans que la console développeur ne soit ouverte, vous ne verrez pas le menu contextuel.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

13 juin 2018 à 0:08:50

Toujours pareil...c'est très bizarre surtout que ça fonctionne sur d'autres navigateurs et chez toi.

philiga

13 juin 2018 à 9:13:19

Bizarre, bizarre...

Tu es sûr que tu testes bien le même code sur chaque navigateur et pas une version locale sur Chrome (sans nav ul {margin:0;}) et celle sur jsbin avec les autres?

Sinon, si tu appliques margin:0!important; sur l'ul via l'inspecteur de Chrome, est-ce que ça corrige le problème?

Voir peut-être à désactiver les extensions de Chrome...

Dernière solution, asperger l'écran d'eau bénite...

-
Edité par philiga 13 juin 2018 à 9:14:05

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

sebastienhadj

13 juin 2018 à 9:54:59

`avec 900/250 et bien ça` `fonctio``nne,` `le 1240 ne semble pas lui plaire ou alors je dois passer à 1240/270...`

Bien écoute c'est très bizarre , il ne me reste quel'eau bénite je crois :-)

-
Edité par sebastienhadj 13 juin 2018 à 9:56:49