Jump to content

Nav and body structure issue


Recommended Posts

I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs 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:

    <!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:

    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 sizeset it to float: left the whole thing dissapears!Why?

Link to comment
Share on other sites

All the major container should be floated with margins and padding (float left, right, then center. Floating a main container and not floating anything else will cause problems. Also, I'd use margin: 0 auto; inplace of margin-left: auto; margin-right: auto;

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...