Partage

Responsive Projet Webagency

Sujet résolu

8 août 2018 à 10:34:34

Bonjour à tous, voilà j'ai un petit souci depuis hier, mon desktop se comporte comme s'il était en version responsive smartphone, pas moyen de trouver pour quelle raison, et du coup, pas moyen d'Avancer, si quelqu'un pouvait m'éclairer sa serait super ! Meri d'avance.

Alex, en formation dev web junior depuis 1 mois.

/*-------------------POLICE ECRITURE--------------------*/

@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*-----------------------GENERAL--------------------------*/
section
{
	padding-top: 100px;
}

.fas
{
	color:#5CADD3;
}

body
{
	width: 100%;
	margin:0;
}

h2
{
	font-size: 2.5em;
}

/*--------------------BARRE DE NAVIGATION-----------------------*/
.logo
{
	width: 50%;
}

header
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	top:0;
	height: 100px;
	width: 100%;
	z-index: 100;
	background-color: white;	
}

label
{
	display: none;
}

#menu2
{
	display: none;
}


input[type="checkbox"]
{
	display: none;
}

nav
{
	width: 30%;
	font-family: 'robotoregular',arial, serif;
}

header ul
{
	display: flex;
	width: 60%;
	list-style-type: none;
}

header li a
{
	text-decoration: none;
	text-align: center;
	color: black;
	padding:39px 15px 0px 15px;
}

header li a:hover
{
	border-top: 3px #5CADD3 solid;
}

/*-------------------IMAGE DE BANNIERE-------------------*/
#banniere
{
	width: 100%;
	position: relative;
}

#banniere img

{
	width: 100%;
	height: auto;
}

#banniere button
{
	padding: 10px 15px 10px 15px;
	color: #fff;
	background-color: #5CADD3;
	border:none;
	border-radius: 2px;
}

#titre_principale
{
	position:absolute;
	top: 260px;
	left: 280px;
	text-align: left;
	color: white;
	font-size: 19px;
	font-family: 'robotoregular',arial, serif;
}

#titre_principale p
{
	font-size: 16px;
}

h1
{
	text-transform: uppercase;
}

.bleu
{
	color:#5CADD3;
}

#timeline
{
	position: absolute;
	background-color: #5CADD3;
	width: 170px;
	height: 5px;
	bottom: 4px;
}

#timeline2
{
	position: absolute;
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 5px;
	bottom: 4px;
}

/*--------------------------NOS SERVICES----------------------------*/
#service
{
	width: 100%;
	text-align: center;
	font-family: 'robotoregular',arial, serif;
}

#titre1
{
	padding-bottom: 35px;
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#titre1 .fa-circle
{
	border: 1.5px solid white;
	border-radius: 50%;
	z-index: 2;
	position: relative;
}

#titre1 hr
{
	width: 11em;
	position: absolute;
	z-index: 1;
	border:1px solid #ebebeb;
	top: 111px;
}

#ecran_paragraphe
{
	display: flex;
	justify-content: center;
	margin-bottom: 100px;
}

#ecran
{
	margin-right: 50px;
}

#paragraphe
{
	display:flex;
	flex-direction: column;
	margin-left: 50px;
	margin-top: 60px;
}

#paragraphe .fa-circle
{
	position:absolute;
	top:16px;
	margin-left:5px;
	background-color:#fff;
	border:0px solid;
	border-radius: 50%;
	padding: 2px;
}

#paragraphe .fas
{
	display: inline-block;
}

#uxdesign,#uidesign,#seo
{
	display: flex;
}

.fa-chart-line,.fa-cubes,.fa-chart-pie
{
	position:relative;
	padding:18px;
	border:1px solid #ebebeb;
	border-radius:50%;
}

.icone
{
	padding-top:40px;
		
}

.text_icone
{
	padding-left: 20px;
	text-align: left;
}

/*---------------------NOS PROJETS----------------------*/
#projet
{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	width: 100%;
	background-color: #f5f5f5;
	font-family: 'robotoregular',arial, serif;
	overflow: hidden;
}

#titre2
{
	padding-bottom: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#titre2 .fa-circle
{
	border: 1.5px solid white;
	border-radius: 50%;
	z-index: 2;
	position: relative;
}

#titre2 hr
{
	width: 11em;
	position: absolute;
	z-index: 1;
	border:1px solid #ebebeb;
	top: 111px;
}

#nav_folio ul
{
	display: flex;
	width: 100%;
	height: 34px;
	padding:0;
	background-color: #E5E5E5;
	list-style-type: none;
	border-radius: 5px;
}

#nav_folio li 
{
	display: flex;
	flex-direction: column;
	width: 100px;
	text-align: center;
}

#nav_folio li a
{
	text-decoration: none;
	padding:8px 8px 8px 8px;
	border-radius: 2px;
	color: black;
}

#nav_folio li a:hover
{	
	background-color:#5CADD3;
	box-shadow:0px 3px 0px #438AAC;
	color: #fff;
}

.fa-caret-down
{
	visibility: hidden;
}

#nav_folio li:hover .fa-caret-down
{
	visibility: visible;
	display: block;
	color:#5CADD3;
	margin-top: -3px;
}

#portfolio
{
	padding-top: 50px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row;
	grid-row-gap: 25px;
	grid-column-gap: 25px;
}

#portfolio i
{
	position: relative;
	bottom: 115px;
	left: 80%;
	padding:10px;
	border:2px solid white;
	border-radius: 50%;
	background-color: #4592B0;
	color: white;
}

.eye_bloc h4
{
	padding: 0px 15px 0px 15px;
}

.eye_bloc p
{
	padding: 0px 15px 0px 15px;
}

.legende
{
	position: absolute;
	display: block;
	right: 0;
	left: 0;
	bottom:0px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	visibility: hidden;
}

figure
{
	position: relative;
	display: inline-block;
	margin:0;
	overflow: hidden;
	width: 300px;
	height:200px;
}

figure img
{
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	bottom:0;
	left:0 ;
}

figure:hover figcaption
{
	visibility: visible;
}

/*---------------------FORMULAIRE DE CONTACT----------------------*/

#map
{
	position: relative;
	width: 100%;
	height: 600px;
	font-family: 'robotoregular',arial, serif;
}

iframe
{
	width: 100%;
	height: 600px;
	position: absolute;
	z-index: 1;
}

#filtre
{
	width: 100%;
	height: 600px;
	position: absolute;
	z-index: 2;
	background-color:rgba(152,199,240,0.35);
}


	
form
{

	background-color:rgba(255,255,255,0.50);
	width: 250px;
	position: absolute;
	margin-left: 75%;
	margin-top: 70px;
	z-index: 3;
	border-radius: 3px;
}

#contact_info
{
	padding-left: 23px;
	padding-top: 7px;
	line-height: 20%;
}

form input
{
	width: 200px;
	margin-bottom: 15px;	
}

#bloc_form
{
	padding-left: 23px;
	padding-bottom: 7px;
}

textarea
{
	width: 198px;
	height: 150px;
}

#sendmessage button
{
	border:none;
	padding: 5px 10px 5px 10px;
	border-radius: 2px;
	background-color: #5CADD3;
	box-shadow:0px 3px 0px #438AAC;
	color: #fff;
}

/*------------------------RESPONSIVE TABLETTE--------------------------*/

@media all and (max-width:1281px)

{	/*IMAGE DE BANNIERE*/

	#titre_principale
	{
		position:absolute;
		top: 180px;
		left: 40px;
		font-size: 16px;
	}

	/*#banniere button
	{
	position:absolute;
	top: 320px;
	left: 40px;
	}*/

	#titre_principale p
	{
	font-size: 13px;
	}

	/*NOS PROJETS*/

	#portfolio
	{
	grid-template-columns: repeat(2, 1fr);
	padding-top: 50px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row;
	grid-row-gap: 25px;
	grid-column-gap: 25px;
	}

	/*FORMULAIRE DE CONTACT*/

	form
	{
		width: 250px;
		margin-left: 74%;
		margin-top: 185px;
	}
	
	
}
/*-------------------------RESPONSIVE SMARTPHONE-------------------------*/

@media all and (max-width:768px)
{

	/*BARRE DE NAVIGATION*/

	header

	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 85px;	
	}
	
	header ul
	{
		display: flex;
		justify-content: center;
		margin-left: 190px;
	}

	header li a
	{
		padding:25px 10px 0px 10px;
	}


	header li a:hover
	{
		border-top: 0px #5CADD3 solid;
	}

	#menu1
	{
		visibility: hidden;
	}

	.menu_nav
	{
		padding-top: 10em;
	}

	label 
	{
  		cursor: pointer;
 		position: absolute;
 		display: flex;
 		bottom: 40px;
 		right:60px;
 		top: 12px;
 		font-size: 50px;
 		color: #5CADD3;
	}
	
	#menu-toggle 
	{
  		display: none;
  	}

  	#menu-toggle:checked + #menu2
	{
	 	display: block;
	}

	/*.burger
	{
		position: relative;
		right: -40%;
		display: block;
		cursor: pointer;
		width: 40px;
		color: #5CADD3;
		font-size: 2.5em;
		padding-right:1em;*/
	}

	#menu2 
	{
	 	display: none;
	}

	#menu2 li
	{
		right:100px;
		font-size: 30px;
		background-color: rgba(92,173,211,0.50);
		padding: 15px;
	}

	/*IMAGE DE BANNIERE*/

	#image_fillette
	{
		width: 100%;
	}

	#image_fillette img
	{
		width: 100%;
		height: auto;
	}

	#titre_principale
	{
		position: relative;
		text-align: left;
		top: 0;
		left:0;
		padding: 5px;
		color: black;
		text-align: center;
	}

	#titre_principale p
	{	
		margin-right: 65px;
		font-size: 25px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	h1
	{
		margin-bottom: 10px;
		font-size: 43px;
	}

	#banniere button
	{
		padding: 20px 80px 20px 80px;
		font-size: 30px;
	}

	#timeline, #timeline2
	{
		display: none;
	}

	/*NOS SERVICES*/

	#service
	{
		padding-top: 100px;
		max-width: 750px;
	}

	#ecran
	{
		display: none;
	}

	/*NOS PROJETS*/

	#projet p
	{
		max-width: 600px;
	}

	#portfolio
	{
		grid-template-columns: 1fr;
	}

	/*FORMULAIRE DE CONTACT*/

	form
	{
		position: absolute;
		margin-left: 52%;
		margin-top: 195px;
	}

}

/*-------------------------RESPONSIVE SMARTPHONE 2------------------*/

@media all and (max-width: 380px)
{
	/*IMAGE DE BANNIERE*/
	


}

<!DOCTYPE html>

<html>

<head>

	<title>WebAgency</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>


<body>
	

		

	<!--BARRE DE NAVIGATION-->

<header>
			

	<div id="logo">
			<img src="image/logo.png" alt="Logo_Webagency" class="Logo">
	</div>
		<div>
		
				<nav id="menu">
					
					<ul class="menu_nav">
						<li><a href="#banniere">Accueil</a></li>
						<li><a href="#service">Services</a></li>
						<li><a href="#projet">Portfolio</a></li>
						<li><a href="#map">Contact</a></li>
					</ul>

				</nav>
		</div>
		
		<div>
				<label for="menu-toggle">&#9776;</label>
				<input type="checkbox"  id="menu-toggle"/>

			<ul id="menu2">

				 <li><a href="#banniere">Acceuil</a></li>
				 <li><a href="#service">Services</a></li>
				 <li><a href="#projet">Portfolio</a></li>
				 <li><a href="#map">Contact</a></li>

			</ul>
		</div>
		
</header>

	<!--IMAGE DE BANNIERE-->

<section>
		<div id="banniere">
				

				<div id="image_fillette">
					<img src="image/fillette.jpg" alt="Photo_fillette_peinture">
				</div>
				
				<div id="titre_principale">

					<h1><span class="bleu">Webagency</span>:L'agence de tous<br> vos projets !<br></h1>

					<p>Vous avez un projet web? La WebAgency vous aide à les réaliser !</p>

					<button>Plus d'Infos</button>
				</div>

					<div id="timeline2"></div>
					<div id="timeline"></div>
		</div>
</section>


	<!--NOS SERVICES-->

<section id="service">

	<div id="titre1">

				<h2>NOS SERVICES</h2>
				<hr>
				<i class="fas fa-circle"></i>


				<p>Spécialisé en création de sites internet et stratégie digitale,
				WebAgency regroupe tous les métiers interactifs<br> au service des entreprises et des marques.</p>
				
	</div>

		<div id="ecran_paragraphe">

			<div id="ecran">
				<img src="image/ecran.png">
			</div>


			<div id="paragraphe">	
				<div id="uxdesign">
					<div class="icone">
						<i class="fas fa-chart-line">
						<i class="fas fa-circle"></i></i>
						</div>

						<div class="text_icone">
						<h3>UX design</h3>
						<p>Depuis 2009, WebAgency déploie des stratégies digitales innovantes et efficaces,<br> de la conception graphique et technique au web-marketing</p>
					</div>
				</div>

				<div id="uidesign">
					<div class="icone">
						<i class="fas fa-cubes">
						<i class="fas fa-circle"></i></i>
					</div>

					<div class="text_icone">
						<h3>UI design</h3>
						<p>Site de marque / institutionnel
						E-commerce
						Portail Web /<br> Blog
						Application mobile
						Intranet / extranet
						Big data</p>
					</div>
				</div>

				<div id="seo">
					<div class="icone">
						<i class="fas fa-chart-pie">
						<i class="fas fa-circle"></i></i>
					</div>

					<div class="text_icone">
						<h3>SEO</h3>
						<p>Stratégie de marque/
						Stratégie digitale/
						Transformation digitale/<br>
						Cahier des charges/
						Plan média online/
						Digital analytics</p>
					</div>
				</div>
			</div>
		</div>
</section>

	<!--NOS PROJETS-->


<section id="projet">

	<div id="titre2">
		<h2>NOS PROJETS</h2>
		<hr>
		<i class="fas fa-circle"></i>
		<p>
		En plus de 9 ans d’expérience, notre agence a réalisé de très nombreux projets dans de multiples domaines.<br> Découvrez toutes nos références en détails.</p>
	</div>

	<div id="nav_folio">
		<ul>
			<li><a href="">All works</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Creative</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Corporate</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Portfolio</a><i class="fas fa-caret-down"></i></li>
		</ul>
	</div>

			<div id="filtre_image"></div>

	<div id="portfolio">

	<figure class="eye_bloc">
		<img src="image/portfolio/01.jpg" alt="lunette" class="img1">
			<figcaption class="legende">
				<h4>Web Optic</h4>
				<p>Vente de lunettes en ligne</p>
				<i class="fas fa-eye"></i>
			</figcaption>
	</figure>


	<figure class="eye_bloc">
			<img src="image/portfolio/02.jpg" alt="lapinrose" class="img2">
		<figcaption class="legende">
			<h4>Lapin Rose</h4>
			<p>Le lapin rose a lunette</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/03.jpg" alt="Pompadour" class="img3">
		<figcaption class="legende">
			<h4>Pompadour</h4>
			<p>Original pompadour 1950</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/04.jpg" alt="feuille" class="img4">
		<figcaption class="legende">
			<h4>Dossier</h4>
			<p>Le jolie dossier blanc</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>
			
	<figure class="eye_bloc">
			<img src="image/portfolio/05.jpg" alt="sac" class="img5">
		<figcaption class="legende">
			<h4>Shopping bag</h4>
			<p>Sac blanc et noir</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
	
			<img src="image/portfolio/06.jpg" alt="batiments" class="img6">
		<figcaption class="legende">
			<h4>Paysage</h4>
			<p>Jolie paysage rougeoyant</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/07.jpg" alt="icone_fusée" class="img7">
		<figcaption class="legende">
			<h4>Fusée</h4>
			<p>Fusée sur fond beige</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/08.jpg" alt="accessoire_bureau" class="img8">
		<figcaption class="legende">
			<h4>Accessoire</h4>
			<p>Accessoire bureautique</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	</div>

</section>

	<!--FORMULAIRE DE CONTACT-->
		

		

<section id="map">

	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.221424608043!2d2.347636915834413!3d48.873055307627794!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d&#39;Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1532076602263"></iframe>

		

	<div id="filtre"></div>


		<form>

				

			<div id="contact_info">
				<h3>Conctact Info</h3>
				<p>WebAgency  S.A.S</p>
				<p>25 Rue d'Hauteville 7510 Paris</p>
				<p>Tél:01 02 03 04 05</p>
			</div>
			

			
			<div id="bloc_form">
				<input type="text" placeholder="Name" required="required" /><br>
				<input type="text" placeholder="Email" /><br>
				<input type="text" placeholder="Subject" /><br>

				<textarea name="message" placeholder="Message"></textarea>


				<div id="sendmessage">
					<button>Send Message</button>
				</div>
			</div>

					

		</form>

				

					
					

</section>
				<footer>
			</footer>
		
	</body>
</html>

Frogweb

8 août 2018 à 10:56:03

Salut,

aucun problème pour moi.

Par exemple le menu est bien déployé et pas en burger.
Par contre la partie "service" n'est pas centrée comme les autres parties.
Ce problème vient du max-width:750px que tu a sur #service.
Pour le moment je n'ai pas trouvé pourquoi, alors que cette ligne ne devrait fonctionner qu'a 750px, elle est appliquée plus tôt.

Quoiqu'il en soit, cette ligne est parfaitement inutile, tout comme pratiquement tous les width:100% de ton code.
Pour qu'un élément soit responsive et qu'il doit prendre toute la largeur du site quelque soit la largeur du support,
il faut lui mettre... RIEN.

Il y a quelque chose d'autre en particulier qui ne va pas ?

EDIT : j'ai trouvé l'erreur. Ligne 318, tu as mal fermé ton commentaire, ce qui fait que tu as une accolade en trop.

-
Edité par Frogweb 8 août 2018 à 11:01:45

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Genroa

8 août 2018 à 10:56:57

On est sensés scanner le code comme ça? Tu ne pourrais pas nous donner quelque chose comme un codepen?

-
Edité par Genroa 8 août 2018 à 10:57:12

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Frogweb

8 août 2018 à 11:02:58

Genroa a écrit:

On est sensés scanner le code comme ça? Tu ne pourrais pas nous donner quelque chose comme un codepen?
-
Edité par Genroa il y a 4 minutes

Fais comme moi, colle le code dans une page html

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Genroa

8 août 2018 à 11:23:22

GG pour avoir eu la foi de l'exporter dans un fichier et de te taper la lecture.

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

AlexBoufini

8 août 2018 à 11:27:48

Tout d'abord, merci beaucoup pour ta réponse Frogweb

Par contre je ne vois pas de commentaire en ligne 318 ? Peu être pas sur la même ligne après ton copier coller dans ton logiciel? Mais je n'arrive pas à voir de quoi tu parle

Mewen_bzh

8 août 2018 à 11:29:05

Autre solution : copier-coller le CSS dans le validateur de code du W3C et attendre une fraction de seconde que l'erreur soit révélée.

C'est beaucoup plus simple que de passer des jours ou des heures à relire son fichier dans tous les sens...

Je ne réponds pas aux messages privés.

AlexBoufini

8 août 2018 à 11:36:35

Effectivement je te remercie ça va plus vite, j'ai trouvé

désolé du dérangement et merci pour vos réponses !

Frogweb

8 août 2018 à 11:48:29

AlexBoufini a écrit:

Tout d'abord, merci beaucoup pour ta réponse Frogweb Par contre je ne vois pas de commentaire en ligne 318 ? Peu être pas sur la même ligne après ton copier coller dans ton logiciel? Mais je n'arrive pas à voir de quoi tu parle

C'est ici, tu as :

    /*.burger
    {
        position: relative;
        right: -40%;
        display: block;
        cursor: pointer;
        width: 40px;
        color: #5CADD3;
        font-size: 2.5em;
        padding-right:1em;*/
    }

alors que tu devrais avoir :

    /*.burger
    {
        position: relative;
        right: -40%;
        display: block;
        cursor: pointer;
        width: 40px;
        color: #5CADD3;
        font-size: 2.5em;
        padding-right:1em;
    }*/

dans ton code l'accolade n'est pas dans le commentaire et du coup ça ferme celle de @media all and (max-width:768px).
C'est pour ça que le code qui vient après est interprété en largeur normale.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AlexBoufini

9 août 2018 à 11:13:02

Dans la continuité des choses, pas moyens de refaire fonctionner mon menu toggle, il est bien présent, mais ne veut plus s'ouvrir. Peut-être une question d'hidden/visible, j'y suis depuis hier soir et pas moyen de voir d'où vien le problème. Je me permets de continuer sur ce poste, car le code est le même à quelques détails qui n'ont rien à voir avec le toggle. Merci d'avance, je continue a regardé de mon côté.

Frogweb

9 août 2018 à 11:25:07

Salut,

c'est ton menu normal qui passe par-dessus, d'ailleurs il devrait être caché.
Rajoute #menu {display:none} dans le @media 768px.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AlexBoufini

9 août 2018 à 12:19:22

Merci pour ta réponse, je suis tout de même toujours totalement bloqué

. J'ai peu être modifier quelques nom d'id qui font que rien ne fonctionne, je ne sais pas, je renvois mon code actuel au cas ou, sinon je ne te dérange pas plus de temp je vais refaire mon toggle de 0 avec un tuto

. Encore merci a toi pour ton temp !

<!DOCTYPE html>

<html>

<head>

	<title>WebAgency</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>


<body>
	

		

	<!--BARRE DE NAVIGATION-->

<header>
			

	<div id="logo">
			<img src="image/logo.png" alt="Logo_Webagency" class="Logo">
	</div>
		
	<div id="marge_toggle">
		
				<nav id="menu">
					
					<ul class="menu_nav">
						<li><a href="#banniere">Accueil</a></li>
						<li><a href="#service">Services</a></li>
						<li><a href="#projet">Portfolio</a></li>
						<li><a href="#map">Contact</a></li>
					</ul>

				</nav>
		</div>
		
		<div id="marge_toggle2">
				<label for="menu-toggle">&#9776;</label>
				<input type="checkbox"  id="menu-toggle"/>

			<ul id="menu2">

				 <li><a href="#banniere">Acceuil</a></li>
				 <li><a href="#service">Services</a></li>
				 <li><a href="#projet">Portfolio</a></li>
				 <li><a href="#map">Contact</a></li>

			</ul>
		</div>


		
		
</header>

	<!--IMAGE DE BANNIERE-->

<section>
		<div id="banniere">
				

				<div id="image_fillette">
					<img src="image/fillette.jpg" alt="Photo_fillette_peinture">
				</div>
				
				<div id="titre_principale">

					<h1><span class="bleu">Webagency</span>:L'agence de tous<br> vos projets !<br></h1>

					<p>Vous avez un projet web? La WebAgency vous aide à les réaliser !</p>

					<button>Plus d'Infos</button>
				</div>

					<div id="timeline2"></div>
					<div id="timeline"></div>
		</div>
</section>


	<!--NOS SERVICES-->

<section id="service">

	<div id="titre1">

				<h2>NOS SERVICES</h2>
				<hr>
				<i class="fas fa-circle"></i>


				<p>Spécialisé en création de sites internet et stratégie digitale,
				WebAgency regroupe tous les métiers interactifs<br> au service des entreprises et des marques.</p>
				
	</div>

		<div id="ecran_paragraphe">

			<div id="ecran">
				<img src="image/ecran.png" alt="i-Mac">
			</div>


			<div id="paragraphe">	
				<div id="uxdesign">
					<div class="icone">
						<i class="fas fa-chart-line">
						<i class="fas fa-circle"></i></i>
						</div>

						<div class="text_icone">
						<h3>UX design</h3>
						<p>Depuis 2009, WebAgency déploie des stratégies digitales innovantes et efficaces,<br> de la conception graphique et technique au web-marketing</p>
					</div>
				</div>

				<div id="uidesign">
					<div class="icone">
						<i class="fas fa-cubes">
						<i class="fas fa-circle"></i></i>
					</div>

					<div class="text_icone">
						<h3>UI design</h3>
						<p>Site de marque / institutionnel
						E-commerce
						Portail Web /<br> Blog
						Application mobile
						Intranet / extranet
						Big data</p>
					</div>
				</div>

				<div id="seo">
					<div class="icone">
						<i class="fas fa-chart-pie">
						<i class="fas fa-circle"></i></i>
					</div>

					<div class="text_icone">
						<h3>SEO</h3>
						<p>Stratégie de marque/
						Stratégie digitale/
						Transformation digitale/<br>
						Cahier des charges/
						Plan média online/
						Digital analytics</p>
					</div>
				</div>
			</div>
		</div>
</section>

	<!--NOS PROJETS-->


<section id="projet">

	<div id="titre2">
		<h2>NOS PROJETS</h2>
		<hr>
		<i class="fas fa-circle"></i>
		<p>
		En plus de 9 ans d’expérience, notre agence a réalisé de très nombreux projets dans de multiples domaines.<br> Découvrez toutes nos références en détails.</p>
	</div>

	<div id="nav_folio">
		<ul>
			<li><a href="">All works</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Creative</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Corporate</a><i class="fas fa-caret-down"></i></li>
			<li><a href="">Portfolio</a><i class="fas fa-caret-down"></i></li>
		</ul>
	</div>

			<div id="filtre_image"></div>

	<div id="portfolio">

	<figure class="eye_bloc">
		<img src="image/portfolio/01.jpg" alt="lunette" class="img1">
			<figcaption class="legende">
				<h4>Web Optic</h4>
				<p>Vente de lunettes en ligne</p>
				<i class="fas fa-eye"></i>
			</figcaption>
	</figure>


	<figure class="eye_bloc">
			<img src="image/portfolio/02.jpg" alt="lapinrose" class="img2">
		<figcaption class="legende">
			<h4>Lapin Rose</h4>
			<p>Le lapin rose a lunette</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/03.jpg" alt="Pompadour" class="img3">
		<figcaption class="legende">
			<h4>Pompadour</h4>
			<p>Original pompadour 1950</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/04.jpg" alt="feuille" class="img4">
		<figcaption class="legende">
			<h4>Dossier</h4>
			<p>Le jolie dossier blanc</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>
			
	<figure class="eye_bloc">
			<img src="image/portfolio/05.jpg" alt="sac" class="img5">
		<figcaption class="legende">
			<h4>Shopping bag</h4>
			<p>Sac blanc et noir</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
	
			<img src="image/portfolio/06.jpg" alt="batiments" class="img6">
		<figcaption class="legende">
			<h4>Paysage</h4>
			<p>Jolie paysage rougeoyant</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/07.jpg" alt="icone_fusée" class="img7">
		<figcaption class="legende">
			<h4>Fusée</h4>
			<p>Fusée sur fond beige</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	<figure class="eye_bloc">
			<img src="image/portfolio/08.jpg" alt="accessoire_bureau" class="img8">
		<figcaption class="legende">
			<h4>Accessoire</h4>
			<p>Accessoire bureautique</p>
			<i class="fas fa-eye"></i>
		</figcaption>
	</figure>

	</div>

</section>

	<!--FORMULAIRE DE CONTACT-->
		

		

<section id="map">

	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.221424608043!2d2.347636915834413!3d48.873055307627794!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d&#39;Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1532076602263"></iframe>

		

	<div id="filtre"></div>


		<form>

				

			<div id="contact_info">
				<h3>Conctact Info</h3>
				<p>WebAgency  S.A.S</p>
				<p>25 Rue d'Hauteville 7510 Paris</p>
				<p>Tél:01 02 03 04 05</p>
			</div>
			

			
			<div id="bloc_form">
				<input type="text" placeholder="Name" required="required" /><br>
				<input type="text" placeholder="Email" /><br>
				<input type="text" placeholder="Subject" /><br>

				<textarea name="message" placeholder="Message"></textarea>


				<div id="sendmessage">
					<button>Send Message</button>
				</div>
			</div>

					

		</form>

				

					
					

</section>
				<footer>
			</footer>
		
	</body>
</html>

/*-------------------POLICE ECRITURE--------------------*/

@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*-----------------------GENERAL--------------------------*/
section
{
	padding-top: 100px;
}

.fas
{
	color:#5CADD3;
}

body
{
	width: 100%;
	margin:0;
}

h2
{
	font-size: 2.5em;
}

/*--------------------BARRE DE NAVIGATION-----------------------*/
.logo
{
	width: 50%;
}

header
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	top:0;
	height: 100px;
	width: 100%;
	z-index: 100;
	background-color: white;
}

label
{
	display: none;
}

#menu2
{
	display: none;
}

#marge_toggle
{
	position: relative;
	left: 260px;
}

input[type="checkbox"]
{
	display: none;
}

nav
{
	width: 30%;
	font-family: 'robotoregular',arial, serif;
}

header ul
{
	display: flex;
	width: 60%;
	list-style-type: none;
}

header li a
{
	text-decoration: none;
	text-align: center;
	color: black;
	padding:38px 15px 0px 15px;
}

header li a:hover
{
	border-top: 3px #5CADD3 solid;
}

/*-------------------IMAGE DE BANNIERE-------------------*/
#banniere
{
	width: 100%;
	position: relative;
}

#banniere img

{
	width: 100%;
	height: auto;
}

#banniere button
{
	padding: 10px 15px 10px 15px;
	color: #fff;
	background-color: #5CADD3;
	border:none;
	border-radius: 2px;
}

#titre_principale
{
	position:absolute;
	top: 160px;
	left: 190px;
	text-align: left;
	color: white;
	font-size: 19px;
	font-family: 'robotoregular',arial, serif;
}

#titre_principale p
{
	font-size: 16px;
}

h1
{
	text-transform: uppercase;
}

.bleu
{
	color:#5CADD3;
}

#timeline
{
	position: absolute;
	background-color: #5CADD3;
	width: 170px;
	height: 5px;
	bottom: 4px;
}

#timeline2
{
	position: absolute;
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 5px;
	bottom: 4px;
}

/*--------------------------NOS SERVICES----------------------------*/
#service
{
	/*width: 100%;*/
	text-align: center;
	font-family: 'robotoregular',arial, serif;
}

#titre1
{
	padding-bottom: 35px;
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#titre1 .fa-circle
{
	border: 1.5px solid white;
	border-radius: 50%;
	z-index: 2;
	position: relative;
}

#titre1 hr
{
	width: 11em;
	position: absolute;
	z-index: 1;
	border:1px solid #ebebeb;
	top: 111px;
}

#ecran_paragraphe
{
	display: flex;
	justify-content: center;
	margin-bottom: 100px;
}

#ecran
{
	margin-right: 50px;
}

#paragraphe
{
	display:flex;
	flex-direction: column;
	margin-left: 50px;
	margin-top: 60px;
}

#paragraphe .fa-circle
{
	position:absolute;
	top:16px;
	margin-left:5px;
	background-color:#fff;
	border:0px solid;
	border-radius: 50%;
	padding: 2px;
}

#paragraphe .fas
{
	display: inline-block;
}

#uxdesign,#uidesign,#seo
{
	display: flex;
}

.fa-chart-line,.fa-cubes,.fa-chart-pie
{
	position:relative;
	padding:18px;
	border:1px solid #ebebeb;
	border-radius:50%;
}

.icone
{
	padding-top:40px;
		
}

.text_icone
{
	padding-left: 20px;
	text-align: left;
}

/*---------------------NOS PROJETS----------------------*/
#projet
{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
	/*width: 100%;*/
	background-color: #f5f5f5;
	font-family: 'robotoregular',arial, serif;
	overflow: hidden;
}

#titre2
{
	padding-bottom: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#titre2 .fa-circle
{
	border: 1.5px solid white;
	border-radius: 50%;
	z-index: 2;
	position: relative;
}

#titre2 hr
{
	width: 11em;
	position: absolute;
	z-index: 1;
	border:1px solid #ebebeb;
	top: 111px;
}

#nav_folio ul
{
	display: flex;
	/*width: 100%;*/
	height: 34px;
	padding:0;
	background-color: #E5E5E5;
	list-style-type: none;
	border-radius: 5px;
}

#nav_folio li 
{
	display: flex;
	flex-direction: column;
	width: 100px;
	text-align: center;
}

#nav_folio li a
{
	text-decoration: none;
	padding:8px 8px 8px 8px;
	border-radius: 2px;
	color: black;
}

#nav_folio li a:hover
{	
	background-color:#5CADD3;
	box-shadow:0px 3px 0px #438AAC;
	color: #fff;
}

.fa-caret-down
{
	visibility: hidden;
}

#nav_folio li:hover .fa-caret-down
{
	visibility: visible;
	display: block;
	color:#5CADD3;
	margin-top: -3px;
}

#portfolio
{
	padding-top: 50px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row;
	grid-row-gap: 25px;
	grid-column-gap: 25px;
}

#portfolio i
{
	position: relative;
	bottom: 115px;
	left: 80%;
	padding:10px;
	border:2px solid white;
	border-radius: 50%;
	background-color: #4592B0;
	color: white;
}

.eye_bloc h4
{
	padding: 0px 15px 0px 15px;
}

.eye_bloc p
{
	padding: 0px 15px 0px 15px;
}

.legende
{
	position: absolute;
	display: block;
	right: 0;
	left: 0;
	bottom:0px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	visibility: hidden;
}

figure
{
	position: relative;
	display: inline-block;
	margin:0;
	overflow: hidden;
	width: 300px;
	height:200px;
}

figure img
{
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	bottom:0;
	left:0 ;
}

figure:hover figcaption
{
	visibility: visible;
}

/*---------------------FORMULAIRE DE CONTACT----------------------*/

#map
{
	position: relative;
	width: 100%;
	height: 600px;
	font-family: 'robotoregular',arial, serif;
}

iframe
{
	width: 100%;
	height: 600px;
	position: absolute;
	z-index: 1;
	border:0;
}

#filtre
{
	width: 100%;
	height: 600px;
	position: absolute;
	z-index: 2;
	background-color:rgba(152,199,240,0.35);
}


	
form
{

	background-color:rgba(255,255,255,0.50);
	width: 250px;
	position: absolute;
	margin-left: 75%;
	margin-top: 70px;
	z-index: 3;
	border-radius: 3px;
}

#contact_info
{
	padding-left: 23px;
	padding-top: 7px;
	line-height: 20%;
}

form input
{
	width: 200px;
	margin-bottom: 15px;	
}

#bloc_form
{
	padding-left: 23px;
	padding-bottom: 7px;
}

textarea
{
	width: 198px;
	height: 150px;
}

#sendmessage button
{
	border:none;
	padding: 5px 10px 5px 10px;
	border-radius: 2px;
	background-color: #5CADD3;
	box-shadow:0px 3px 0px #438AAC;
	color: #fff;
}

/*------------------------RESPONSIVE TABLETTE--------------------------*/

@media all and (max-width:1281px)

{	/*IMAGE DE BANNIERE*/

	#titre_principale
	{
		position:absolute;
		top: 180px;
		left: 40px;
		font-size: 16px;
	}

	#titre_principale p
	{
	font-size: 13px;
	}

	/*NOS PROJETS*/

	#portfolio
	{
	grid-template-columns: repeat(2, 1fr);
	padding-top: 50px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-auto-flow: row;
	grid-row-gap: 25px;
	grid-column-gap: 25px;
	}

	/*FORMULAIRE DE CONTACT*/

	form
	{
		width: 250px;
		margin-left: 74%;
		margin-top: 185px;
	}
	
	
}
/*-------------------------RESPONSIVE SMARTPHONE-------------------------*/

@media all and (max-width:768px)
{

	/*BARRE DE NAVIGATION*/

	header
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 85px;
	}
	
	header ul
	{
		display: flex;
		justify-content: center;
		margin-left: 190px;
	}

	header li a
	{
		padding:25px 10px 0px 10px;
	}


	header li a:hover
	{
		border-top: 0px #5CADD3 solid;
	}

	#marge_toggle
	{
		visibility: hidden;
	}

	.menu_nav
	{
		padding-top: 10em;
	}

	label 
	{
  		cursor: pointer;
 		position: absolute;
 		display: flex;
 		bottom: 40px;
 		right:60px;
 		top: 12px;
 		font-size: 50px;
 		color: #5CADD3;
	}
	
	#menu-toggle 
	{
  		visibility: hidden;
  	}

  	#menu-toggle:checked + #marge_toggle2
	{
	 	display: block;
	}

	#menu
	{
		display: none;
	}
	#menu2
	{
	 	visibility: visible;
	}

	#marge_toggle2 li
	{
		right:100px;
		font-size: 30px;
		background-color: rgba(92,173,211,0.50);
		padding: 15px;
	}

	/*IMAGE DE BANNIERE*/

	#image_fillette
	{
		/*width: 100%;*/
	}

	#image_fillette img
	{
		/*width: 100%;*/
		height: auto;
	}

	#titre_principale
	{
		position: relative;
		text-align: left;
		top: 0;
		left:0;
		padding: 5px;
		color: black;
		text-align: center;
	}

	#titre_principale p
	{	
		font-size: 25px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	h1
	{
		margin-bottom: 10px;
		font-size: 43px;
	}

	#banniere button
	{
		padding: 20px 80px 20px 80px;
		font-size: 30px;
	}

	#timeline, #timeline2
	{
		display: none;
	}

	/*NOS SERVICES*/

	#ecran
	{
		display: none;
	}

	/*NOS PROJETS*/

	#portfolio
	{
		grid-template-columns: 1fr;
	}

	/*FORMULAIRE DE CONTACT*/

	form
	{
		position: absolute;
		margin-left: 52%;
		margin-top: 195px;
	}

	iframe
	{
		width:100%;
		height: 600px;
		position: absolute;
		z-index: 1;
		border:0;
	}

}

/*-------------------------RESPONSIVE SMARTPHONE 2------------------*/

@media all and (max-width: 380px)
{
	/*IMAGE DE BANNIERE*/

	#titre_principale
	{
		position: relative;
		padding: 5px;
		text-align: center;
	}

	#titre_principale p
	{	
		font-size: 22px;
		padding-top: 60px;
		padding-bottom: 60px;
	}

	h1
	{
		margin-bottom: 10px;
		font-size: 30px;
	}
	
	/*NOS PROJETS*/

	#nav_folio li 
	{
		width: 90px;
	}

	/*FORMULAIRE DE CONTACT*/

	form
	{
		position: absolute;
		margin-left: 20%;
		margin-top: 195px;
	}

	iframe
	{
		width: 100%;
		height: 600px;
		position: absolute;
		z-index: 1;
		border:0;
	}

}

Frogweb

9 août 2018 à 15:15:00

ça ne peux pas fonctionner...

Ligne 58 de ta CSS tu mets #menu2 {display:none} et pour le faire apparaître tu mets, ligne 610, #menu2 {visiblity:visible}.

Il faut que tu utilise soit display:none/block, soit visibility:hidden/visible.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

AlexBoufini

9 août 2018 à 15:59:03

Exacte, ça marche. Erreur de débutant, que je ne referais plus promis

. Encore merci pour ton temps !

Frogweb

9 août 2018 à 16:01:12

AlexBoufini a écrit:

Exacte, ça marche. Erreur de débutant, que je ne referais plus promis . Encore merci pour ton temps !

Pas de soucis ,le forum est là pour ça.

-
Edité par Frogweb 9 août 2018 à 16:01:25

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !