Why is my footer showing on top of my page?
Question
I have a really simple code, but somehow the footer is showing on top of my page. As you can see I'm not using any floats, wrappers, grids or anything else. You can find the code right under this text. Can anyone help me figure out why is this happening and how can I prevent this from happening again in the future? Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin:0px;
}
main {
margin: 1cm auto;
width: 50%;
padding: 1cm;
border: 1px solid black;
}
nav {
border: 1px solid black;
}
</style>
</head>
<body>
<footer> Service Networking </footer>
<nav>
<label>Name: <input type="text" name="name"> </label>
<label>Surname: <input type="text" name="surname"> </label>
</nav>
<main>
<h1> Welcome! </h1>
<p> This is your first page </p>
</main>
</body>
</html>
5 answers
solution1
1 2019-03-20 03:37:13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin:0px;
}
main {
margin: 1cm auto;
width: 50%;
padding: 1cm;
border: 1px solid black;
}
nav {
border: 1px solid black;
}
</style>
</head>
<body>
<nav>
<label>Name: <input type="text" name="name"> </label>
<label>Surname: <input type="text" name="surname"> </label>
</nav>
<main>
<h1> Welcome! </h1>
<p> This is your first page </p>
</main>
<footer> Service Networking </footer>
</body>
</html>
You were using <footer> , before nav and main .
solution2
0 2019-03-20 03:45:33
尝试将页脚标签放置在主要标签之后。
solution3
0 2019-03-20 03:51:02
body { margin:0px; } main { margin: 1cm auto; width: 50%; padding: 1cm; border: 1px solid black; } nav { border: 1px solid black; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <nav> <label>Name: <input type="text" name="name"> </label> <label>Surname: <input type="text" name="surname"> </label> </nav> <main> <h1> Welcome! </h1> <p> This is your first page </p> </main> <footer> Service Networking </footer> </body> </html>
solution4
0 2019-03-20 04:21:29
Because you put footer tag before nav tag and main tag. Move it to the end.
body { margin:0px; } main { margin: 1cm auto; width: 50%; padding: 1cm; border: 1px solid black; } nav { border: 1px solid black; } footer{ border: 1px solid green; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <nav> <label>Name: <input type="text" name="name"> </label> <label>Surname: <input type="text" name="surname"> </label> </nav> <main> <h1> Welcome! </h1> <p> This is your first page </p> </main> <footer> Service Networking </footer> </body> </html>
solution5
0 2019-03-20 04:58:32
Since your first element inside <body> is footer , the HTML will be presented line by line.
footer is a semantic tag that is introduced in HTML 5. The semantic elements are just tags with meaning.
So your footer tag is block level element and so it has property display:block .
Similarly if you use header element as the last element before body then also the header contents will be displayed at the bottom, since its an semantic tag(tag with meaning that helps both browser and human to understand the content inside the tag).
You can have multiple header footer section tag until it makes meaningful for browser and human.
Demo : https://jsfiddle.net/akshaymhatre89/ekvgLxcy/11/
<header>
<h1>Header</h1>
</header>
<hr>
<main>
<section>
<header>
<h2>Section header</h2>
</header>
<article>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex minima magnam
</article>
<footer>
<p>End of article</p>
</footer>
</section>
</main>
<hr>
<footer>
© Copyright :-)
</footer>
More Articles to refer :
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.