Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu

Cacher un élement

m406278
    9 octobre 2021 à 10:26:20

    Bonjour,

    Je code mon site depuis peu et en chargeant mes photos dans mon code html je me suis rendu compte que ma div menu m'empêche de mettre mes photos en haut de page.

    Voici le problème. L'espace blanc correspond à ma div menu dans mon code html (menu burger qui ne s'ouvre que si on clic sur l'icône)

    et si on descend on peut découvrir mes photos. 

    J'aimerais que mes photos se positionne juste en dessous du titre, je sais que ce doit être une manipulation toute bête mais j'ai beau essayer plein de manipulation je n'y arrive pas.

    voici mon code html

    <!DOCTYPE html>
<html lang="fr" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/Personnages.css" />
		<title>Laurine Djoudi - Photographie</title>
	</head>
	
	

	<body>
		<header>Laurine Djoudi - Photographie</header>
		<section class="menuburger">
		<svg class="hidden">
            <symbol id="icon-menu" viewBox="0 0 119 25">
				<title>menu</title>
				<path d="M36,8 L36,0 L100,0 L100,8 L36,8 Z M0,8 L0,0 L24,0 L24,8 L0,8 Z M0,28 L0,20 L71,20 L71,28 L0,28 Z"/>
			</symbol>
			<symbol id="icon-close" viewBox="0 0 24 24">
				<title>close</title>
				<path d="M24 1.485L22.515 0 12 10.515 1.485 0 0 1.485 10.515 12 0 22.515 1.485 24 12 13.484 22.515 24 24 22.515 13.484 12z"/>
			</symbol>
		</svg>
		<main>
			
			<div class="content">
				<div class="background"></div>
			</div>
			<nav class="menu">
				<div class="menu__item menu__item--1" data-direction="bt">
					<div class="menu__item-inner">
						<div class="mainmenu__item">
							<a href="Laurinedjoudi-photographie.html" class="mainmenu__item">Home</a>
							<ul id="menu-accordeon">
								<li><a href="#">Studio</a>
								   <ul>
									  <li><a href="Portraits.html">Portraits</a></li>
									  <li><a href="Personnages.html">Personnages</a></li>
									  <li><a href="Femmes.html">Femmes</a></li>
								   </ul>
						    </ul>
								</li>
								<a href="./Contact.html" class="mainmenu__item">Contact</a>
							 
							 
						</div>
					</div>
				</div>
	

				<button class="action action--menu"><svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg></button>
				<button class="action action--close"><svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg></button>
			</nav>
		</main>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/TweenMax.min.js"></script>
		<script src="js/demo.js"></script>
	</section>

<section class="container">
    <div id="macy">
	  <div class="box"><img src="images/_MG_6792.JPG"></div>
	  <div class="box"><img src="images/_MG_6797.JPG"></div>
	  <div class="box"><img src="images/_MG_6876.JPG"></div>
	  <div class="box"><img src="images/_MG_6877.JPG"></div>
	  <div class="box"><img src="images/_MG_7875.JPG"></div>
	  <div class="box"><img src="images/Djoudi_PH2_21_PERROT0401_MG_7860.jpg"></div>
	  <div class="box"><img src="images/Djoudi_PH2_21_PERROT0401_MG_7860.jpg"></div>
	  <div class="box"><img src="images/Djoudi_PH2_21_PERROT0403_MG_7954.jpg"></div>
	  <div class="box"><img src="images/Djoudi_PH2_21_PERROT0404_MG_7979.jpg"></div>
	  <div class="box"><img src="images/Djoudi_PH2_21_PERROT0405_MG_8025.jpg"></div>
    </div>
</section>
<script src="macy.js"></script>
<script>
    var macy = Macy({
         container: '#macy',
         trueOrder: false,
         waitForImages: true,
         margin: 24,
         columns: 4,
         breakAt: {
             1200: 4,
            940: 3,
            520: 2,
            400: 1
        }
    });
	macy.runOnImageLoad(function () {
     var show = document.getElementById("macy");
	 show.classList.add("show")
  macy.recalculate(true, true);
});
</script>	





	</body>
</html>

    Et voici mon css

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
@import url('https://fonts.googleapis.com/css2?family=Caramel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');

/* Head */

a{color: black;}

header{
color: black;
text-align: center;
font-family: 'Caramel', cursive;
font-size: 30px;
}

p{ color: black;
text-align: left;
font-family: font-family 'Scheherazade New', serif;
font-size: 100%; }

/* Menu */

*::after,
*::before {
	box-sizing: border-box;
}

.menuburger {
	--color-text: rgb(0, 0, 0);
	--color-bg: #ffffff;
	--color-link: rgb(255, 255, 255);
	--color-link-hover: #f20c40;
	--color-bg-item1: #3c3d41;
	--color-item-alt: #494d54;
	--color-quote: #5b677a;
	--color-info: #57535a;
	--color-title: #e23434;
	--color-tagline: #e2e2e2;
	font-family: "europa", Futura, Arial, sans-serif;
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
	background-color: #fff;
	background-color: var(--color-bg);
	overflow: hidden;
	padding: 6rem 0 0 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	transition: color 0.2s;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto;
	fill: currentColor;
}

main {
	position: relative;
	width: 100%;
}


.action {
	background: none;
	border: 0;
	color: rgb(0, 0, 0);
	cursor: pointer;
	padding: 0;
}

.action--menu {
	pointer-events: auto;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 1000;
}

.menu--open .action--menu {
	pointer-events: none;
}

.action--close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	z-index: 1000;
	opacity: 0;
	padding: 0 0.5rem;
}

.icon--menu {
	width: 2rem;
}

.icon--close {
	width: 1rem;
}

.menu {
	text-align: center;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(3,33.33%);
	pointer-events: none;
}

.menu--open {
	pointer-events: auto;
}

.menu__item {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.menu__item-inner {
	overflow: hidden;
	transform: translate3d(100%,0,0);
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.menu__item--1 .menu__item-inner {
	background: var(--color-bg-item1);
}


	.menu {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		grid-template-columns: 10% 60% 30%;
		grid-template-rows: 50% 50%;
		grid-template-areas: 
            "item3 item2 item1"
            "item4 item5 item1";
	}
	.menu__item {
		height: 100%;
	}
	.menu__item--1 {
		grid-area: item1;
	}


	.menu__item-inner {
		align-items: center;
	}
	.mainmenu,
	.sidemenu {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mainmenu__item {
		font-size: 2vw;
		text-transform: lowercase;
		overflow: visible;
		margin: 0.5rem 0;
		padding: 0 0.5rem;
		position: relative;
		transition: color 0.3s;
	}
	.mainmenu__item:hover {
		color: var(--color-item-alt);
	}
	
	.mainmenu__item:hover::after {
		opacity: 1;
		transform: scale3d(1,1,1);
	}
	#menu-accordeon {
		padding:0;
		margin:0;
		list-style:none;
		text-align: center;
		width: 180px;
	  }
	  #menu-accordeon ul {
		padding:0;
		margin:0;
		list-style:none;
		text-align: center;
	  }
	  
	  
	  #menu-accordeon li li {
		 max-height:0;
		 overflow: hidden;
		 transition: all .5s;
		 border-radius:0;
		 box-shadow: none;
		 border:none;
		 margin:0
	  }
	  #menu-accordeon a {
		display:block;
		text-decoration: none;
		padding: 8px 0;
		font-family: verdana;
		font-size:2vw
	  }
	  
	  #menu-accordeon li:hover li {
		max-height: 15em;
	  }

/* Grid */
.container{
	width: 90%;
	margin: 0 auto;
}
#macy{
	opacity: 0;
	transition: all 0.5s;
}
.show{
	opacity: 1!important;
}
.box img{
	width: 100%;
	height: 0 auto;
	display: block;
	margin-top: 0 auto;
}

    Merci pour votre aide.


    • Partager sur Facebook
    • Partager sur Twitter
    Lamecarlate
    • HTML / CSS
      9 octobre 2021 à 11:12:39

      Bonjour,

      Mauvais titre

      Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

      Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

      De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

      Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

      Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

      (titre originel : Menu)

      • Partager sur Facebook
      • Partager sur Twitter

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

      Menu

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown