Element Overflow
Solved
charline159
Posted messages
216
Status
Member
-
dachiasse Posted messages 1932 Status Member -
dachiasse Posted messages 1932 Status Member -
Hello,
on my webpage, there is a paragraph and the footer that overlap with the form (which is itself centered in the body). The paragraph and the footer are displayed "on top of" the form, and I don't understand why.
The inspector tells me there is an overflow, yet in my css code I haven't used the float property, and I've been looking for hours; I still can't see how to resolve the issue...
Do you have any idea what might be causing the problem?
Here's the code: https://jsfiddle.net/pag8n4z3/
on my webpage, there is a paragraph and the footer that overlap with the form (which is itself centered in the body). The paragraph and the footer are displayed "on top of" the form, and I don't understand why.
The inspector tells me there is an overflow, yet in my css code I haven't used the float property, and I've been looking for hours; I still can't see how to resolve the issue...
Do you have any idea what might be causing the problem?
Here's the code: https://jsfiddle.net/pag8n4z3/
3 answers
-
Hi,
I took my time. Well, I'm not a web developer either, but the issue was interesting.
I retrieved your HTML and CSS to run some tests. I uncommented the line:border: 4px solid #8dcba5;
from the CSS of body. The bottom of the box is not aligned with the bottom of the form because of:height: 650px;
from the CSS of form, so I commented out that line and the footer is now properly below the form.
Test it, you'll see. -
Hi, and thank you for your help.
I did what you suggested (uncommenting the border attribute in the body, then commenting out the height in the form). Indeed, the paragraph indicating the error then appears below the form.
However, for the footer, I still have the same issue; it overlaps below the form, and I can't figure out why.
Moreover, I would like to make the form smaller, but I can't do it: the size of the form seems "frozen," I can't change it.-
"On the other hand, for the footer, I'm still having the same problem; it overlaps below the form, and I can't see why."
It's yourmargin-top: -150px;
in the CSS of your footer that's causing the issue. Comment it out, and you'll have the copyright below the form.
However, this is just a workaround. You're going to move the problem. I advise you to follow this article and its GitHub as well: https://github.com/EmmanuelBeziat/guidelines/blob/main/css/bonnes-pratiques.md
"the form size is as if it is "frozen", I cannot change it."
A simple test to try is to double the font size, margins, padding, and borders. Logically, your form should have a height twice as high. I think therefore that the web browser adapts based on these dimensions.
If you have a font that is 1 cm in height, and you have 10 lines, you will have a minimum height of 10 cm.
It could be something else, but that's the first thing that comes to mind.- Oh yes, indeed, everything is back to normal (well, almost!)! Thank you :) and thanks also for the link by the way!
However, there is one thing that's bothering me: I can't seem to center "contact" and "send" in their box (they are positioned quite low in their box). I tried with a padding-bottom: 50%, padding: 1em, padding: auto, I even tried adding a div to apply my parameters, but nothing works...
Should I start all over from the beginning? I feel like I'm spending more time looking for errors than actually making progress...
https://jsfiddle.net/3Lncv96p/ - First of all, if you can stop jsfiddle on CCM. At my place, it takes ages to load. We know how to run HTML code with our web browsers ;) that's why I sent message 3.
As for the centering, I won't help you due to my incompetence.
And yes, I think the best thing is to properly recreate the web page you want to create. By the way, how did you prepare it in advance? The Mozilla site has excellent HTML and CSS tutorials. - I looked on almost all the websites I could to try to set up exactly what I wanted. The Mozilla site is good but sometimes I prefer to go elsewhere because I feel like there might be some explanations missing.
Okay, I'll see what I do then. Thanks for your help anyway! :) - Hi,
I also find that the Mozilla site is incomplete. You're right to follow several sources, hoping you don't spread yourself too thin. The main thing is that the result is correct from the start without embellishments. The aesthetics can come later.
That's my opinion, I would create a classic HTML form that works perfectly, with error handling. Then, I would apply CSS based on one layout system (grid, flexbox, or another)
If you're interested, it's long, in English, but it talks about minimalism in websites. For me, the examples are a real joy: https://benhoyt.com/writings/the-small-web-is-beautiful/ Many links redirect to these websites.
-
-
Hello,
As I had issues loading the Fiddle page, I'm taking the liberty of placing your initial HTML and CSS here. It will be easier.
Your HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Form</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link rel="stylesheet" href="formstyle.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> <!------------------------- FORM -------------------------> <form action="" method="POST" id="form"> <!-- action="<?php echo $_SERVER['REQUEST_URL'] ?>" --> <!-- TITLE --> <div id="formtitle"> Contact</div> <!-- 1 NAME --> <div id="formname"> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder=" name" /> <!--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 GENDER --> <div id="formgender"> <label for="gender">Gender</label> <optgroup id="gender"> <option> <input type="radio" id="genderM" name="genderM" value="M" /> <label for="genderM" class="formgenderlabel">M</label> </option> <option> <input type="radio" id="genderF" name="genderF" value="F"/> <label for="genderF" class="formgenderlabel">F</label> </option> </optgroup> </div> <!-- + EMAIL --> <div id="formemail"> <input type="email" id="email" name="email" placeholder=" email" /> </div> <!-- + PHONE --> <div id="formtel"> <input type="tel" id="phoneNumber" name="phoneNumber" placeholder = "phone"/> </div> <!-- 4 LANGUAGE --> <div id="formlanguages"> <label for="languagesTab[]">Language</label> <optgroup id="languages"> <option id="optfr"> <input type="checkbox" id="fr" name="languagefr" value="French" checked> <label for="languagefr">Fr</label> </option> <option> <input type="checkbox" id="en" name="languageen" value="English"> <label for="languageen">En</label> </option> <option> <input type="checkbox" id="jp" name="languagejp" value="Japanese"> <label for="languagejp">JP</label> </option> </optgroup> </div> <!-- 5 HOBBIES --> <div id="formhobbies"> <label id="labelhobbies">Hobbies</label> <select id="hobbies" name="hobbies" multiple> <option value="programming" id="programminghobby">Programming</option> <option value= "music">Music</option> <option value="movies">Movies</option> <option value="clouds">Clouds</option> </select> </div> <!-- 6 COMMENT --> <div id="formcomment"> <label for="comment"></label> <textarea id="comment" name="comment" placeholder="comment"></textarea> </div> <!-- BUTTON --> <div id="formsend"> <input type="submit" name="submit" value="Send"/> </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="form.js"></script>--> </html>
---
Your 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; } /* search button */ 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; } /* ################### FORM ################### */ 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; } /* title */ #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; } /* name */ #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 { /* do not display the default browser style */ -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; } /* gender */ #formgender { background-color: #186e40; grid-column: 4 / 5; grid-row: 2 / 3; transition: 1s; } #formgender:hover{ background-color: #278a55; transition: 1s; } #formgender optgroup{ /* M and F combined */ margin-top: 10px; margin-left: -20px; } .formgenderlabel{ color: #bddcef; } input[type=radio]{ /* do not display the default browser style */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; width: 12px; height: 12px; border-radius: 12px; background-color: white; vertical-align: baseline; /* radio aligned with letter */ } input[type="radio"]:checked { background: #94c63d; border: 3px solid white; } /* email & phone */ 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; /* remove border */ 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; } /* phone */ #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; } /* languages */ #formlanguages { background-color: #174f70; grid-column: 1 / 3; grid-row: 4 / 5; transition: 1s; } #formlanguages:hover { background-color: #23648a; transition: 1s; } #languages{ /* optgroup */ margin-top: 30px; margin-bottom: 30px; } #languages option{ display: inline; letter-spacing: 0em; } /* checkboxes and their respective labels */ input[type=checkbox] + label { display:inline-block; color: #94c63d; font-weight: lighter; text-transform: uppercase; letter-spacing: 0em; } input[type=checkbox]{ /* do not display the default browser style */ -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("flagfr2.png"); &:before { color: grey; }*/ } /* hobbies */ #formhobbies { background-color: #FFC300 ; /*!*/ grid-column: 1 / 3; grid-row: 5 / 6; height: 130px; transition: 1s; } #formhobbies:hover { background-color: #ffae00; transition: 1s; } #formhobbies select{ display: block; margin: auto; margin-top: 20px; padding: 2px; height: 80px; border: 1px solid white; font-size: 0.8em; } #programminghobby{ } /* comment */ #formcomment { background-color: #5ed5ff; grid-column: 3 / 5; grid-row: 4 / 6; transition: 1s; padding: 10px; } #formcomment: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{ /* remove textarea border*/ 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; } /* button */ #formsend { background-color: #cfe7f0; grid-column: 1 / 5; grid-row: 6 / 7; transition: 1s; } #formsend: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%; } #formsend{ padding: 0; height: 100px; } form input[value="Send"]{ } /*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 ################### */ /* for medium-sized screens like tablets */ /* margins removed */ @media screen and (max-width: 980px) { * { color: green; } } /* for small-sized screens like phones */ /* vertical menu */ /* vertical form */ @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; } }
