Invalid HTML elements
I'm doing a simple site with some html-elements (in this case h1
, ul
, li
, div class ="test"
).
For some reason, the two items are not showing in the correct order. I have ul
one that has multiple entries li
. That being said (at least in my code) I have p
. However, when I run the HTML file, it ul
uses p
as the starting point for positioning with margin-top: 110px;
. It really hit me. If you want to see my code and run it for yourself, you are here:
Here is a Code Demo:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
body {
text-align: center;
background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
background-size: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
ul {
left: 10px;
right: 10px;
position: fixed;
margin-top: 110px;
background-color: aliceblue;
text-align: center;
}
li {
display: inline;
padding-right: 10px;
padding-left: 10px;
}
.navigation-bar-items {
font-size: 30px;
color: grey;
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
}
.mainLogo {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
.main {
max-width: 1000px;
background-color: aquamarine;
margin-top: 1000px;
}
.test {
margin-top: 200px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Welcome to my blog</h1>
</div>
<ul>
<div class="navigation-bar-items">
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</div>
</ul>
</header>
<div class="test">Hello</div>
</body>
source to share
Yours div
with the class test
has a set margin:top
. This clicks on your element <body>
, which also drops your other fixed element.
To fix this, use position: relative
and top
instead of margin: top
on div
with class test
.
Live example:
body
{
background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
background-size: 100%;
font-family: 'Open Sans', sans-serif;
text-align: center;
}
h1
{
background-color: white;
color: #CE4F04;
font-family: 'Pacifico', cursive;
font-size: 50px;
margin-left: -10px;
margin-right: -10px;
margin-top: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
ul
{
background-color: aliceblue;
left: 10px;
margin-top: 110px;
position: fixed;
right: 10px;
text-align: center;
}
li
{
display: inline;
padding-left: 10px;
padding-right: 10px;
}
.navigation-bar-items
{
color: grey;
font-size: 30px;
}
.container
{
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.mainLogo
{
background-color: white;
color: #CE4F04;
font-family: 'Pacifico', cursive;
font-size: 50px;
margin-left: -10px;
margin-right: -10px;
margin-top: 15px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}
.main
{
background-color: aquamarine;
margin-top: 1000px;
max-width: 1000px;
}
.test
{
position: relative;
top: 200px;
}
<header>
<div class="container">
<h1>Welcome to my blog</h1>
</div>
<ul>
<div class="navigation-bar-items">
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</div>
</ul>
</header>
<div class="test">Hello</div>
JSFiddle version: https://jsfiddle.net/zdb7du9L/2/
source to share
div.test
top edge collapses with body
top edge → body
top edge of content moves down → ul
moves down. If you prevent the margin from shrinking between body
and div.test
(for example, by applying padding-top
to body
), it ul
will position as expected.
body {
text-align: center;
background-image: url(https://classconnection.s3.amazonaws.com/114178/flashcards/759682/jpg/cumulus.jpg);
background-size: 100%;
font-family: 'Open Sans', sans-serif;
padding-top: 1px
}
h1 {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
ul {
left: 10px;
right: 10px;
position: fixed;
margin-top: 110px;
background-color: aliceblue;
text-align: center;
}
li {
display: inline;
padding-right: 10px;
padding-left: 10px;
}
.navigation-bar-items {
font-size: 30px;
color: grey;
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
}
.mainLogo {
text-align: center;
font-size: 50px;
color: #CE4F04;
background-color: white;
margin-left: -10px;
margin-top: 15px;
margin-right: -10px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Pacifico', cursive;
}
.main {
max-width: 1000px;
background-color: aquamarine;
margin-top: 1000px;
}
.test {
margin-top: 200px;
}
<header>
<div class="container">
<h1>Welcome to my blog</h1>
</div>
<ul>
<div class="navigation-bar-items">
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</div>
</ul>
</header>
<div class="test">Hello</div>
source to share
Few things:
First, you cannot have div
inside ul
. This is invalid HTML .
So, wrap it up ul
inside div
.
<div class="navigation-bar-items">
<ul>
<li>Home</li>
<li>About me</li>
<li>Social</li>
<li>Contact Me</li>
<li></li>
</ul>
</div>
Secondly, although you mention this in your question, there is no <p>
(paragraph of paragraph) in your code .
Third, the element is <header>
intended for introductory or navigation content only. You have it there #container
. If this container is for your main body content, then you might want to revisit this structure .
Fourth, once your HTML is correct and semantically correct, run it through the W3C Mark-Up Validation Service . It will show you errors and warnings.
I understand that you need help with CSS. This is described in other answers here. But save yourself tons of maintenance and troubleshooting with the error down: get the HTML first. Then focus on your CSS.
Good luck!
source to share