Débordement d'un élément [Résolu]

Signaler
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
-
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
-
Bonjour,

sur ma page web, il y a un paragraphe et le footer qui se superposent avec le formulaire (qui lui-même est contenu au centre du body). Le paragraphe et le footer s'affichent "par dessus" du formulaire, et je ne comprends pas pourquoi.

L'inspecteur me dit qu'il y a un débordement, pourtant dans mon code css je n'ai pas utilisé la propriété float, et ça fait des heures que je cherche, je ne vois toujours pas comment résoudre le problème...

Est-ce que vous auriez une idée de la cause du problème?

Voilà le code: https://jsfiddle.net/pag8n4z3/

3 réponses

Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
137
Salut,

J'y ai mis le temps. Bon, je ne fais pas de dev web non plus, mais, le problème était intéressant.

J'ai récupéré ton HTML et CSS pour faire des tests. J'ai décommenté la ligne :
border: 4px solid #8dcba5;
du CSS de body. Le bas de l'encadré n'est pas au niveau du bas du formulaire parce que :
height: 650px;
du CSS de form donc, j'ai commenté cette ligne et le footer se trouve bien en dessous du formulaire.

Teste, tu verras.
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
1
Salut, et merci pour ton aide.
J'ai bien fait ce que tu proposes (décommenter l'attribut border dans body, puis commencter height dans form). Effectivement, le paragraphe qui indique l'erreur se place alors en dessous du formulaire.

Par contre, pour le footer, j'ai toujours le même problème, il se superpose en dessous du formulaire, et je ne vois pas pourquoi.

D'ailleurs, j'aimerais rendre le formulaire plus petit, mais je n'y arrive pas: la taille du formulaire est comme "figée", je ne peux pas la modifier.
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
137
"Par contre, pour le footer, j'ai toujours le même problème, il se superpose en dessous du formulaire, et je ne vois pas pourquoi."

C'est ton
margin-top: -150px;
du CSS de ton footer qui pose problème. Commente-le, tu auras le copyright en dessous du formulaire.

Par contre, là, c'est du bricolage. Tu vas déplacer le problème. Je te conseille de suivre cet article et son github aussi d'ailleurs : https://github.com/EmmanuelBeziat/guidelines/blob/main/css/bonnes-pratiques.md

"la taille du formulaire est comme "figée", je ne peux pas la modifier. "

Un test tout bête à essayer, double la taille de la police, des marges, pads et bordures. Logiquement, ton formulaire devrait avoir une hauteur 2 fois plus élevées. Je pense donc que le navigateur Web adapte par rapport à ces dimensions.

Si tu as une police d'1 cm de hauteur, et que tu as 10 lignes. Tu auras une hauteur minimale de 10 cm.

Ça peut être autre chose, mais, c'est la première chose qui me vient à l'esprit.
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
1 >
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021

Ah oui, effectivement, c'est bon, tout est revenu à la normale (enfin presque ! ) ! Merci :) et merci également pour le lien au passage!

Par contre, il me reste un truc qui me chiffone: je n'arrive pas à centrer "contact" et "envoyer" dans leur case (ils sont positionnés assez bas dans leur case). J'ai essayé avec un padding-bottom: 50%, padding: 1em, padding: auto, j'ai même essayé de rajouter un div sur lequel mettre mes paramètres, mais rien n'y fait...

est-ce que je devrais tout recommencer depuis le début ? j'ai l'impression de passer plus de temps à chercher des erreurs plutôt qu'à vraiment avancer...
https://jsfiddle.net/3Lncv96p/
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
137 >
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021

Tout d'abord, si tu peux arrêter jsfiddle sur CCM. Chez moi, il met des plombes à se charger. On sait lancer un code HTML avec nos navigateurs Web ;) c'est pour ça que j'ai fait le message 3.

Pour le centrage, je ne t'aiderai pas par incompétence de ma part.

Et oui, je crois que le mieux est de reprendre proprement la page Web que tu veux créer. D'ailleurs, comment l'as-tu préparée en amont ? Le site de Mozilla a des tutoriels HTML et CSS très bien.
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
1 >
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021

J'ai regardé sur un peu tous les sites que je pouvais pour essayer de mettre en place ce que je voulais précisément. Le site de Mozilla est bien mais parfois je préfère aller ailleurs car j'ai l'impression qu'il manque peut-être des explications.
D'accord, je vais voir ce que je fais alors. Merci pour ton aide en tout cas ! :)
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
137 >
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021

Salut,

Le site de Mozilla n'est pas complet je trouve également. Tu as raison de suivre plusieurs sources, en espérant que tu ne t'éparpilles pas trop. Le principal c'est que le résultat soit correct au début sans fioritures. La cosmétique passera après.

C'est mon avis, je ferais un formulaire html classique parfaitement fonctionnel, avec gestion des erreurs. Ensuite le CSS en me basant sur un seul système de mise en place (grid, flexbox, ou autre)

Si ça peut t'intéresser, c'est long, en anglais, mais, ça parle de minimalisme des sites Web. Pour moi, les exemples sont un vrai bonheur : https://benhoyt.com/writings/the-small-web-is-beautiful/ Beaucoup de liens redirigent vers ces sites Web.
Messages postés
1710
Date d'inscription
samedi 12 septembre 2020
Statut
Membre
Dernière intervention
13 mai 2021
137
Salut,

Comme j'ai eu des soucis de chargement de la page de Fiddle, je me permets de mettre tes HTML et CSS initiaux ici. Ce sera plus simple.

Ton HTML :

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Formulaire</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="formulairestyle.css" /> <!-- TMP -->
</head>



<body>
    <!------------------------- HEADER ------------------------->
    <header>
        <div id="navbackground">
            <nav>
                <a href="" class="active">Home</a>
                <a href="">News</a>
                <a href="">Contact</a>
                <a href="">About</a>
                <a href="" id="search">
                    <input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/>
                </a>
            </nav>
        </div>
    </header>


    <section>

        <!------------------------- FORMULAIRE ------------------------->
        <form action="" method="POST" id="formulaire">
            <!-- action="<?php echo $_SERVER['REQUEST_URL'] ?>" -->



            <!-- TITLE -->
            <div id="formtitle"> Contact</div>



            <!-- 1 NAME -->
            <div id="formname">
                <label for="name">Nom</label>
                <input type="text" id="name" name="name" placeholder=" nom" /> <!--required-->
            </div>



            <!-- 2 AGE -->
            <div id="formage">
                <label for="age"> Age</label>
                <select id="age" name="age">
                    <?php
                        for($i=1;$i<100;$i++){
                            echo "<option value=\"$i\">$i</option>";
                        }
                    ?>
                </select>
            </div>



            <!-- 3 SEXE -->
            <div id="formsexe">
                <label for="sexe">Sexe</label>
                <optgroup id="sexe">
                    <option>
                        <input type="radio" id="sexeH" name="sexeH" value="H" />
                        <label for="sexeH" class="formsexelabel">H</label>
                    </option>

                    <option>
                        <input type="radio" id="sexeF" name="sexeF" value="F"/>
                        <label for="sexeF" class="formsexelabel">F</label>
                    </option>
                </optgroup>
            </div>



            <!-- + EMAIL -->
            <div id="formemail">
                <input type="email" id="email" name="email" placeholder=" email" />
            </div>



            <!-- + TELEPHONE -->
            <div id="formtel">
                <input type="tel" id="phoneNumber" name="phoneNumber" placeholder = "telephone"/>
            </div>



            <!-- 4 LANGUE -->
            <div id="formlangues">
                <label for="languesTab[]">Langue</label>
                <optgroup id="langues">
                    <option id="optfr">
                        <input type="checkbox" id="fr" name="languefr" value="Français" checked>
                        <label for="languefr">Fr</label>
                    </option>

                    <option>
                        <input type="checkbox" id="en" name="langueen" value="English">
                        <label for="langueen">En</label>
                    </option>

                    <option>
                        <input type="checkbox" id="jp" name="languejp" value="Japonais">
                        <label for="languejp">JP</label>
                    </option>
                </optgroup>
            </div>



            <!-- 5 LOISIRS -->
            <div id="formloisirs">
                <label id="labelloisirs">Loisirs</label>
                <select id="loisirs" name="loisirs" multiple>
                    <option value="programmation" id="programmationloisir">Programmation</option>
                    <option value= "musique">Musique</option>
                    <option value="cinema">Cinéma</option>
                    <option value="nuages">Nuages</option>
                </select>
            </div>



            <!-- 6 COMMENTAIRE -->
            <div id="formcommentaire">
                <label for="commentaire"></label>
                <textarea id="commentaire" name="commentaire" placeholder="commentaire"></textarea>
            </div>



            <!-- BOUTON -->
            <div id="formenvoyer">
                <input type="submit" name="submit" value="Envoyer"/>
            </div>
        </form>

        <p id="alert">
            <?php echo $alert;?>
        </p>

    </section>


<!------------------------- FOOTER ------------------------->
    <footer>
        <p>
            Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="little cloud" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/>
        </p>
    </footer>

</body>

<!--<script src="formulaire.js"></script>-->


</html>


---

Ton CSS :

/* TEMPORARY */

/*header, footer{*/
/*	display: none;*/
/*}*/


/* ################### BODY ################### */

body{
	/*border: 4px solid #8dcba5;*/
	margin: 0px;
	background-color: white;
	color: rgba(70,147,188,1);
	font-family: sans-serif;
	/*background-image: url("clouds.svg");
	background-repeat: repeat;*/

}



/* ################### HEADER ################### */

header{
	width: 100%;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 0; /* ??? */
}

#navbackground{
	background-color: rgba(70,147,188,1);
	border-bottom: 5px solid white;
	border-top: 5px solid white;
}


nav{
	/* border: 4px solid red; */
	display: flex;
	justify-content: center;
	height: 75px;
	background-color: rgba(70,147,188,1);
	
	min-width: 600px;
	max-width: 980px;
	margin: 0 auto;

	
}


nav a{	
	font-size: 1.3em;
	color: white;
	width: 25%;
	text-align: center;
	text-transform: uppercase;
	padding-top: 25px;
	transition: 1s;
	text-decoration: none;
}


nav a:hover, nav input[type=img]:hover{
	padding-bottom: 15px;
	background-color: #23719a;
	transition: 1s;	
}


/* bouton de recherche */
nav input{
	display: inline;
	border: white;
	border-radius: 3px;
	height: 1.5em;
	width: 50px;
	
}

/*#searchcloud{
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	bottom: 2px;
	left: 10px;
	height: 30px;
	width: 35px;
}*/


#imgbackground{	
	background-color: #8bcdf0;
}

#island{
	/* svg -> mettre un display block d'abord */
	display: block;	
	margin: 0 auto; 
    width: 70%;
}





/* ################### SECTION ################### */
section{
	/*border: 4px solid pink;*/
	font-size: 1.3em;
	display: block;
	
	padding-top: 20px;
	padding-bottom: 10px;
	min-width: 600px;
	max-width: 980px;
	margin: auto;

	text-align: justify;
}

section p::first-letter{
	font-size: 2em;
	color: #337fa0;
}


#phpdate{
	color: deeppink;
	text-align: center;
}


/* ################### FORMULAIRE ################### */

form{
	max-width: 750px;
	min-width: 650px;

	height: 650px;

	margin: auto;

	border-radius: 3px;

	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: repeat(1, 6fr);
	
	color: white;
	text-transform: uppercase;
	text-align: center;
}

form label{
	letter-spacing: 0.5em;
}

form div{
	padding: 30px;
	border: 3px solid white;
}


/* titre */
#formtitle{
	color: rgba(255,255,255,1);	
	text-transform: uppercase;
	letter-spacing: 0.8em;
	font-size: 2em;
	text-align: center;

	background-color: #cfe7f0;
	grid-column: 1 / 5;
	grid-row: 1 / 2;	
	border-bottom: 3px solid white;
}


/* nom */
#formname{
	background-color: #e85524;
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	transition: 1s;
}
#formname:hover{
	background-color: #b6370d;
	transition: 1s;
}
#formname label{
	display: none;
}
form input[type=text] {
	display:block;
  	border-radius: 1px;
  	border: none;
  	/*border-color: #aadaf3;*/
  	width: 97%;
  	height: 60px;
  	margin-top: 20px;
  	margin-left: auto;
  	margin-right: auto;
  	background-color: transparent;
  	text-align: center;

  	color: white;
  	font-size: 2em;

  	outline: none;
	box-shadow:none !important;
	border:none;
}
input[type=text]::placeholder{
	color: white;
	font-size: 0.9em;
	text-align: center;
	letter-spacing: 0.5em;
	text-transform: uppercase;
}


/* age */
#formage{
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: #1888cd;
	transition: 1s;
}
#formage:hover{
	/*background-color: red;*/
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	background-color: #3ea6e5;
	transition: 1s;
}
#age{
	display: block;
	margin: auto;
	margin-top: 15px;
}
select {
	/* ne pas afficher le style par défaut du navigateur */
  -webkit-appearance: none;
  -moz-appearance: none;

  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  
  margin-right: 3rem;
  padding: 1rem;
  padding-right: 0.5rem;
  color: white;
  font-size: 1em;
}



/* sexe */
#formsexe
{
	background-color: #186e40;
	grid-column: 4 / 5;
	grid-row: 2 / 3;
	transition: 1s;

}
#formsexe:hover{
	background-color: #278a55;
	transition: 1s;
}
#formsexe optgroup{ /* H et F réunis*/	
	margin-top: 10px;
	margin-left: -20px;
}
.formsexelabel{	
	color: #bddcef;
}

input[type=radio]{
	/* ne pas afficher le style par défaut du navigateur */
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;

	width: 12px;
    height: 12px;
    border-radius: 12px;    
    background-color: white;   

    vertical-align: baseline; /* radio aligné avec lettre */
}
input[type="radio"]:checked {
  background: #94c63d;
  border: 3px solid white;  
}

/* email & telephone */
form input[type=email], form input[type=tel]{
	display:block;
	border-radius: 1px;
	border: none;
	/*border-color: #aadaf3;*/
	width: 97%;
	height: 60px;

	margin-left: auto;
	margin-right: auto;
	background-color: transparent;
	text-align: center;

	color: white;
	font-size: 1em;

	/* enlever la bordure */
	outline: none;
	box-shadow:none !important;
	border:none;
}
input[type=email]::placeholder, input[type=tel]{
	color: white;
	font-size: 0.9em;
	text-align: center;
	letter-spacing: 0.4em;
	text-transform: uppercase;

}

/* email */
#formemail{
	grid-column: 1/3;
	grid-row: 3/4;
	background-color: #94c63d; /* ! */
	transition: 1s;
}
#formemail:hover{
	grid-column: 1/3;
	grid-row: 3/4;
	background-color: #75b705;
}

/* telephone */
#formtel{
	grid-column: 3/5;
	grid-row: 3/4;
	background-color: #c61c56;
	transition: 1s;
}
#formtel:hover{
	grid-column: 3/5;
	grid-row: 3/4;
	background-color: #E5427A;
}


/* langues */
#formlangues
{
	background-color: #174f70;
	grid-column: 1 / 3;
	grid-row: 4 / 5;
	transition: 1s;
}
#formlangues:hover
{
	background-color: #23648a;
	transition: 1s;
}
#langues{ /* optgroup */
	margin-top: 30px;
	margin-bottom: 30px;
}
#langues option{
	display: inline;	
	letter-spacing: 0em;
}
/* checkbox et leurs labels respectifs */
input[type=checkbox] + label {
	display:inline-block;
  	color: #94c63d;  	
  	font-weight: lighter;
  	text-transform: uppercase;
  	letter-spacing: 0em;
}


input[type=checkbox]{
	/* ne pas afficher le style par défaut du navigateur */
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;

	width: 20px;
    height: 20px;    
    background-color: white;

    vertical-align: middle;
}

input[type="checkbox"]:checked {
  background: orange;
  border: 3px solid white;
  
}


#optfr input[type=checkbox]{	
    
}
#optfr input[type="checkbox"]:checked {
	/*background-image: url("drapeaufr2.png");
  	&:before {
    color: grey;
  	}*/
}



/* loisirs */
#formloisirs
{
	background-color: #FFC300 ; /*!*/
	grid-column: 1 / 3;
	grid-row: 5 / 6;
	height: 130px;
	transition: 1s;
}
#formloisirs:hover
{
	background-color: #ffae00;
	transition: 1s;
}
#formloisirs select{
	display: block;
	margin: auto;
	margin-top: 20px;
	padding: 2px;
	height: 80px;
	border: 1px solid white;
	font-size: 0.8em;
}
#programmationloisir{

}


/* commentaire */
#formcommentaire
{
	background-color: #5ed5ff;
	grid-column: 3 / 5;
	grid-row: 4 / 6;
	transition: 1s;
	padding: 10px;
}
#formcommentaire:hover{
	background-color: #3ba7cd;
	transition: 1s;
}
section textarea{
	display:inline-block;
	color: white;
	
	border-style: none;
  	border-radius: 4px;

  	width: 100%;
  	height: 100%;
  	background-color: transparent;
  	padding: 0;
  	margin: 0;
  	
  	font-family: sans-serif;
  	font-size: 1.2em;

  	resize: none;
}
section textarea:focus{
	/* supprime la bordure du texte area*/
    outline: none;
	box-shadow:none !important;
	border:none;
}
textarea::placeholder{
	color: white;
	font-size: 0.6em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	font-size: 0.8em;


}


/* bouton */
#formenvoyer
{
	background-color: #cfe7f0;
	grid-column: 1 / 5;
	grid-row: 6 / 7;
	transition: 1s;
}
#formenvoyer:hover
{
	background-color: #f6d0ee;
	transition: 1s;

}

input[type=submit]{
	background-color: transparent;
	color: white;
	margin: 0;
	border: none;
	border-radius: 3px;
	transition: 1s;
	text-transform: uppercase;
	letter-spacing: 1em;
	font-size: 1.1em;
	
	width: 100%;
	height: 100%;
}

#formenvoyer{	
	padding: 0;
	height: 100px;
}
form input[value="Envoyer"]{
	
}

/*input[type=submit]:hover{
	background-color: #fae1f4;
	color: #750d5a;
	transition: 1s;
}*/


/*#cloudCrossing{
	vertical-align: middle;
	width: 20%;
	height: 20%;
	border: 3px solid orange;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}*/

#alert{
	text-align: center;
	margin: auto;
	color: red;
	border: 3px solid orange;
}




/* ################### FOOTER ################### */
footer{
	color: white;
	text-align: center;
	background-color: #8bcdf0;
	height: 60px;
	border-bottom: 5px solid white;
	margin-top: -150px;
}

#littlecloud{
	position: relative;
	top: 4px;
}




/* ################### MEDIA QUERIES ################### */


/* pour les écrans de taille moyenne type tablette */
/* marges supprimées */
@media screen and (max-width: 980px) {
	* {
		color: green;
	}
}


/* pour les écrans de petite taille type téléphone */
/* menu vertical */
/* formulaire vertical */
@media screen and (max-width: 779px){
	*{
		color: orange;
	}

	nav{
		flex-direction: column;
	}
	form{
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	form div{
		max-width: 779px;
	}
}