Is this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...
HTML5 code:
- Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<meta name="description" content="fromthericefields, blog, home" />
<meta name="author" content="Joseph Davies" />
<link rel="stylesheet" type="text/css" href="header.css" />
</head>
<body>
<header id="mainheader">
<hgroup>
<h1>fromthericefields</h1>
<h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2>
<h3>Proverbs 18:21;</h3>
</hgroup>
<nav>
<ul>
<li><a href="signin.html">Sign in</a></li>
<li>|</li>
<li><a href="register.html">Register</a></li>
</ul>
</nav>
</header>
<nav id="mainnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Blog</a></li>
<li><a href="index.html">Gallery</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h4>Setting up fromthericefields:</h4>
<h5>Posted on 10/5/12</h5>
</article>
</section>
<aside>
<blockquote>
</blockquote>
</aside>
</body>
</html>
The CSS:
- Code: Select all
body {
}
#mainheader {
background: blue;
margin-top: -25px;
margin-left: auto;
margin-right: auto;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
height: 200px;
width: 1000px;
}
#mainheader hgroup {
padding-top: 10px;
width: 1000px;
}
#mainheader h1 {
font-style: italic;
color: #ffffff;
text-shadow: 5px 5px 5px #000000;
font-size: 40px;
}
#mainheader h2 {
font-style: oblique;
font-size: 20px;
color: #FF0000;
margin-left: 20px;
margin-top: -20px;
}
#mainheader h3 {
font-family: monospace;
font-size: large;
color: #AAAAAA;
margin-left: 600px;
margin-top: -10px;
}
#mainheader nav {
margin-left: 810px;
margin-top: -130px;
}
#mainheader ul {
list-style-type: none;
}
#mainheader li {
text-align: center;
display: inline;
color: white;
}
#mainheader a {
text-decoration: none;
color: white;
}
/*Main Navagation Bar*/
#mainnav {
width: 900px;
background: red;
border-bottom-left-radius: 25px;
border-bottom-right-radius:25px;
margin-left: auto;
margin-right: auto;
}
#mainnav ul {
list-style-type: none;
margin-left: -2.5em;
}
[b]
#mainnav li {
display: inline;
border: solid;
}[/b]
#mainnav a {
text-decoration: none;
color: white;
text-align: center;
}
The place where the issue occurs is in bold.
setting the display to inline, when I go to adjust the width, nothing happens but they stay the same size
set it to float: left the whole thing dissapears!
Why?
