Bonjous a tous:
*
je reviens vers vous apres pas mal de temp, car je refais une page et reste bloque sur quelque chose qui dois etre simple et logique pour vous:

Je narrive pas a aligner corectement mes 3 div en bas de ma page et a faire le changement d'image comme presenté sur se site.

https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/41-transformation-css/exe/transform-rotate.html

Merci pour votre aide futur.


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" >
    <link rel="stylesheet" href="style.css" >
</head>
<body>

    <header>
        <nav>
			<h1 class="logo">Survivre</h1>
			<div class="toggle">
                <i class="fas fa-bars ouvrir"></i>
                <i class="fas fa-times fermer"></i>
			</div>	
            <ul class="menu">
                <li><a href="#">Acceuil</a></li>
                <li><a href="#">Edc N1</a></li>
                <li><a href="#">Edc n2</a></li>
                <li><a href="#">Edc n3</a></li>
            </ul>
        </nav>
    </header>

 <!-- Le reste du contenu -->
  <section class="section1">
    <div class="content">
     <h1 class="titre1"> La Survie Explication Simple et rapide </h1>
     <p class="paragraphe1">
      <mark class="opak">
        Bonjour à tous voici un peu de lecture pour remettre certaines idées reçues à leurs places. <br>
      <br>
      Tout d'abord, il faut bien comprendre que survie => danger , et pas n'importe lequel puisqu'il s'agit d'un danger de mort imminente. <br>
      <br>
      Une situation de survie peut arriver à tout moment sous diverses formes.
      </mark>
     </p>


     <p class="paragraphe1">
      <mark class="opak">
        Lorsque l’on sort de chez toi, on s’expose de suite à une possible situation d’urgence pour diverse cause possible, tels qu’une panne, perte de l’orientation, voir même une blessure.

        Ceci peut nous arriver aussi bien à pied, vélo, voiture, moto, quad, etc.
      </mark>
</p>
    </div>



  </section>

  <section class="section2">
    <h1 class="titre2"> Introduction </h1>
<div class="introduction">
  <p class="paragraphe2">
  Pour parer au mieux à une situation difficile, j’emporte mon sac à dos, qui est toujours à ma portée ou pas très loin de moi. <br>
<br>
  Celui-ci est composé de <strong> "divers Kit" </strong> pour parer à toute éventualité, ou au moins au mieux. <br>
<br>
<b> <u> Mon moyen mnémotechnique : </u> </b> <br>
<br>
Lorsque je pars, je dois <strong> "naviguer" </strong>, mais si j’ai un problème, je dois <strong> "communiquer" </strong> ma position et me <strong> "signaler" </strong>, si je suis blessé, je dois me <strong> "soigner" </strong> et de nuit <strong> "m’éclairer" </strong>. <br>
Si la situation perdure, je dois <strong> "Boire" </strong>, me <strong> "chauffer" </strong> et me <strong> "protéger" </strong> des éléments, et éventuellement <strong> "manger" </strong>. <br>
<br>
  </p>
</div>
</section>

<section class="section3">

  <div class="introduction2">
    <h2 class="soustitre">Les diffèrent éléments</h2>
    <p class="paragraphe3">
  - <strong> Naviguer </strong> <br>
  - <strong> Communiquer </strong> <br>
  - <strong> Signaler </strong> <br>
  - <strong> Soigner </strong> <br>
  - <strong> Eclairer </strong> <br>
  - <strong> Boire </strong> <br>
  - <strong> Chauffer </strong> <br>
  - <strong> Protéger </strong> <br>
  - <strong> Manger </strong> <br>
    </p>
  </div>
  <div class="image">
    <img src="frame/Image-Acceuil2.png" id="Image-Acceuil2" alt="">
  </div>
</section>

<div class="floubtn">
    <br>
    <button class="btn1">Consulter</button>
    <br>
</div>

<section class="section4">
  <h1 class="titre2"> Validé W3C pour HTML5\CSS3 </h1>
<div>
	<div class="copyright">
		<h2 class="soustitre2">HTML</h2>
			<p  class="imghtml">
				<a href="https://validator.w3.org/" onclick="window.open(this.href);return false">
						<img class="img2" src="frame/htmllogo1.png" alt="Validation html 5">
						<img class="img2bis" src="frame/htmllogo2.png" alt="Validation html 5">
				</a>
			</p>
	</div>
	<div class="copyright2">
		<h2 class="soustitre2">Version :</h2>
			<hr class="hr">
				<p  class="valid2">
					Réalisé par Bruno.H <br>
					<br>
					Mis à jour le 14 juillet 2023. <br>
				</p>
			<hr class="hr">
	</div>
	
	<div class="copyright">
		<h2 class="soustitre2">HTML</h2>
			<p  class="imgcss">
				<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
					<img class="img3" src="frame/csslogo1.png" alt="Validation CSS 3">
					<img class="img3bis" src="frame/csslogo2.png" alt="Validation CSS 3">
				</a>
			</p>
	</div>

</div>
</section>

    <script src="app.js"></script>
</body>
</html>



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: sans-serif;
    background-image: url("frame/Image-Acceuil2.png"); /* image de fond  */
    background-position: 50%;/*  position image */
	background-size: 70%;/* taille image  */
	background-repeat: no-repeat;/* statut image  */
	background-color: black;/*  remplacement image */
	background-attachment: fixed;/*  effet sur image */
}

header {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    background-color: transparent;
    color: wheat;
    padding: 0 20px 0 0;
}

nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between; /*   */
    align-items: center;
}

.logo {
   font-size: 50px; /* Taille ecriture liste */
   float: left; /* positionnement titre par apport liste */
   margin: 10px 0px 10px 30px;/* marge logo */
   color: white; /* couleur texte logo */
   border-radius: 100%; /* bordure logo */
   background-color: yellowgreen; /* couleur bordure logo */
   text-shadow: goldenrod 0.1em 0.1em 0.2em;  /* ombre texte menu */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte menu */
}

.toggle {
    display: none;
	top: 0px;
    left: 0px;
    color: red;
}

.menu {
    display: flex;
    justify-content: space-between; /*   */
    align-items: center;
    font-size: 20px;
    list-style: none;
    width: 350px;
}

.menu li a {
	text-decoration: none;
	color: yellowgreen;
	transition-property: background-color, border; /*  transition */
	transition-duration: 0.5s; /* duree transition  */
}

.menu li :hover 
{
	font-size: 30px;
	color: red;
	background-color: yellowgreen;
	padding: 5px;
	text-shadow: black 0.1em 0.1em 0.2em;  /* ombre texte menu */
	box-shadow: black 0.05em 0.05em 0.5em;  /* ombre texte menu */
	border: 5px ridge goldenrod;
	border-radius: 10px;
}

/* Fin liens Menu  */

@media all and (max-width: 600px) { /* (max-width: 991px) */

    header {
        background: transparent;
    }

    .toggle {
        display: block;
        top: 10px;
        font-size: 2rem;
        cursor: pointer;
        position: relative;
        z-index: 20;
    }

    .logo {
        position: relative;
        top: 10px;
        z-index: 20;
        color: red;
    }

    .ouvrir {
        display: block;
        color: red;

    }

    .fermer {
        display: none;
        color: red;
    }

    .open .ouvrir {
        display: none;
    }

    .open .fermer {
        display: block;
    }

    .menu {
        position: absolute;
        top: 80px;
        right: 0%;
        width: 40%;
        height: auto;
        background: blue;
        flex-direction : column;
        
        padding: 2rem;
        justify-content: space-around;
        transform: translateX(100%);
        transition: transform 1s;
        z-index: 20;
    }

    .menu li a {
        font-size: 2rem;
    }

    .open .menu {
        transform: translateX(0);
    }
}


/* ----------------------------------------------------- */

/* Debut Section commune */

section
{
   border: 10px ridge #404040; /* bordure des sections */
}

p
{
   font-size: 18px; /* Taille ecriture text */
   margin-left: 0px; /* espacement bord gauche text */
   margin-top: 0px; /* espacement bord haut text */
}

/* Fin Section commune */

/* ----------------------------------------------------- */

/* Section 1  */

.titre1
{
   margin-top: 100px; /* espacement bord haut titre1 */
   margin-bottom: 30px;
   margin-left: 0px; /* espacement bord gauche titre1 */
   color: wheat;
   text-shadow: goldenrod 0.4em 0.4em 1.0em;  /* ombre titre */
   text-align: center;
   font-size: 50px; /* Taille ecriture text */
}

.paragraphe1
{
   color: red;
   margin-top: 20px; /* espacement bord haut titre1 */
   margin-left: 50px; /* espacement bord haut titre1 */
   margin-right: 50px;
   font-size: 28px; /* Taille ecriture text */
}

.content
{
   height: auto ;
   backdrop-filter : blur(8px);
   padding-bottom: 30Px;
}

.opak
{
   opacity: 0.6; /* opacite du texte */
}

/* Section 1  */

/* ----------------------------------------------------- */

/* Section  2 Introduction */

.section2
{
   background-color: grey;
   height: auto;
}

.titre2
{
   margin-top: 40px; /* espacement bord haut titre1 */
   margin-bottom: 30px;
   margin-left: 0px; /* espacement bord gauche titre1 */
   background-color: #404040;
   color: yellowgreen;
   text-shadow: goldenrod 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* contour du texte */
         -webkit-text-stroke-color: grey; /* contour du texte */
   text-align: center;
   font-size: 50px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous titre */
}

.paragraphe2
{
   color: black;
   margin-top: 20px; /* espacement bord haut titre1 */
   margin-left: 30px; /* espacement bord haut titre1 */
   margin-right: 50px;
   font-size: 18px; /* Taille ecriture text */
}

/* Fin Section 2 Introduction */

/* ----------------------------------------------------- */

/*  Section 3 Les differents éléments */

.section3
{
   background-color: grey;
   height: 800px;
}

.introduction2
{
   width: 30%;
   float: left;
}

.paragraphe3
{
   color: black; 
   width: 100%;
   height: 100%;
   padding-top: 30%;
   padding-left: 10%;
   font-size: 18px; /* Taille ecriture text */
   text-align: left;
}

.image
{
   width: 70%;
   float: right;
}

#Image-Acceuil2
{
   padding-top: 150px;
   height: 100%;
   width: 100%;
}

.soustitre
{
   border-radius: 100%; /* bordure logo */
   background-color: #404040;
  
   margin: 10px 0px 5px 10px;/* marge sous titre */
   padding: 10px;
   width: 300px;
   color: wheat;
   text-shadow: yellowgreen 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* contour du texte */
         -webkit-text-stroke-color: grey; /* contour du texte */
   text-align: center;
   font-size: 40px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous titre */
}

/*  Fin Section 3 Les differents éléments */

/* ----------------------------------------------------- */

/*  Bouton Consulter */

.btn1
{
	display: block; /* centrer elements */
	margin-left: auto; /* centrer elements */
	margin-right: auto; /* centrer elements */
	padding-bottom: 10Px;
	height: 70px;
	width: 140px;
	font-size: 30px;
	background-color: yellowgreen;
	border-radius: 100%;
	color: red;
	text-shadow: black 0.2em 0.2em 0.4em;  /* ombre texte */
	box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
}

.btn1:hover 
{ background-color: yellow; 
   text-shadow: black 0.1em 0.1em 0.2em;  /* ombre texte menu */
   box-shadow: goldenrod 0.05em 0.05em 0.5em;  /* ombre texte menu */
   transition-property: background-color, border;
   transition-duration:2s;
}

.floubtn
{
   backdrop-filter : blur(10px);
}

/*  Fin Bouton Consulter */

/* ----------------------------------------------------- */

/* Section 4 Validation Html/Css  */

.section4
{
   background-color: grey;
   height: 600px;
}

.copyright
{
   
   display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
   width: 33%;

}

.soustitre2
{
   text-align: center;
   border-radius: 100%; /* bordure logo */
   background-color: #404040;
   margin: 10px auto;/* marge sous titre */
   padding: 10px;
   width: 200px;
   color: wheat;
   text-shadow: yellowgreen 0.4em 0.4em 1.0em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* taille contour du texte */
         -webkit-text-stroke-color: rgb(196, 129, 129); /* couleur contour du texte */
   font-size: 40px; /* Taille ecriture text */
   box-shadow: goldenrod 0.05em 0.05em 0.1em;  /* ombre texte sous div */
}



/* image html W3C */

.img2 
{
	width: 100%; /* on affiche l'image au carré */
	left:10px;
	transition: all 1s ease;
}

.img2:hover
{
	width: 100%; /* on affiche l'image au carré */
	transform:rotate(360deg) scale(0,0);
}

.img2bis 
{
	width: 100%; /* on affiche l'image au carré */
	transform:scale(1,0);
	opacity:0;	
}

img2bis .img2:hover {
	opacity:1;
	transform:scale(1,1);
}

/* fIN image html W3C */

/* ----------------------------------------------------- */

/* centre Mise a jours */

.copyright2
{
   
	display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
	width: 33%;
	position: relative;
	top:-325px;
}

p.valid2
{ 
	
	margin: 10px 0;
	background-color: transparent;
	position: relative;
	top:-0px;
	width: 100%;
 	height: auto;
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   color: rgb(59, 9, 9);
   transition: transform 1s;
}

p.valid2:hover
{


	padding:0px;
	margin: 15px 0;
   background-color: gray;
   text-align: center; /*   positionnement du texte*/
   font-size: 30px; /*   talle du texte*/
   font-weight: bold; /*  epaisseur texte */
   color: wheat; /*  Couleur texte */
   text-shadow: rgb(66, 64, 64) 0.1em 0.1em 0.1em;  /* ombre titre */
         -webkit-text-stroke: 2px; /* Talle du contour du texte */
         -webkit-text-stroke-color: rgb(185, 100, 100); /* Couleur contour du texte */
         transform: scale(1.6);
         box-shadow: black 0.1em 0.1em 0.3em; ; /* Bordure boite  */
         z-index: 9; /* Permet de mettre en premier plan la div  */
         position: relative;/* Toujours utiliser avec z-index  */
}

.hr
{
   width:100%; 
   color:firebrick; 
   background-color:firebrick; 
   height:3px; 
   padding: 0px 0px;
   margin:30px 0 0 0; 
   box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}

/* fin centre Mise a jours */

/* image css W3C */

.img3 
{
	width: 100%; /* on affiche l'image au carré */
	left:10px;
	transition: all 1s ease;
}

.img3:hover
{
	width: 100%; /* on affiche l'image au carré */
	transform:rotate(360deg) scale(0,0);
}

.img3bis 
{
	width: 100%; /* on affiche l'image au carré */
	transform:scale(1,0);
	opacity:0;	
}

img3bis .img3:hover {
	opacity:1;
	transform:scale(1,1);
}

/* fIN image html W3C */

/* ----------------------------------------------------- */

Modifié par Gipsy88 (14 Jul 2023 - 14:39)
connecté
Modérateur
Salut,

Le lien que tu as donné dans ton sujet t'amène vers un tuto. Suit le !
Pour aligner tes 3 éléments <div>, je t'invite à lire ce tuto : CSS3 Flexbox Layout module

J'ai chargé ta page. Personnellement, je ne suis pas fan. Tu mets trop de choses graphiques. Fait simple parce que tu fatigues ton lecteur et dans ce cas, il ne continuera pas la lecture.
Meilleure solution
niuxe a écrit :
Salut,

Le lien que tu as donné dans ton sujet t'amène vers un tuto. Suit le !
Pour aligner tes 3 éléments &lt;div&gt;, je t'invite à lire ce tuto : CSS3 Flexbox Layout module

J'ai chargé ta page. Personnellement, je ne suis pas fan. Tu mets trop de choses graphiques. Fait simple parce que tu fatigues ton lecteur et dans ce cas, il ne continuera pas la lecture.


Je regarde cela en reprenant complet la partie qui me gene, merci de l'aiguillage.

De retour vers vous pous vous dire que grace à vos indication le sujet est resolu avec flexbox.
Je vous remercie pour votre aide
Modifié par Gipsy88 (17 Jul 2023 - 21:13)