Jump to content

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?

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...