faire chevaucher 2 div

22 avr. 2024, 23:24

Bonsoir a tous,

Je ne parviens pas a faire chevaucher un bouton avec bootstrap c'est le boutton de validation connexion que je souhaite mettre en bas et qu'il chevauche :

voici ma vue :

Code : Tout sélectionner

<?php 
    ob_start();
?>

<!-- Titre -->
<!-- <div class="container">
    <div class="row justify-content-center">
        <div class="col-10">
            <div class="mt-3">
                <h1>Connexion | Inscription</h1>
            </div>
        </div>
    </div>
</div> -->

<section class="forms-section">
  <div class="forms">
    <div class="form-wrapper <?= $connexionEchouee ? '' : 'is-active' ?>">
    <!-- <div class="form-wrapper is-active"> -->
      <button type="button" class="switcher switcher-login texte">
        Connexion
        <span class="underline"></span>
      </button>
      <form class="form form-login" action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend>Please, enter your email and password for login.</legend>
          <div class="input-block">
            <label for="login-email">Mail</label>
            <input 
              id="mailConnexion" 
              name="mailConnexion" 
              type="email"
              value="<?= htmlentities($_POST['mailConnexion'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
              required>
          </div>

          <div class="error mb-3"><?= htmlentities($error['mailConnexion'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

          <div class="input-block">
            <label for="login-password">Mot de passe</label>
            <input
                id="mdpConnexion" 
                name="mdpConnexion" 
                type="password"
                maxlength="20"
                value="<?= htmlentities($_POST['mdpConnexion'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                required>
        </div>

          <div class="error mb-3"><?= htmlentities($error['mdpConnexion'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

        </fieldset>

        <!-- On envoie le token de session pour eviter les attaques -->
        <input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">

        <div class = "text-center boutonCoIns">
          <button type="submit" name = "validation" value = "Connexion" class="btn btn-outline-success">Connexion</button>
        </div>
      </form>
    </div>

    <div class="form-wrapper <?= $inscriptionEchouee ? 'is-active' : '' ?>">
    <!-- <div class="form-wrapper"> -->
      <button type="button" class="switcher switcher-signup" >
        Inscription
        <span class="underline"></span>
      </button>
      <form class="form form-signup" action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend>Please, enter your email, password and password confirmation for sign up.</legend>
          <div class="input-block">
            <label for="signup-email">Mail</label>
            <input
              id="mailInscription"
              name="mailInscription"
              type="email"
              value="<?= htmlentities($_POST['mailInscription'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
              required>
          </div>

          <div class="error mb-3"><?= htmlentities($error['mailInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

          <div class="input-block">
            <label for="signup-email">Confirmation du Mail</label>
            <input
              id="confirmationMailInscription"
              name="confirmationMailInscription"
              type="email"
              value="<?= htmlentities($_POST['confirmationMailInscription'] ?? '', ENT_QUOTES, 'UTF-8') ?>"

              required>
          </div>

          <div class="error mb-3"><?= htmlentities($error['confirmationMailInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

          <div class="input-block">

              <label for="signup-password">Mot de passe</label>
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center p-0" style="width: 30px; height: 30px;" data-bs-toggle="modal" data-bs-target="#exampleModal">
                <span>i</span>
              </button>




            <input
                id="mdpInscription"
                name="mdpInscription"
                type="password"
                maxlength="20"
                value="<?= htmlentities($_POST['mdpInscription'] ?? '', ENT_QUOTES, 'UTF-8') ?>"

                required>
          </div>

          <div class="error mb-3"><?= htmlentities($error['mdpInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

          
          <div class="input-block">
            <label for="signup-password-confirm">Confirmation mot de passe</label>
            <input
              id="confirmationMdpInscription"
              name="confirmationMdpInscription"
              type="password"
              maxlength="20"
              value="<?= htmlentities($_POST['confirmationMdpInscription'] ?? '', ENT_QUOTES, 'UTF-8') ?>"

              required>
          </div>

          <div class="error mb-3"><?= htmlentities($error['confirmationMdpInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

        <!-- On envoie le token de session pour eviter les attaques -->
        <input type="hidden" name="csrfToken" value="<?= $csrfToken ?>">

        </fieldset>
        <div class = "text-center">
          <button type="submit" name = "validation" value = "Inscription"class="btn btn-outline-success">Inscription</button>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Informations mot de passe</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Le mot de passe doit comporter : <br>
        1 lettre minuscule <br>
        1 lettre majuscule <br>
        au moins 1 chiffre <br>
        et 1 caractére spéciale <br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>









<?php
    $content = ob_get_clean();

    $titrePage = 'Connexion | Inscription'; /// Titre à la page onglet ///
    $metaDescription = "Inscrivez-vous ou connectez-vous pour accéder à notre plateforme. Profitez d'une expérience utilisateur exceptionnelle.";
    $metaKeywords = "inscription, connexion, compte utilisateur, plateforme, expérience utilisateur";
    $google = "index, follow"; /// Demander a google de ne pas suivre ou suivre

    include(dirname(__FILE__).'/../Modeles/vueBase.php');
?>

Je souhaite qu'il chevauche la div qu'il appartient en bas que le bouton soit a cheval .

Voici mon CSS :

Code : Tout sélectionner

/* Styles pour les écrans larges (desktops et ordinateurs portables) */
@media only screen and (min-width: 1024px) {
    /* Ajoutez vos styles pour les écrans larges ici */
}

/* Styles pour les tablettes et téléphones en mode paysage */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Ajoutez vos styles pour les tablettes en mode paysage ici */
}

/* Styles pour les téléphones en mode portrait */
@media only screen and (max-width: 767px) {
    /* Ajoutez vos styles pour les téléphones en mode portrait ici */
}

/* Titre H1 */
@font-face {
    font-family: 'Varino';
    font-style: normal;
    src: url("./Polices/Varino.ttf");
}

/* Titre du site dans le menu */
@font-face {
    font-family: 'DuneRise';
    font-style: normal;
    src: url("./Polices/DuneRise.ttf");
}

/* Texte */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    src: url("./Polices/PoppinsThin.ttf");
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-image: url('/Utiles/Images/fondBleu.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Style du titre du site dans le menu */
.styleTitreSiteMenu {
    font-family: 'DuneRise', sans-serif; /* Remplacez 'Nom de la police' par le nom de la police que vous souhaitez utiliser */
}

.nav-item.active .nav-link:focus {
    color: yellow !important; /* Change la couleur du texte en jaune */
}


/* Format texte du menu */
.texteMenu{
    color: white;
    font-size: 0.6rem; /* Taille de la police */
    font-family: 'DuneRise';
    font-style: normal;
}

/* Degradé sous la navBar */
.borderPerso{
    height: 3px;
    background: linear-gradient(to right, red, purple, yellowgreen, yellow);
}

.footer{
    color: white;
    font-size: 0.6rem; /* Taille de la police */
    font-family: 'DuneRise';
    font-style: normal;
    text-decoration: none;
    /* text-shadow: green 1px 0 10px; */
}

.texte{
    color: white;
    font-size: 0.9rem; /* Taille de la police */
    font-family: 'Poppins';
    font-style: normal;
}

h1 {
    color: rgba(0, 176, 246, 0.94); /* Couleur du texte */
    font-size: 1.5rem; /* Taille de la police */
    font-family: 'Varino';
    font-style: normal;
    /* text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.3); Ombre avec décalage horizontal de 2px, décalage vertical de 2px, flou de 4px, couleur de l'ombre verte avec une transparence de 0.3 */
    /* Ajoutez d'autres propriétés CSS selon vos besoins */
}

.error{
	background-color: red;
	color: white;
	text-align: center;
	border-radius: 10px;
}

/* Icone pour remonter */
.scrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.scrollToTop.active {
    display: block;
}

.iconeMenu:hover {
    border-radius: 50%; /* Définit la forme de l'image comme ronde */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.9); /* Augmente la taille du halo et la transparence */
}



/* Systeme de connexion */
*,
*::before,
*::after {
	box-sizing: border-box;
}

.forms-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.section-title {
	font-size: 32px;
	letter-spacing: 1px;
	color: #fff;
}

.forms {
	display: flex;
	align-items: flex-start;
	margin-top: 30px;
}

.form-wrapper {
	animation: hideLayer .3s ease-out forwards;
}

.form-wrapper.is-active {
	animation: showLayer .3s ease-in forwards;
}

@keyframes showLayer {
	50% {
		z-index: 1;
	}
	100% {
		z-index: 1;
	}
}

@keyframes hideLayer {
	0% {
		z-index: 1;
	}
	49.999% {
		z-index: 1;
	}
}

.switcher {
	position: relative;
	cursor: pointer;
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 16px;
	letter-spacing: .5px;
	color: #999;
	background-color: transparent;
	border: none;
	outline: none;
	transform: translateX(0);
	transition: all .3s ease-out;
}

.form-wrapper.is-active .switcher-login {
	color: #fff;
	transform: translateX(90px);
}

.form-wrapper.is-active .switcher-signup {
	color: #fff;
	transform: translateX(-90px);
}

.underline {
	position: absolute;
	bottom: -5px;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	width: 100%;
	height: 2px;
}

.underline::before {
	content: '';
	position: absolute;
	top: 0;
	left: inherit;
	display: block;
	width: inherit;
	height: inherit;
	background-color: currentColor;
	transition: transform .2s ease-out;
}

.switcher-login .underline::before {
	transform: translateX(101%);
}

.switcher-signup .underline::before {
	transform: translateX(-101%);
}

.form-wrapper.is-active .underline::before {
	transform: translateX(0);
}

.form {
	overflow: hidden;
	min-width: 260px;
	min-height: 450px; /* hauteur de la div connexion */
	margin-top: 50px;
	padding: 30px 25px;
	border-radius: 20px;
	transform-origin: top;
}

.form-login {
	animation: hideLogin .3s ease-out forwards;
}

.form-wrapper.is-active .form-login {
	animation: showLogin .3s ease-in forwards;
}

@keyframes showLogin {
	0% {
		background: #d7e7f1;
		transform: translate(40%, 10px);
	}
	50% {
		transform: translate(0, 0);
	}
	100% {
		background-color: #fff;
		transform: translate(35%, -20px);
	}
}

@keyframes hideLogin {
	0% {
		background-color: #fff;
		transform: translate(35%, -20px);
	}
	50% {
		transform: translate(0, 0);
	}
	100% {
		background: #d7e7f1;
		transform: translate(40%, 10px);
	}
}

.form-signup {
	animation: hideSignup .3s ease-out forwards;
}

.form-wrapper.is-active .form-signup {
	animation: showSignup .3s ease-in forwards;
}

@keyframes showSignup {
	0% {
		background: #d7e7f1;
		transform: translate(-40%, 10px) scaleY(.8);
	}
	50% {
		transform: translate(0, 0) scaleY(.8);
	}
	100% {
		background-color: #fff;
		transform: translate(-35%, -20px) scaleY(1);
	}
}

@keyframes hideSignup {
	0% {
		background-color: #fff;
		transform: translate(-35%, -20px) scaleY(1);
	}
	50% {
		transform: translate(0, 0) scaleY(.8);
	}
	100% {
		background: #d7e7f1;
		transform: translate(-40%, 10px) scaleY(.8);
	}
}

.form fieldset {
	position: relative;
	opacity: 0;
	margin: 0;
	padding: 0;
	border: 0;
	transition: all .3s ease-out;
}

.form-login fieldset {
	transform: translateX(-50%);
}

.form-signup fieldset {
	transform: translateX(50%);
}

.form-wrapper.is-active fieldset {
	opacity: 1;
	transform: translateX(0);
	transition: opacity .4s ease-in, transform .35s ease-in;
}

.form legend {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
}

.input-block {
	margin-bottom: 20px;
}

.input-block label {
	font-size: 14px;
	color: #a1b4b4;
}

.input-block input {
	/* display: block; */
	width: 100%;
	margin-top: 8px;
	padding-right: 15px;
	padding-left: 15px;
	font-size: 16px;
	line-height: 40px;
	color: #3b4465;
	background: #eef9fe;
	border: 1px solid #cddbef;
	border-radius: 2px;
}

/* .form [type='submit'] {
	opacity: 0;
	display: block;
	min-width: 120px;
	margin: 30px auto 10px;
	font-size: 18px;
	line-height: 40px;
	border-radius: 25px;
	border: none;
	transition: all .3s ease-out;
} */

.form-wrapper.is-active .form [type='submit'] {
	opacity: 1;
	transform: translateX(0);
	transition: all .4s ease-in;
}

/* .btn-login {
	color: #fbfdff;
	background: #a7e245;
	transform: translateX(-30%);
} */

/* .btn-signup {
	color: #a7e245;
	background: #fbfdff;
	box-shadow: inset 0 0 0 2px #a7e245;
	transform: translateX(30%);
} */

/* Fin systeme de connexion */


















.boutonCoIns {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
	z-index: 1; 
}

La il est en bas centrer mais je ne vois que la moitier superieur et la moitier inferieur n'est pas visible.

Comment faire ?

Merci par avance pour votre aide et vos retours.
@+ Filou80

22 avr. 2024, 23:53

## Modération : Message déplacé dans le forum HTML/CSS

23 avr. 2024, 12:03

Bonjour,

Puisqu'il s'agit d'un problème HTML et CSS, pour reproduire ton problème, il faudrait plutôt partager le code html généré sans le code php (voir le code source de la page dans le navigateur).
Sinon, un lien d'une page en ligne et/ou un exemple reproductible sur un site tel que codepen ou jsfiddle si possible.

Si ce n'est pas déjà le cas, pense à utiliser l'outil Inspecter dans les outils de dév de ton navigateur pour déboguer plus facilement le css.

faire chevaucher 2 div

Qui est en ligne