Sujet Précédent Sujet Suivant

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

Fermé
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024 - Modifié le 18 avril 2019 à 15:29
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024 - 27 mai 2019 à 17:25
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
A voir également:

3 réponses

Réponse 1 / 3
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 19 avril 2019 à 21:50
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
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
20 avril 2019 à 00:14
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.
0
Réponse 2 / 3
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 20 avril 2019 à 14:06
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;}
0
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
20 avril 2019 à 14:08
https://img-19.ccm2.net/HWN88hsxIWf4nZDp1cDKPQmCiuU=/b16ecccb41014535b668cde88a847a00/tmp/Sans_titre_1.png

(l'outil pour mettre les images ne voulais pas marcher)
0
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
Modifié le 21 avril 2019 à 14:16
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?
0
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
21 avril 2019 à 13:59
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.
0
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
21 avril 2019 à 14:13
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.
0
Réponse 3 / 3
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 21 avril 2019 à 15:20
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 ;)
0
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 21 avril 2019 à 15:22
https://img-19.ccm2.net/N7QfrsVnqeng6qRGOdWl1GfQuYE=/7a8028d47dd74142a009d624c1a2f38b/tmp/Sans_titre_1.png
Je n'arrive toujours pas a mettre des images sans que ça bug, et je m'étais trompé précédemment lors de l'upload.
0
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
21 avril 2019 à 15:28
Sinon, tu es pas sûr que c'est un problème de cache de ton navigateur ?
Crée un nouveau fichier vide en .html et colle code ci et dis moi si ça bug encore : 
<!DOCTYPE html>
<html>
<head>
<title>Anniversaire</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow">
<!--<link rel="stylesheet" href="css-pages.css">-->
<style>
/*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;}
</style>
</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>
0
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
23 avril 2019 à 15:55
non ça ne beuge plus merci.
Peut tu me dire comment faire pour les avoir dans différents fichiers pour la facilité d'accès.
0
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100 > Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
23 avril 2019 à 20:36
Salut, ce que tu avais de base (et c'est bien ^^) c'est de rajouter entre le <head> et le </head> ceci : 
<link rel="stylesheet" href="css-page.css">
. Tu copie puis supprime tout ce qu'il y a entre les balise <style> et </style>.
Ce que tu as copié précédemment, tu le colle dans un fichier nommé "css-page.css".

etc...
0
Joker_du_10 Messages postés 24 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 7 janvier 2024
25 avril 2019 à 18:44
C bon tout marche j'ai juste un dernier problème, je voudrais savoir ce que tu as modifier pour la taille des barres de navigation (menu d'onglets) par ce que j'ai toujours une page avec une mauvaise taille de barre
0

Discussions similaires

recherche d'u
mimi -
brucine -

1 réponse
safari n'arrive plus a ouvrir certains sites
ambjrc -
tom74 -

11 réponses