1448 sujets

Web Mobile et responsive web design

Bonjour, j'ai réalisé un site dont le background est composé de div "penchés" (voir image). Quand je zoom ou dezoom, le background ne bouge pas, mais c'est quand je redimensionne la fenêtre que certains div se déplace ( je pense que c'est à cause des margin négatif + les z-index). Auriez-vous des piste pour résoudre ce problème ? Merci.

L'image :

upload/1545398700-73741-monsite.png



Le code HTML :


<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Titre</title>
	<link rel="shortcut icon" href="logo.ico">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1>LOGO</h1>
		<nav>
			<input type="checkbox" id="toggle">
			<label for="toggle">&#9776</label>
			<ul class="menu">
				<li><a href="#">Accueil</a></li>
				<li class="stylemenu"><a href="#">Services</a></li>
				<li class="stylemenu"><a href="#">A propos</a></li>
				<li class="stylemenu"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<div class="barre">
		<ul>
			<li><a href="#one" id="p1"></a></li>
			<li><a href="#two" id="p2"></a></li>
			<li><a href="#three" id="p3"></a></li>
		</ul>
	</div>
	<script type="text/javascript">
		window.onscroll = function() {myFunction()};

		function myFunction() {
			var Position = document.getElementById("one").offsetTop;
			var Position1 = document.getElementById("two").offsetTop;
			var Position2 = document.getElementById("three").offsetTop;
			var x = document.body.scrollTop || document.documentElement.scrollTop;
			if (x >= ((Position1+Position2)/2)){
				document.getElementById("p3").style.backgroundColor = "white";
				document.getElementById("p3").style.transition = "0.8s";
				document.getElementById("p2").style.backgroundColor = "transparent";
				document.getElementById("p1").style.backgroundColor = "transparent"; 
			}else if (x >= ((Position1+Position)/2) && x<((Position1+Position2)/2)){
				document.getElementById("p2").style.backgroundColor = "white";
				document.getElementById("p2").style.transition = "0.8s";
				document.getElementById("p3").style.backgroundColor = "transparent";
				document.getElementById("p1").style.backgroundColor = "transparent"; 
			}else if (x < ((Position1+Position)/2)){
				document.getElementById("p1").style.backgroundColor = "white";
				document.getElementById("p1").style.transition = "0.8s";
				document.getElementById("p3").style.backgroundColor = "transparent";
				document.getElementById("p2").style.backgroundColor = "transparent"; 
			}
		}

	</script>
	<div class="rouge" id="one">
		
	</div>
	<div class="bleu" id="two">
		<div class="bleu_haut"></div>
	</div>
	<div class="gris" id="three">
		<div class="gris_haut"></div>
	</div>
</body>
</html>




Le code CSS :



html{
	scroll-behavior : smooth;
}
*{
	margin: 0;
	padding: 0;
	font-family: 'Ailerons', sans-serif;

}
header{
	text-align: center;
	z-index: 99;
	width: 100%;
	background-color: #18132E;
	box-shadow: 2px 2px 5px black;
	

}
h1{
	display: inline-block;
}
.barre{
	z-index: 99999;
	margin:35vh 0 0 98%;
	display: inline-block;
	position: fixed;
}


.barre>ul>li{
	list-style:none;
	margin-top: 10px;
}
.barre>ul>li>a{
	padding: 0px 8px;
	border:solid 1px white;
	border-radius: 100%;
}
.stylemenu{
	border-left: solid 1px white;
}
a > .logo{ 
	display: inline-block;
	height: 86px;
	width: 200px;
	margin-left: 15px;
	background: url(titre.png);
	background-repeat: no-repeat;

	
}
a >.logo:hover{
	background:url(titrehover.png);
	background-repeat: no-repeat;
	transition: 2s;
}
nav >.menu{
	margin-top:10px;
	padding: 10px;
	display: inline-block;

}
nav{
	width: 700px;
	margin: 15px auto;
	display: inline-block;
	vertical-align: top;
}
nav > li{
	color: white; 
}
nav > ul > li{
	display: inline-block;
}
nav > ul > li > a{
	font-size: 24px;
	padding: 5px 30px;
	color: white;
	text-decoration: none;
}
nav > ul > li > a:hover{
	color: #BC1A1A;
	transition:1s;

}
label{
	font-size: 40px;
	line-height: 70px;
	color: white;
	display: none;
}
#toggle{
	display: none;
}
@media screen and (max-width: 880px){
	.barre{
		float: right;
	}
}

@media screen and (max-width: 990px){
	a > .logo{
		width: 250px;
		margin-left:auto;
		margin-right:auto;
	}

	label{
		margin-left:5%;
		display: inline-block;
		cursor: pointer;
	}
	label:hover{
		transition-duration: 1s;
		color: #D11720;
		transform: rotate(180deg);
	}
	nav{
		width: 50px;
		float: right;
	}

	nav >.menu{
		margin:0;
		text-align: left;
		display: none;		
	}
	nav > ul > li > a:hover{
		border-bottom: none;
	}
	nav > ul > li{
		margin: 0;
		display: block;
	}
	nav > ul > li > a{
		font-size: 16px;
		
	}
	nav input[type=checkbox]:checked ~ .menu{
		display: block; 
	}
	
}
.rouge{
	z-index: -2;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	background-color: #BC1A1A;
	
}
.bleu{
	margin-top:-10%;
	overflow: hidden;
	height: 105vh;
	width: 100%;
	clear: both;

}
.bleu_haut{
	z-index: 1;
	margin-top: 2%;
	margin-left: -10%;
	width: 200%;
	height: 200%;
	background-color: #18132E;
	transform: rotate(-5deg);

}
.bleu_haut>p{
	z-index: 9999;
	padding-top:10%;
	margin-left: 30%;
	transform: rotate(5deg);
}
.gris{
	margin-top:-20%;
	overflow: hidden;
	height: 110vh;
	width: 100%;
}
.gris_haut{
	z-index: 4;
	margin-top: 15%;
	margin-left: -20%;
	width: 200%;
	height: 200%;
	background-color: grey;
	transform: rotate(5deg);

}
salut,

j'avais voulu à un moment reprendre ce genre de thème pour un site et je souhaitai en plus pouvoir animer ces formes.

Je me suis alors tourné vers le SVG tu pourras créer les formes que tu souhaites et même les animer au besoin (transform en css3).

bon courage
Meilleure solution