26031 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens ici afin de demander votre sur un petit soucis que je rencontre sur mon site.

J'ai mis en place un effet parallaxe sur mon site (enfin, semi-parallaxe je dirais plutôt)

Mon problème, est que toute la partie qui coulisse vient passer par-dessus l'entête..
De plus, j'ai un soucis avec les différents bloques : lorsque que je retravaille la taille du site (que je tente de rendre un minimum responsive) les bloques se superposes (j'en ai même tout une partie qui se chevauche un peu alors qu'ils devrait être séparer je comprends pas trop)

Je suis loin d'être un foudre-de-guerre dans le domaine donc voilà !

Le code HTML et CSS :


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Accueil">
   		<meta name="keywords" content="HTML,CSS">
		<meta name="author" content="KLEIN Dimitri">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>
			Décapsuler un processeur - ITEC42
		</title>
	</head>
	<body>
		<header>
			<img style="width: 293px; height: 150px; margin-left: 100px;"
				src="/home/texnician/Documents/ITEC/SITE_WEB/images/Logomini.png"
				alt="Logo de ITEC" />
			
			<br>

			<div id="menu">
				<ul>
			  		<li>
			  			<input type="button" name="MAIN" value="Accueil" class="button" onclick="self.location.href='index.html'">
			  			<!--<ul>
			  				<li>
			  					<a href="#">Sous-item 1</a>
			  				</li>
			  				<li>
			  					<a href="#">Sous-item 2</a>
			  				</li>
			  				<li>
			  					<a href="#">Sous-item 3</a>
			  				</li>
			  			</ul>-->
			  		</li>
			  		<li>
			  			<input type="button" name="ARTC" value="Articles" class="button" onclick="self.location.href='artc.html'">
			    		<!--<ul>
			      			<li>
			      				<a href="#">Sous-item 1</a>
			      			</li>
			      			<li>
			      				<a href="#">Sous-item 2</a>
			      			</li>
			      			<li>
			      				<a href="#">Sous-item 3</a>
			      			</li>
			    		</ul>-->
			  		</li>
			  		<li>
			  			<input type="button" name="EVENT" value="Evenements" class="button" onclick="self.location.href='event.html'">
			  			<ul>
			  				<li>
			  					<a href="#">Tournois</a>
			  				</li>
			  			<!--<li>
			  					<a href="#">Sous-item 2</a>
			  				</li>
			  				<li>
			  					<a href="#">Sous-item 3</a>
			  				</li>-->
			  			</ul>
  					</li>
				</ul>
			</div>
		</header>

		<div class="parallax0">
		</div>

		<div class="textbox0">
			<p id="warning">
				<b>ATTENTION !</b> Les manipulations qui vont suivres, ainsi que le fait même de décapsuler son processeur <b>ANNULE</b> toutes garanties constructeur et revendeur.
				<br>
				Aussi, si vous n'êtes pas sûr de vous dans cette manipulation, ne la faite pas.
				<br>
				<b>En cas de casse ou d'endommagement du processeur, nous déclinons toutes reponsabilités.</b> C'est à vos risques et périls.
			</p>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<h3 style="text-decoration: underline; margin-left: 5px;">
					Décapsulage d'un CPU : INTEL Core I7 7700K
				</h3>
				<br>
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%; margin-left: 5px;"
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/2cpu.jpg"
						alt="Processeur" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Bonjour à toutes et à tous, aujourd'hui, je vous ai réalisé un petit tutoriel concernant le décapsulage de processeur.
					<br>
					Ici, notre cobaye est un Core I7 7700K de chez INTEL.
					<br>
					Depuis pas mal de temps, les CPU de la marque ont de gros soucis de chauffe : les températures atteintes lors d'une activité CPU sont tout simplement élevé ; surtout si overclocké.
					<br>
					Effectivement, INTEL à fait le choix de cesser de souder l'IHS (Integrated Heat Spreader, la "capsule") sur le PCB (pour Printed Circuit Board ou encore Circuit Imprimé en Français) pour ne seulement que les coller tout les deux ensembles avec du silicone. De plus, dans de nombreux cas, la pâte thermique utilisé n'est pas appliqué de manière uniforme sur le DIE (la puce) ce qui ne favorise pas un bon échange thermique avec l'IHS.
					<br>
					Cependant, cette "colle" à un avantage : nous pouvons décapsuler le processeur. C'est-à-dire, retirer l'IHS du PCB et cela dans le but de changer de pâte thermique afin d'améliorer l'échange de chaleur vers l'IHS.
					<br>
					Pour cela, nous n'allons pas utiliser une lame de rasoir, c'est une technique plus ou moins dangereuse et pour l'Homme qui peut se couper et pour le DIE et le PCB qui peuvent être endommagés. Nous allons donc préférer un outil nous provenant de chez <b>Rockit Cool</b>, une entreprise Américaine qui à développé deux outils bien utiles : le Rockit 88 et le Re-Lid Kit.
					<br>
					Le premier permettant simplement et en toute sécurité le décapsulage du processeur en le maintenant droit et dans l'imposibilité de bouger, ainsi quand ayant une distance limite de la "lame" qui va décoller le tout afin de ne pas faire de dégats.
					<br>
					Le second, que nous verrons plus tard dans ce tutoriel, nous permettra de recoller l'IHS sur le PCB.
					<br>
					<br>
					Outils nécessaires :
					</p>
					<ol>
						<li>
							Le Rockit88
						</li>
						<li>
							Le Re-Lid Kit
						</li>
						<li>
							Du métal liquide ou de la pâte thermique
						</li>
						<li>
							De la colle
						</li>
					</ol>
					Budget à prévoir hors processeur : ~ 50 €
			</div>
		</div>

		<div class="parallax0">
		</div>

		<div class="parallax1">
		</div>
		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/3rockit88.jpg"
						alt="L'outils Rockit88" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Ce petit outil au tarif relativement abordable : 30$ (Je metterai les liens pour les divers achats en fin d'article).
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;"
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/4triangles.jpg"
						alt="Placement du processeur dans le Rockit88" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					L'outil est en deux parties : une simple, avec la place pour déposer le processeur ; l'autre avec la "lame".
					<br>
					Lors du placement du processeur dans l'emplacement prévu pour, il faut bien faire attention au marqueur triangulaire présent et sur le processeur et sur la partie du Rockit 88. Voyez par vous même sur la photo ci-dessus.
					<br>
					Le respect de ce placement est primordial. En effet, si non respect de cette consigne, la distance du DIE ne sera pas la même comparé à la "lame". Et si la "lame" touche le DIE... poubelle.
					<br>
					Une fois placé, vous pouvez positionner par dessus la partie contenant la "lame" et la fixer avec les trois vis (il faut serrer au contact, ne pas forcer c'est inutile).  
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p style="width: 100%; margin-left: 5px;">
					Vous devriez avoir ceci à cet étape du tutoriel :
				</p>
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;"
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/5rockit88f.jpg"
						alt="Rockit88 fermé" />
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/6rockit88s.jpg"
						alt="Rockit88 fermé avec serrage de la vis" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Maintenant, il vous suffit de vous servir de la clef Allen fournit et de serrer la vis sur le coté de l'outil. Vous atteindrez un moment de résistance, allez-y doucement mais continuez de serrer. Au boût de quelques secondes, vous entendrez un TOC, le serrage n'aura plus de résistance : vous venez de décapsuler le processeur.
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/7ihsdie.jpg"
						alt="L'IHS et le DIE séparé" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Et voilà ! Il suffit maintenant de déviser le Rockit88, de retirer l'IHS qui s'est décollé. Gardez le PCB dans l'outil : ce sera plus simple pour la suite.
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/8ihss.jpg"
						alt="IHS avec grattoir" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Mettons de côté le PCB, tout en le gardant dans l'outil donc. Prenez l'IHS, de préférence, posez le à plat et sur une surface qui ne risque pas de le rayer. C'est mieux.
					<br>
					À l'aide du grattoir en bois fournit avec le Rockit88, gratté le silicone présent du l'IHS. De tel sorte à ne laisser que de fines traces mais sans sur-élévation. En ce qui concerne la pâte thermique, retirez-là à l'aide d'un chiffon 100% cotton (c'est important, car le cotton ne conduit pas l'électricité et à une faible électricité statique), humidifiez le tissu avec de l'alcool modifié à 90%, et nettoyé l'IHS de la pâte thermique. Pensez à repasser un petit coup du chiffon avec une partie sèche.
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p style="width: 100%; margin-left: 5px;">
					Vous devriez avoir un résultat proche de celui-ci :
				</p>
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/9ihsp.jpg"
						alt="IHS propre" />
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/10die.jpg"
						alt="DIE propre" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Faites exactement la même opération sur le PCB et le DIE (c'est pour cela que on l'a gardé dans l'outil, c'est plus pratique et sécurisé).
					<br>
					<br>
					Et voilà, tout beau, tout propre !
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/12serringue.jpg"
						alt="Serringue d'aluminium liquide sur le DIE" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Maintenant, nous allons changer la pâte thermique du DIE. Pour cela, nous avons choisi de l'aluminium liquide de chez <b>Thermal Grizzly</b> : de la "Conductonaut".
					<br>
					Nous protégeons le PCB avec de la bande adhésive, cela peut être pratique, surout si c'est la première fois que vous le faite. Attention, l'aluminium liquide sort très rapidement de la serringue ! Et il ne faut pas en mettre non plus en trop grande quantité. Commencez par un mettre un peu, à l'aide du grattoir en bois, étalez le tout un maximum. n'allez pas trop proche du bord, car en posant l'IHS, le tout va s'applatir et combler le vide (évitons d'en mettre à côté).
					<br>
					Attention cependant, il s'agit de métal ! Cet aluminium liquide est donc fortement conducteur. Si vous ne voulez pas prendre de risque, nous vous conseillons de vous servir de la pâte thermique de la même marque : de la "Kryonaut". Il s'agit d'une excellente pâte, où les résultats obtenus en pratique sont assez proches tout en gardant une sécurité (de ne pas court-circuiter le processeur, sinon ... poubelle).
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p style="width: 100%; margin-left: 5px;">
					Le résultat :
				</p>
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/13dieml.jpg"
						alt="DIE avec l'aluminium liquide dessus" />
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/14diemlp.jpg"
						alt="Re-Lid Kit sur le PCB avec le DIE" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Maintenant, nous allons refixer l'IHS sur le PCB. Pour cela, nous allons nous servir du Re-Lid Kit cité en introduction.
					<br>
					L'outil est très simple d'utilisation, vous ne pouvez pas vous tromper pour le sens de pose.
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/15ihsp.jpg"
						alt="Re-Lid Kit avec IHS" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Nous pouvons en suite poser l'IHS sur le DIE, vérifiez bien que l'IHS soit bien en place entre le plastique du Re-Lid Kit ! (appuyez un peu dessus pour l'enfoncer).
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/16ihspc.jpg"
						alt="COllage de l'IHS" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Ensuite, il va falloir faire en sorte que la "capsule" ne bouge plus. Pour la refixer, nous utiliserons de la super-glue <b>Loctite</b> à disposer au moins sur les 4 coins de l'IHS (bougez un peu le tout pour que la colle passe en dessous de la plaque).
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p style="width: 100%; margin-left: 5px;">
					Et pour finir, on vient serrer le tout avec l'autre partie du Re-Lid Kit, une étoile à trois branche (les vis sont les mêmes que pour le Rockit88).
					<br>
					Pareil ici, il faut serrer au contact pas plus.
				</p>
				<p class="float" style="width: 19%; margin-left: 5px;">
					<img style="width: 100%; height: 100%;" 
						src="/home/texnician/Documents/ITEC/SITE_WEB/images/DECAPSULAGE/18rockit88relid.jpg"
						alt="Serrage et fixation" />
				</p>
				<p style="width: 100%; margin-left: 5px;">
					Il ne nous reste plus qu'à attendre au minimum 20 min / une demi-heure (2 heures pour être large...) et nous pourrons dévisser le Kit.
					<br>
					Votre processeur est fin prêt !
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox0">
			<p style="border: 5px; border-style: solid; padding: 5px; background-color: white;">
				Pour conclure, cette manipulation n'est pas forcément à la portée de toutes et de tous. Il faut être dans un environnement calme, être très concentré. 
				<br>
				Pour une première fois celà va vous prendre un bon boût de temps (30/40 min environs).
				<br>
				En moyenne, des gains de température estimé à 15°C, dans une fourchette de 10°C à 20°C en fonction du modèle du processeur et de sont état de base. Ce n'est pas rien, surtout si on est adepte de l'overclocking.
				<br>
				N'hésitez pas à nous suivre sur les réseaux sociaux, les liens sont disponible dans le pied-de-page !
			</p>
		</div>

		<div class="parallax1">
		</div>

		<div class="textbox1">
			<div class="text">
				<p style="width: 100%; margin-left: 5px;">
				Achat du Rockit88, Re-Lid Kit et de la super-glue Loctite : <a href="https://rockitcool.myshopify.com/collections/all" style="text-decoration: none;">Rockit Cool</a>
				Attention lors de l'achat du Re-Lid Kit, il y en a deux différent, pensez à bien lire leur discription ! Vous aurez besoin de connaître le chipset de votre processeur. Les versions 1150 et 1155 ne font pas QUE ces socket, donc lisez bien.
				<br>
				Achat de la pâte thermique : <a href="https://www.amazon.fr/Thermal-Grizzly-Conductonaut-graisse-thermique/dp/B01A9KIGSI/ref=sr_1_4?ie=UTF8&qid=1492195035&sr=8-4&keywords=thermal+grizzly" style="text-decoration: none;">Métal Liquide <b>Thermal Grizzly</b></a>
				ou bien <a href="https://www.amazon.fr/Thermal-Grizzly-TG-K-001-RS-Thermique-Kryonaut/dp/B011F7W3LU/ref=sr_1_1?ie=UTF8&qid=1492195035&sr=8-1&keywords=thermal+grizzly" style="text-decoration: none;">Pâte thermique <b>Thermal Grizzly</b></a> 
				notez que la pâte thermique simple est excellente pour faire la liaison entre l'IHS et le ventirad ! (évitez le métal liquide ici).
				</p>
				<p style="text-align: right; size: 0.5em;">
					Vendredi 14 avril 2017 20:55
				</p>
			</div>
		</div>

		<div class="parallax1">
		</div>

		<footer>
		<br>
			<a href="https://www.facebook.com/itec42/" style="text-decoration: none;">
				<img style="border: 0px; width: 50px; height: 50px;" 
				src="/images/fb.png"
				alt="facebook" />
			</a>
			<a href="/images/snapcode.png">
				<img style="border:0; width: 50px; height: 50px;" 
				src="/images/snapcode.png"
				alt="SnapCode" />
			</a>
    		<a href="http://jigsaw.w3.org/css-validator/check/referer" style="text-decoration: none;">
        		<img style="border:0; width:88px; height:31px;"
            	src="http://jigsaw.w3.org/css-validator/images/vcss"
            	alt="CSS Valide !" />
    		</a>
		</footer>
	</body>
</html>



CSS :

/*
style.css
---------

By Dimitri KLEIN
*/ 

html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
@font-face {
src: url("/home/texnician/Documents/ITEC/SITE_WEB/polices/zeroes three.ttf");
font-family: "zeroes";
font-weight: normal;
font-style: normal;
}
body {
margin : 0 auto;
position: relative;
height: 100%;
width: 100%;
font-family: "zeroes", Arial, "Arial Black", "Comic Sans MS", Georgia, Verdana, sans-serif;
}
header {
position: fixed;
width: 100%;
min-height: 190px;
background: linear-gradient(60deg, #999, #111);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8), 0 6px 20px 0 rgba(0,0,0,0.20);
clear: both;
}
footer {
min-height: 100px;
width: 100%;
background: linear-gradient(60deg, #999, #111);
border-top: 1px solid #444;
}

/*Bouton*/

.button {
font-family: "zeroes", Arial, "Arial Black", "Comic Sans MS", Georgia, Verdana, sans-serif;
font-size: 1em;
/*margin-top: 5px;*/
display: inline-block;
width: 150px;
height: 40px;																						
cursor: pointer;																						
/*border-style: solid;																					
border-top-left-radius: 3px;																			
border-top-right-radius: 3px;																			
border-bottom-left-radius: 1px;																			
border-bottom-right-radius: 1px;	
border-color: #3c3c3c;	*/																
color: black;
background: linear-gradient(90deg, #777, #333);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8), 0 6px 20px 0 rgba(0,0,0,0.20);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);																					
}
.button:hover {
color: #222;
background: #555;
background: linear-gradient(90deg, #999, #555);
}
.button:active {
color: #000;
background: #444;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset, 
            0 1px 0 rgba( 255, 255, 255, 0.4);
}

/*Menu*/

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:red;
}
#menu li a {
display:block;
width:150px;
color:black;
background: linear-gradient(90deg, #777, #333);
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8), 0 6px 20px 0 rgba(0,0,0,0.20);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
padding:5px;
}
#menu li a:hover {
color: #222;
background: #555;
background: linear-gradient(90deg, #999, #555);
}
#menu li a:active {
color: #000;
background: #444;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset, 
            0 1px 0 rgba( 255, 255, 255, 0.4);
}
 #menu ul li ul {
display: none;
}
 #menu ul li:hover ul {
display: block;
 }
 #menu li:hover ul li {
float: none;
}
 #menu li ul {
position: absolute;
}

 /*Body Parallaxe*/

.parallax {
background-image: url("/home/texnician/Documents/ITEC/SITE_WEB/images/technology.jpg");

min-height: 500px;
width: 100%;

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/*bloc img + txt*/

.textbox {
background-color: #999;
opacity: 0.9;
position: absolute;
width: 100%;
min-height: 300px;
margin-top: -150px;
}
.text {
color: black;
position: relative;
width: 100%;
min-height: 300px;
}


/*img*/

.float {
float: left;
}

/*Spécificité article*/

.parallax0 {
background-image: url("/home/texnician/Documents/ITEC/SITE_WEB/images/cpuphoto.jpg");

min-height: 500px;
width: 100%;

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax1 {
background-image: url("/home/texnician/Documents/ITEC/SITE_WEB/images/cpuphoto.jpg");

min-height: 300px;
width: 100%;

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#warning {
color: red; 
border: 5px; 
border-style: solid; 
background-color: white;
padding: 5px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.textbox0 {
background-color: #999;
opacity: 0.9;
position: absolute;
width: 100%;
min-height: 100px;
margin-top: -150px;
}
.textbox1 {
background-color: #999;
opacity: 0.9;
position: absolute;
width: 100%;
min-height: 300px;
margin-top: -150px;
}


Un lien vers le site pour que vous visualisier le problème plus facilement Smiley lol

https://itec42.fr/artc_decap.html


Merci à vous ! Hésitez pas à remettre en question le code haha
Bonjour.

J'ai mis un z-index de 1000 pour le header pour qu'il reste toujours au-dessus.

Pour le chevauchement… oui, le code est redondant ce qui ne facilite pas les manipulations. Dans la même mesure où tout la partie du bas bouge en même temps, elle devrait être incluse dans un même bloc et c'est sur lui que devrait mis l'effet parallaxe. À mon avis…

Smiley smile