fromthericefields Posted May 12, 2012 Share Posted May 12, 2012 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 More sharing options...
niche Posted May 13, 2012 Share Posted May 13, 2012 (edited) 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 May 13, 2012 by niche Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now