Le menu onglet n'est pas a la même taille d'une page a l'autre HTML/CSS [Fermé]

Signaler
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019
-
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019
-
Bonjour,
Je crée un site mais sur la page accueil, la barre noire du menu d'onglets est plus petite que sur les autres pages.
Voici mon code css pour les onglets:
/*Début de la navigation (barres de choix)*/

nav{font-family: 'Century Gothic', 'Source code pro', Verdana, serif;width: 100%;background-color: #424558;}

nav > ul{margin: 0px;padding: 0px;}

nav > ul::after{content: "";display: block;clear: both;}

nav li{list-style-type: none;}

nav > ul > li{float: left;position: relative;}

nav a{display: inline-block;text-decoration: none;}

nav > ul > li > a{padding: 20px 20px;color: #FFF;}

nav > ul > li:hover a{padding: 15px 30px 20px 30px;}

.submenu{display: none;}

nav li:hover .submenu{display: inline-block;position: absolute;top: 100%;left: 0px;padding: 0px;z-index: 1000;}

.submenu li{border-bottom : 1px solid #CCC;}

.submenu li a{padding: 15px 30px;font-size: 13px;color:#222538;width: 270px;}

nav > ul > li:hover a{padding: 15px 20px 20px 20px;}

.menu-Accueil: hover{border-top: 5px solid #e44d26background-color: rgba(228,77,38,0.15);}

.menu-Anniversaire:hover{border-top: 5px solid #FFFF00background-color: rgba(000,112,192,0.15);}

.menu-Accueil .submenu{background-color: rgb(230, 100, 40);}

.menu-Anniversaire .submenu{background-color: rgb(000, 160, 240);}

.submenu li:hover a{color: #EEE;font-weight: bold;}

.menu-Accueil .submenu li:hover{background-color: rgb(210, 77, 60);}

.menu-Anniversaire .submenu li:hover{background-color: rgb(000, 115, 200);}

/*Fin de la navigation (barres de choix)*/



Voici celui pour le reste:
body#Accueil     {background-color: rgb(175, 194, 192);width: 1000px;margin: auto;}

body#Chloé       {background-image: url(images/chloé.jpg);font-size: 16px;background-size: 1400px 700px;}

body#Anniversaire{background-image: url(images/anniversaire.jpg);font-size: 16px;background-size: 1400px 700px;}

body#Maman       {background-image: url(images/maman.jpg);font-size: 16px;background-size: 1400px 700px;}

body#Corentin    {background-image: url(images/corentin3.jpg);font-size: 16px;background-size: 1400px 700px;}

header {color: ;width: 800px;margin: 0 auto;background-color: rgb(93, 255, 0);text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;margin-top: 10px}

strong{color:Purple;text-decoration-style:dashed; }

h1{color: Chartreuse;width: 1000px;margin-top: 15px;margin-left: -80px;margin-right: auto;}

h2{color: Chartreuse;width: 950px;margin-top: 15px;margin-left: -70px;margin-right: auto;}

h3{color: Chartreuse;width: 900px;margin-top: 15px;margin-left: -80px;margin-right: auto;}

footer{background-color: #95abd8;border-radius: 8px;text-align: 5px;margin: auto;margin-bottom: 10px;width: 800px;font-style: italic;font-size: 12px;text-align: right;height: 20px;padding: 10;margin-top: 10px}

#banderole{width: 800px;margin:0 auto;background-color: blue;text-align: center;align-content: center;}

  #banderole {border-radius: 20px;}

#zone_1{width: 800px;margin: auto;padding: 8px;background-color: blue;text-align: center;align-content: center;opacity: 0.9}

  #zone_1 {border-radius: 20px;}

#zone_2{width: 800px;margin:0 auto;padding: 8px;background-color: darkorange;text-align: center;align-content: center;opacity: 0.9}

  #zone_2 {border-radius: 20px;}

#zone_2-0{width: 800px;margin:0 auto;padding: 8px;background-color: white;text-align: center;align-content: center;opacity: 0.9}

  #zone_2-0 {border-radius: 20px;}

#zone_3{width: 800px;margin:0 auto;padding: 8px;background-color: gray;text-align: center;align-content: center;opacity: 0.9}

  #zone_3 {border-radius: 20px;}

#zone_4{width: 800px;margin:0 auto;padding: 8px;background-color: rgb(70, 225, 204);text-align: center;align-content: center;opacity: 0.9}

  #zone_4 {border-radius: 20px;}

#zone_5{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color: white;text-align: center;align-content: center;opacity: 0.9}

  #zone_5 {border-radius: 20px;}

#zone_6{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:plum;text-align: center;align-content: center;opacity: 0.9}

  #zone_6 {border-radius: 20px;}

#zone_7{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:orange;text-align: center;align-content: center;opacity: 0.9}

  #zone_7 {border-radius: 20px;}

#zone_8{width: 600px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:yellow;text-align: center;align-content: center;opacity: 0.9}

  #zone_8 {border-radius: 20px;}

#zone_9{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;padding: 8px;background-color:rgb(255, 152, 35);text-align: center;align-content: center;opacity: 0.9}
  #zone_9{border-radius: 20px}

#zone_10{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:red;text-align: center;align-content: center;opacity: 0.9}
  #zone_10{border-radius: 20px}



li {list-style-type: none;}


#onglets{font : bold 11px Batang, arial, serif;list-style-type : none;padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */border-bottom : 1px solid #9EA0A1;margin-left : 0;}

#onglets li{float : left;height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */background-color: #F4F9FD;margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */margin : 1px 2px 0 2px;  /* Pour IE  */border : 1px solid #9EA0A1;}

#onglets li.active{border-bottom: 1px solid #fff;background-color: #fff;}

#onglets a{display : block;color : #666;text-decoration : none;padding : 4px;}

#onglets a:hover{background : #fff;}

#menu{border-bottom : 1px solid #9EA0A1;padding-bottom : 25px;}


Je joint également une image de la barre de nav avec la mauvaise taille:


Et celle avec la bonne taille:

Merci de votre aide si vous trouver une solution

3 réponses

Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71
Alors, dans ton code css de tes onglets tu as oublié le ";" à la fin entre border-to et background-color (ligne 29 et 31).
Et je crois que l'on ne peux pas mettre d'accents dans l'id d'un element (body#Chloé)
De plus, si tu pouvais mettre ton code html ça serait mieux pour comprendre.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 56948 internautes nous ont dit merci ce mois-ci

Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

html page avec la bonne taille du menu d'onglet:

 
html page avec la bonne taille du menu d'onglet:

</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <META NAME="robots" CONTENT="noindex,nofollow">
        <title>Le site des NIEDERHEF</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="menu_onglets.css">
    <nav>
        <ul>
            <li class="menu-Accueil"><a href="Accueil.html">Accueil</a>
              <ul class="submenu">
                <li><a href="Accueil.html"></a>Présentation du site</li>
              </ul>
	</li>
            <li class="menu-Anniversaire"><a href="Anniversaire.html">Anniversaire</a>
              <ul class="submenu">
                <li><a href="2020_anniv_maman.html">Maman</a></li>
                <li><a href="2020_anniv_chloé.html">Chloé</a></li>
                <li><a href="2019_anniv_corentin.html">Corentin</a></li>

              </ul>
	</li>
        </ul>
    </nav>
    </head>


    <body id="Accueil">
   	  <div><div id="banderole"></div><br><br>
  	  <center><img src="http://l.wigflip.com/u6TX1Jat/screedbot.gif" alt="Bienvenue (gif)"></center>

   	<div id="zone_4">

   	<h1>Bienvenue</h1>

   	<img src="https://www.gif-maniac.com/gifs/55/54746.gif" alt="Points d'interrogation">

   	<p>Ce site est un site un peu spécial car,il a comme tu peut le voir différents onglets sur lesquels tu peut cliquer.</P>
	 <p>Pour l'instant il n'y en a que deux mais si tu passe la souris dessus tu peux voir quelque chose apparaitre en dessous et tu pourras cliquer sur celui qui te concernera.</p><br>

   
  </div>

  <div id="zone_8"><p><strong>PS:</strong>il y aura peut être d'autres onglets qui se rajouterons plus tard quand j'aurais quelque chose a mettre dedans</p>
    <script src="script.js"></script>

   <br><br></div>



  <footer>Site créé par 😉  </footer>
   </body>

   </html>



html page avec la bonne taille du menu d'onglet:



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <META NAME="robots" CONTENT="noindex,nofollow">
        <title>Anniversaire</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="menu_onglets.css">
    <nav>
        <ul>
            <li class="menu-Accueil"><a href="Accueil.html">Accueil</a>
              <ul class="submenu">
                <li><a href="Accueil.html"></a>Présentation du site</li>
              </ul>
    </li>
            <li class="menu-Anniversaire"><a href="Anniversaire.html">Anniversaire</a>
              <ul class="submenu">
                <li><a href="2020_anniv_maman.html">Maman</a></li>
                <li><a href="2020_anniv_chloé.html">Chloé</a></li>
                <li><a href="2019_anniv_corentin.html">Corentin</a></li>

              </ul>
    </li>
        </ul>
    </nav>
    </head>



    <body id="Anniversaire">

    	<div>
    		<div id="zone_5">
                    <h1 id="textejaune">Explications</h1>
    			<br>Maintenant tu es sur la page <strong>ANNIVERSAIRE.</strong>
                Je vais t'expliquer ce qui va se passer<br>Les différents boutons peuvent t'amener a différentes choses mais pour l'instant celui qui devrait t'interesser c'est ce qu'il y a en dessous de l'onglet <strong>ANNIVERSAIRE</strong> .<br>
                <br>Passe ta souris dessus et clique sur ton prénom seulement si on est en <strong>Novembre</strong> pour Coco ou en <strong>Janvier</strong> pour Chloé.<br> <br>
    	</div>

        <div>
    <div id="zone_6">

    <h3>Clique sur ton prénom <br> et tu verras</h3>

    <center><strong>PS:</strong> NE PAS TRICHER</center>
    <br>
</div>

  <footer>Site créé par  😉  </footer>
    </body>
</html>



Je sais pas si tu as remarque mais j'ai inversé la ou je te dit que c'est ce code avec la bonne taille et l'autre avec la mauvaise. Conseille moi par rapport a celui là par ce que je me suis appercu que c'était plus moche par rapport a l'autre post.

Merci de ton aide.
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71
C'est bon, j'ai trouvé ton problème :

Dans ton css j'ai rajouté la propriété width et margin qui correspond à ce que tu as mis en body#Accueil :
body#Anniversaire{background-image: url(images/anniversaire.jpg);
font-size: 16px;
background-size: 1400px 700px; 
width:1000px;
margin: auto;
}


Tu avais aussi mis du html avant la balise <body>. Des balises <div> ouverte mais pas fermé. Enfin bref, je te passe ton code html corrigé et le css.

Page anniversaire :
<!DOCTYPE html>
<html>
    <head>
        <title>Anniversaire</title>
        <meta charset="utf-8" />
        <meta name="robots" content="noindex,nofollow">
        <link rel="stylesheet" href="css-page.css">
    </head>
    
    <body id="Anniversaire">
<!--Menu-->
        <nav>
            <ul>
                <li class="menu-Accueil"><a href="Accueil.html">Accueil</a>
                    <ul class="submenu">
                        <li><a href="Accueil.html">Présentation du site</a></li>
                    </ul>
                </li>
                
                <li class="menu-Anniversaire"><a href="Anniversaire.html">Anniversaire</a>
                    <ul class="submenu">
                        <li><a href="2020_anniv_maman.html">Maman</a></li>
                        <li><a href="2020_anniv_chloé.html">Chloé</a></li>
                        <li><a href="2019_anniv_corentin.html">Corentin</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
<!--Fin du menu-->
        <div id="zone_5">
            <h1 id="textejaune">Explications</h1>
            <p>
            <br>Maintenant tu es sur la page <strong>ANNIVERSAIRE.</strong>
            Je vais t'expliquer ce qui va se passer<br>
            Les différents boutons peuvent t'amener a différentes choses mais pour l'instant celui qui devrait t'interesser c'est ce qu'il y a en dessous de l'onglet <strong>ANNIVERSAIRE</strong> .<br>
            <br>Passe ta souris dessus et clique sur ton prénom seulement si on est en <strong>Novembre</strong> pour Coco ou en <strong>Janvier</strong> pour Chloé.<br><br>
            </p>
        </div>

        <div id="zone_6">
            <h3>Clique sur ton prénom <br> et tu verras</h3>
            <a class="center"><strong>PS:</strong> NE PAS TRICHER</a>
            <br>
        </div>
        
        <footer>
        <a>Site créé par  ????  </a>
        </footer>
    </body>
</html>


Le code css (j'ai réunie les deux que tu m'as passer)
/*Début de la navigation (barres de choix)*/

nav{font-family: 'Century Gothic', 'Source code pro', Verdana, serif;width: 100%;background-color: #424558;}

nav > ul{margin: 0px;padding: 0px;}

nav > ul::after{content: "";display: block;clear: both;}

nav li{list-style-type: none;}

nav > ul > li{float: left;position: relative;}

nav a{display: inline-block;text-decoration: none;}

nav > ul > li > a{padding: 20px 20px;color: #FFF;}

nav > ul > li:hover a{padding: 15px 30px 20px 30px;}

.submenu{display: none;}

nav li:hover .submenu{display: inline-block;position: absolute;top: 100%;left: 0px;padding: 0px;z-index: 1000;}

.submenu li{border-bottom : 1px solid #CCC;}

.submenu li a{padding: 15px 30px;font-size: 13px;color:#222538;width: 270px;}

nav > ul > li:hover a{padding: 15px 20px 20px 20px;}

.menu-Accueil:hover{border-top: 5px solid #e44d26;background-color: rgba(228,77,38,0.15);}

.menu-Anniversaire:hover{border-top: 5px solid #FFFF00;background-color: rgba(000,112,192,0.15);}

.menu-Accueil .submenu{background-color: rgb(230, 100, 40);}

.menu-Anniversaire .submenu{background-color: rgb(000, 160, 240);}

.submenu li:hover a{color: #EEE;font-weight: bold;}

.menu-Accueil .submenu li:hover{background-color: rgb(210, 77, 60);}

.menu-Anniversaire .submenu li:hover{background-color: rgb(000, 115, 200);}
/*Fin de la navigation (barres de choix)*/


body#Accueil     {background-color: rgb(175, 194, 192);width: 1000px;margin: auto;}

body#Chloé       {background-image: url(images/chloé.jpg);font-size: 16px;background-size: 1400px 700px;}

body#Anniversaire{background-image: url(images/anniversaire.jpg);font-size: 16px;background-size: 1400px 700px; width:1000px;margin: auto;}

body#Maman       {background-image: url(images/maman.jpg);font-size: 16px;background-size: 1400px 700px;}

body#Corentin    {background-image: url(images/corentin3.jpg);font-size: 16px;background-size: 1400px 700px;}

header {color: ;width: 800px;margin: 0 auto;background-color: rgb(93, 255, 0);text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;margin-top: 10px}

strong{color:Purple;text-decoration-style:dashed;}

h1{color: Chartreuse;margin-top: 15px;text-align:center}

h2{color: Chartreuse;margin-top: 15px;text-align:center}

h3{color: Chartreuse;margin-top: 15px;text-align:center}

footer{background-color: #95abd8;border-radius: 8px;text-align: 5px;margin: auto;margin-bottom: 10px;width: 800px;font-style: italic;font-size: 12px;text-align: right;height: 20px;padding: 10;margin-top: 10px}

#banderole{width: 800px;margin:0 auto;background-color: blue;text-align: center;align-content: center;border-radius: 20px;}

 

#zone_1{
    width: 800px;
    margin: auto;
    padding: 8px;
    background-color: blue;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_2{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: darkorange;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
}

#zone_2-0{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: white;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_3{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: gray;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_4{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: rgb(70, 225, 204);
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_5{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: white;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_6{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:plum;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_7{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:orange;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }



#zone_8{
    width: 600px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:yellow;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }
    
#zone_9{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;padding: 8px;background-color:rgb(255, 152, 35);text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;}
 

#zone_10{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:red;text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;}
  
li {list-style-type: none;}


#onglets{font : bold 11px Batang, arial, serif;list-style-type : none;padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */border-bottom : 1px solid #9EA0A1;margin-left : 0;}

#onglets li{float : left;height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */background-color: #F4F9FD;margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */margin : 1px 2px 0 2px;  /* Pour IE  */border : 1px solid #9EA0A1;}

#onglets li.active{border-bottom: 1px solid #fff;background-color: #fff;}

#onglets a{display : block;color : #666;text-decoration : none;padding : 4px;}

#onglets a:hover{background : #fff;}

#menu{border-bottom : 1px solid #9EA0A1;padding-bottom : 25px;}
.center{text-align:center;}
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71
https://img-19.ccm2.net/HWN88hsxIWf4nZDp1cDKPQmCiuU=/b16ecccb41014535b668cde88a847a00/tmp/Sans_titre_1.png

(l'outil pour mettre les images ne voulais pas marcher)
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Merci,
C'est ce que je voulais mais sait tu ce qu'il faut modifier pour que ça me mette la même taille dans les sous menus d'anniversaire parce que quand je clique sur les différents sous menus de l'onglet anniversaire la barre de navigation redevient comme avant??? Il y a aussi un décalage de sous menus quand on passe de accueil a anniversaire.

Sinon c'est nickel pour les autres modif.

Autre question tu as modifié quoi pour que ca mette les petites barres de couleur au dessus des onglets quand on passe la souris dessus par ce j'ai essayé de les mettre mais j'ai jamais réussi?
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Pour les barres de couleur j'ai trouvé.
Mais dans la barre de nav j'ai un autre problème c'est que l'écriture et la position du texte n'est pas la même et même si j'arrive a modifier le texte (style d'écriture), impossible de déplacer le texte.

J'aimerai que le texte soit comme sur cette image:



Et pas comme sur celle la:



Merci de ton aide, je ne te redonne pas le css parce que c'est le même qu dans les messages d'avant.
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Comme tu as pu le voir dans mon code je pense je suis un bulet je n'arrive pas a mettre les background des sous menus "maman" et "anniveersaire" a la bonne taille sans qu'ils soient flous. Connait tu une solution a cela??


Désolé pour mes messages répétés.
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71
De mon coté, le texte est bien positionné, je comprend pas pourquoi ça marche pas chez toi x')

Sinon quand tu parle du background des sous menus "maman" et "anniversaire", c'est à dire ? Tu as mis une image ?
Tu as repris le css que je t'avais passer ? Si tu la modifier tu peux le remettre pour que je regarde ;)
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71 >
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

J'ai rajouté la propriété
width:1000px;margin: auto;
à body#Anniversaire. Fait le à tout les autres (body#Chloé, body#Maman, […]) et tu n'auras plus de problème.

N'hésite pas à vider le cache du navigateur quand tu change le CSS, si tu sais pas comment faire -> https://www.viderlecache.fr/
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Ok j'essayerai quand j'aurai recup ma clée USB merci. (je l'ai oubliée chez un pote).
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Quand je parle des background des sous c'est les sous menus des pages que tu as quand tu cliques dessus par ce que il y sont plusieurs fois et je veux que la photo fasse toute la page:

/*Début de la navigation (barres de choix)*/

nav{font-family: 'Century Gothic', 'Source code pro', Verdana, serif;width: 100%;background-color: #424558;}

nav > ul{margin: 0px;padding: 0px;}

nav > ul::after{content: "";display: block;clear: both;}

nav li{list-style-type: none;}

nav > ul > li{float: left;position: relative;}

nav a{display: inline-block;text-decoration: none;}

nav > ul > li > a{padding: 20px 20px;color: #FFF;}

nav > ul > li:hover a{padding: 15px 30px 20px 30px;}

.submenu{display: none;}

nav li:hover .submenu{display: inline-block;position: absolute;top: 100%;left: 0px;padding: 0px;z-index: 1000;}

.submenu li{border-bottom : 1px solid #CCC;}

.submenu li a{padding: 15px 30px;font-size: 13px;color:#222538;width: 270px;}

nav > ul > li:hover a{padding: 15px 20px 20px 20px;}

.menu-Accueil:hover{border-top: 5px solid #e44d26;background-color: rgba(228,77,38,0.15);}

.menu-Anniversaire:hover{border-top: 5px solid #3366FF;background-color: rgba(000,112,192,0.15);}

.menu-Accueil .submenu{background-color: rgb(230, 100, 40);}

.menu-Anniversaire .submenu{background-color: rgb(000, 160, 240);}

.submenu li:hover a{color: #EEE;font-weight: bold;}

.menu-Accueil .submenu li:hover{background-color: rgb(210, 77, 60);}

.menu-Anniversaire .submenu li:hover{background-color: rgb(000, 115, 200);}
/*Fin de la navigation (barres de choix)*/


body#Accueil     {background-color: rgb(175, 194, 192);width: 1000px;margin: auto;}

body#Chloé       {background-image: url(images/smiley.jpg);font-size: 16px;background-size: 1400px 700px;width:1000px;margin: auto}

body#Anniversaire{background-image: url(images/poudre colorée.jpg);font-size: 16px;background-size: 1400px 700px;width: 1000px;margin: auto;}

body#Maman       {background-image: url(images/grotte bleue.jpg);font-size: 16px;background-size: 1400px 700px;width:1000px;margin: auto}

body#Corentin    {background-image: url(images/corentin3.jpg);font-size: 16px;background-size: 1400px 700px;width: 1000px;margin: auto;}

header {color: ;width: 800px;margin: 0 auto;background-color: rgb(93, 255, 0);text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;margin-top: 10px}

strong{color:Purple;text-decoration-style:dashed;}

h1{color: Chartreuse;margin-top: 15px;text-align:center}

h2{color: Chartreuse;margin-top: 15px;text-align:center}

h3{color: Chartreuse;margin-top: 15px;text-align:center}

footer{background-color: #95abd8;border-radius: 8px;text-align: 5px;margin: auto;margin-bottom: 10px;width: 800px;font-style: italic;font-size: 12px;text-align: right;height: 20px;padding: 10;margin-top: 10px}

#banderole{width: 800px;margin:0 auto;background-color: blue;text-align: center;align-content: center;border-radius: 20px;}

 

#zone_1{
    width: 800px;
    margin: auto;
    padding: 8px;
    background-color: blue;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_2{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: darkorange;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
}

#zone_2-0{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: white;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_3{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: gray;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_4{
    width: 800px;
    margin:0 auto;
    padding: 8px;
    background-color: rgb(70, 225, 204);
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_5{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: white;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_6{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:plum;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }

#zone_7{
    width: 800px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:orange;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }



#zone_8{
    width: 600px;
    margin:0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:yellow;
    text-align: center;
    align-content: center;
    opacity: 0.9;
    border-radius: 20px;
    }
    
#zone_9{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;padding: 8px;background-color:rgb(255, 152, 35);text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;}
 

#zone_10{width: 800px;margin:0 auto;margin-top: 15px;padding: 8px;background-color:red;text-align: center;align-content: center;opacity: 0.9;border-radius: 20px;}
  
li {list-style-type: none;}
Messages postés
245
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
16 avril 2020
71 >
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Ah, oui, j'avais pas compris vu que j'avais pas les images. Rajoute le css
background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

au div ou tu a l'image en background.
Messages postés
22
Date d'inscription
vendredi 8 mars 2019
Statut
Membre
Dernière intervention
24 août 2019

Ok je ferai ça
Pas grave si tu avais pas compris

Merci