Partage
  • Partager sur Facebook
  • Partager sur Twitter

Liens menu et sous-menu

Bogue

21 mars 2019 à 15:06:12

Bonjour, j'aimerais savoir ce qui ne va pas avec mon menu; lorsque je clique sur l'un des sous-menu, l'image du site tasse légèrement vers la droite au lieu de rester au même endroit. Je me suis fais une page "matrice" alors elles sont identiques et je ne comprend pas pourquoi l'image bouge. Les pages test sont sous le menu "boutique"... Merci!
  • Partager sur Facebook
  • Partager sur Twitter
21 mars 2019 à 15:10:00

Pour partager ton code utilise le bouton </> afin que l'on puisse aussi le copier afin de le testé et trouver une solution sans avoir à tout retaper!

Attention avec tes liens qui pointe sur ton lecteur C: utilise des url relatives

  • Partager sur Facebook
  • Partager sur Twitter
21 mars 2019 à 15:11:20

Bonjour,

Merci d'utiliser la balise code Image

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Image de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

  • Partager sur Facebook
  • Partager sur Twitter

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

21 mars 2019 à 15:19:50

<!DOCTYPE html>
<html>
    <head><!-- En-tête de la page; Pour vérifier la page; clique Exécution puis sur lauch in... -->
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" /><!-- Pour tout le monde -->
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px -->
        <title>MAGASIN GÉNÉRAL</title>
    </head>
	
	

    <body><!-- Corps de la page -->
	
	
	
	  <header><!-- Entête -->
	  
	  
	  
	  
	            <p><center><img src="images/banniere_05.png" alt="test"/><center/></p><!-- Image de la bannière -->
				
				
				
		    
		    <ul id="menu-demo2"><!-- Menu du site -->
	            <li><a href="#">ACCUEIL</a></li>
			
				
	            <li><a href="#">ACTIVITÉS</a>
		    <ul>
			    <li><a href="#">éducatives</a></li>
			    <li><a href="#">festives</a></li>
			    <li><a href="#">sportives</a></li>
		    </ul>
	            </li>
				
	            <li><a href="#">ANNONCEURS</a>
		    <ul>
			    <li><a href="#">commerces</a></li>
			    <li><a href="#">employeurs</a></li>
		    </ul>
	            </li>
				
	            <li><a href="#">BOUTIQUE</a>
		    <ul>
			    <li><a href="#">Accessoires</a></li>
			    <li><a href="#">Artisanat</a></li>
			    <li><a href="#">Bijoux</a></li>
				<li><a href="#">Underground</a></li>
			    <li><a href="#">Vêtements</a></li>
		    </ul>
	            </li>
				
	            <li><a href="#">HISTOIRE</a>
		    <ul>
			    <li><a href="#">Cantons de l'Est</a></li>
			    <li><a href="#">Patrimoine</a></li>
			    <li><a href="#">Région administrative</a></li>
			    <li><a href="#">Chemin des Cantons</a></li>
			    <li><a href="#">Municipalités</a></li>
		    </ul>
	            </li>
            </ul>
		  
		  
		  
	  </header>
	  
	  
	    <section>
		
		
		</section>
	  
	  
	  
	  <footer><!-- Pied de page -->
		
            <p><center>Copyright Sylvain Meunier - Tous droits réservés<br /><br />
			<a href="#" title="Qui sommes-nous?" class="gauche">À propos</a><a href="#" title="Vous avez des questions? N'hésitez pas à nous contacter." class="centre">Nous contacter !</a><a href="#" title="Nous recherchons des gens motivés pour gérer les sites des différentes régions administratives." class="droite">Recherché</a><br /><br />
            
			
      </footer><!-- Fin du pied de page -->
	
	
	</body><!-- Fin du corps de la page -->
</html>


/*
style.css
---------
 
Par Sylvain Meunier
*/

@media screen and (max-width: 1280px)
{
    /* Rédigez vos propriétés CSS ici */
}



body
{

    background: url("images/bordure.jpg") fixed no-repeat center, url("images/bois_01.jpg") fixed;
	
}

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul li:last-child{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #5371c7;
background-image:-webkit-linear-gradient(top, #5371c7 0%, #1d48c4 100%);
background-image:linear-gradient(to bottom, #5371c7 0%, #1d48c4 100%);
}
#menu-demo2 li:nth-child(4){
background-color: #51aac4;
background-image:-webkit-linear-gradient(top, #51aac4 0%, #047798 100%);
background-image:linear-gradient(to bottom, #51aac4 0%, #047798 100%);
}
#menu-demo2 li:last-child{
background-color: #8ae0f9;
background-image:-webkit-linear-gradient(top, #8ae0f9 0%, #05c3fa 100%);
background-image:linear-gradient(to bottom, #8ae0f9 0%, #05c3fa 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#2A2333;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#1d48c4;
}
#menu-demo2 li:nth-child(4) li{
background:#047798;
}
#menu-demo2 li:last-child li{
background:#05c3fa;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#5371c7;
}
#menu-demo2 li:nth-child(4):hover, #menu-demo2 li:nth-child(4) li:hover{
background:#51aac4;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#8ae0f9;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}


section
{
    
    
    width: 940px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
    border: 2px solid #214fa3; /* bordure; épaisseur et couleur */
	border-radius: 10px; /* Coins arrondis */
	box-shadow: 6px 6px 30px black; /* Ombrage sous les sections */
    padding: 0; /* Marge intérieure */
    margin-bottom: 20px; /* Marge extérieure */
	background: white; /* Couleur de fond */
	
}

#conteneur
{
    display: flex;
	width: 940px; /* On a indiqué une largeur (obligatoire) */
	margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
	margin-bottom: 20px; /* Marge extérieure */
}

.element
{
    width: 280px; /* On a indiqué une largeur (obligatoire) */
	margin: auto;
	border: 2px solid #214fa3; /* bordure; épaisseur et couleur */
	border-radius: 10px; /* Coins arrondis */
	box-shadow: 6px 6px 30px black; /* Ombrage sous les sections */
	background: white; /* Couleur de fond */
	text-align: justify; /* Les paragraphes seront alignés au centre */
	
}

aside
{
    float: left;
    width: 300px;
	margin: 80px;
	margin-top: 0px;
    border: 1px solid black;
	background: white; /* Couleur de fond */
	
}

footer
{
    
    
    width: 940px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
    border: 2px solid #214fa3; /* bordure; épaisseur et couleur */
	border-radius: 10px; /* Coins arrondis */
	box-shadow: 6px 6px 30px black; /* Ombrage sous les sections */
    padding: 0px; /* Marge intérieure */
    margin-bottom: 20px; /* Marge extérieure */
	background: white; /* Couleur de fond */
	text-align: center; /* Les titres seront alignés au centre */
	
}

h1
{
    color: #1756a6; /* Les titres principaux seront en bleu */
	text-align: center; /* Les titres seront alignés au centre */
	font-family: Arial; /* Style de la police */
	font-size: xx-large;
	
}

h2
{
    color: white; /* Le titre secondaire sera blanc */
	background-color: red;
	text-align: center; /* Les titres seront alignés au centre */
	font-family: Arial; /* Style de la police */
	font-size: large; /* Grosseur de la police */
	
	
}

h3
{
    color: blue; /* Le sous-titre sera bleu */
	text-align: left; /* Les titres seront alignés au centre */
	font-family: Arial; /* Style de la police */
	font-size: medium; /* Grosseur de la police */
	text-decoration: underline; /* Le titre sera souligné */
	margin: 20px;
	
	
}



p
{

    color: black; /* Les paragraphes seront en noir */
	font-size: medium; /* Grosseur de la police */
	font-family: Arial, Verdana, sans-serif; /* Styles des polices */
	text-align: justify; /* Les paragraphes seront alignés au centre */
	padding-left: 20px; /* Marge intérieure de 2px */
	padding-right: 20px;
	
}

.gauche 
{ 
margin-left:5px; /* Distance entre les liens du pied de page */
} 
.centre 
{ 
margin-left:200px; /* Distance entre les liens du pied de page */ 
} 
.droite 
{ 
margin-left:200px; /* Distance entre les liens du pied de page */ 
}


  • Partager sur Facebook
  • Partager sur Twitter
21 mars 2019 à 15:33:23

Je viens de tester ton code mais je ne vois rien de bizarre sur ton site... j'ai poster ton code sur un CODEPEN, soi plus précis pour ton problème ou mon nous une images pour cela
  • Partager sur Facebook
  • Partager sur Twitter
21 mars 2019 à 16:01:29

Salut,

Pour commencer ton code est truffé d'erreur.

Premièrement tu utilises la balise <center> qui est dépréciée depuis le milieu des années 90. Le centrage c'est en CSS à présent.

Ligne 21, tu fermes ta balise <center> en utilisant <center /> au lieu de </center>

Ligne 80, ta balise <center> n'est pas fermée.

etc.

Je t'encourage à vérifier ton code (avec les validateurs du W3C par exemple) pour identifier et corriger ton code. ;)

-
Edité par Mewen_bzh 21 mars 2019 à 16:13:13

  • Partager sur Facebook
  • Partager sur Twitter
Je ne réponds pas aux messages privés.
21 mars 2019 à 16:10:09

<!DOCTYPE html>
<html>
    <head><!-- Pour vérifier la page; clique Exécution puis sur lauch in... -->
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" /><!-- Pour tout le monde, mène à la page CSS -->
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px -->
        <title>MAGASIN GÉNÉRAL</title><!-- Titre qui apparait dans l'onglet du navigateur -->
    </head>
	
	

    <body><!-- Corps de la page -->
	
	
	
	  <header><!-- Entête -->
	  
	  
	  
	  
	            <p><center><img src="images/banniere_05.png" alt="test"/><center/></p><!-- Image de la bannière -->
				
				
				
		    
		    <ul id="menu-demo2"><!-- Menu du site -->
	            <li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/index.html#">ACCUEIL</a></li>
			
				
	            <li><a href="#">ACTIVITÉS</a><!-- Menu principal -->
		    <ul>
			    <li><a href="#">éducatives</a></li><!-- Sous-menu -->
			    <li><a href="#">festives</a></li>
			    <li><a href="#">sportives</a></li>
		    </ul>
	            </li>
				
	            <li><a href="#">ANNONCEURS</a>
		    <ul>
			    <li><a href="#">commerces</a></li>
			    <li><a href="#">employeurs</a></li>
		    </ul>
	            </li>
				
	            <li><a href="#">BOUTIQUE</a>
		    <ul>
			    <li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/boutique_01.html">Accessoires</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/boutique.html">Artisanat</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/boutique.html">Bijoux</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/boutique.html">Underground</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/boutique.html">Vêtements</a></li>
				
		    </ul>
	            </li>
				
	            <li><a href="#">HISTOIRE</a>
		    <ul>
			    
			    <li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/histoire_01.html">Cantons de l'Est</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/histoire_01.html">Cantons de l'Est</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/histoire_01.html">Cantons de l'Est</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/histoire_01.html">Cantons de l'Est</a></li>
				<li><a href="file:///C:/Users/Meu/Documents/Site%20web%20individuel/histoire_01.html">Cantons de l'Est</a></li>
				
			    
		    </ul>
	            </li>
            </ul>
		  
		  
		  
	  </header>
	  
	  
	          <aside>
			  
			  <h3>PARTENAIRES RECHERCHÉS</h3>
			  
			  <p>Ici je recherche des partenaires pour s'occuper des différentes régions administratives du Québec.</p>
			  
			  <h3>ANIMAUX PERDUS</h3>
			  
			  <p>Vous avez perdu votre animal de compagnie et aimeriez le retrouver?</p>
			  
			  <p>Vous n'avez qu'à cliquer <a href="#" title="Inscription">ici</a>.</p>
			  
			  
			  </aside>
			  
			  
			  
			  
			  
			  
			  
	  
	  
	  
	    
	      
	
	    <section>
            
		  <h1>VISITONS NOS RÉGIONS</h1>
		  
		  <center><img src="images/sherbrooke.jpg" alt="Photo de Sherbrooke" title="Ville de Sherbrooke en automne" /><center/>
			
		    <p>L'Estrie forme un territoire d'une superficie d'environ 1,6 million d'hectares, s'étendant des seigneuries au sud du fleuve Saint-Laurent jusqu'aux frontières américaines et de la rivière Richelieu à la rivière Chaudière.</p>
			
			<p>La richesse de son sol et de son sous-sol, la splendeur de ses collines et de ses montagnes, la beauté sauvage de plusieurs centaines de lacs en font l'une des plus magnifiques régions du Québec. Cette région, fortement appréciée de nos jours par les villégiateurs et les touristes, était, sous le régime français (1534-1760), un immense territoire réservé aux Abénaquis de la grande famille Algonquine.. L'Estrie est sillonnée par de nombreuses rivières; Saint-François, Haute Chaudière, Nicolet Sud-Ouest, Magog, Coaticook, Massawippi, au Saumon, Eaton et Missisquoi.</p>




			
				
		</section>
		
		    <div id="conteneur">
             <div class="element"><h2>PROMOTION 1</h2><p>Les dix premiers annonceurs seront publié gratuitement pour le premier mois.</p></div>
             <div class="element"><h2>PROMOTION 2</h2><p>Participez au tirage de 100.00$ en vous <a href="#" title="Inscription">inscrivant</a>, vous avez jusqu'au 1 Juillet.</p></div>
             <div class="element"><h2>PROMOTION 3</h2><p>Faites-nous parvenir votre petite annonce et courez la chance de gagner un coupon rabais!</p></div>
            </div>
	
	    
            
			
			
			
				
		
		
		
		
		
		
		
	  <footer><!-- Pied de page -->
		
            <p><center>Copyright Sylvain Meunier - Tous droits réservés<br /><br />
			<a href="#" title="Qui sommes-nous?" class="gauche">À propos</a><a href="#" title="Vous avez des questions? N'hésitez pas à nous contacter." class="centre">Nous contacter !</a><a href="#" title="Nous recherchons des gens motivés pour gérer les sites des différentes régions administratives." class="droite">Recherché</a><br /><br />
            
			
      </footer><!-- Fin du pied de page -->
	
	
	</body><!-- Fin du corps de la page -->
</html>
  • Partager sur Facebook
  • Partager sur Twitter