FateAce Posted October 13, 2014 Share Posted October 13, 2014 I used to know how to do this, but I'm having problems getting the nav bar for a website I'm making working. I can't get the nav bar to sit inside the header, even though it is inside the header tag. Example: I'm also having trouble with that white space at the top, but the big problem right now is the nav bar. Here is my HTML and CSS code for the above: <header id="headercon"> <h1>Test Site</h1> <nav> <ul> <li>Home</li> <li>About</li> <li>Media</li> <li>Blog</li> </ul> </nav> </header> header { background-color: #3d3d3d; height: auto;}#headercon nav { float: right; display: block; position: relative;}#headercon ul { list-style-type: none; line-height: normal; height: auto; margin: 0px; padding: 0px; overflow: hidden;}#headercon li { display: inline;}#headercon a { display: block; padding: 0px 20px; margin: 0.6em 0.2em 0.6em 0.2em;text-align: center; text-decoration: none;font-weight: bold; font-size: 16px;line-height: 50px; color: #2f2f2f;} Link to comment Share on other sites More sharing options...
divinedesigns1 Posted October 13, 2014 Share Posted October 13, 2014 you have the ul tag in the nav, so you might want to actually style that element so it can be in the right place Link to comment Share on other sites More sharing options...
dsonesuk Posted October 14, 2014 Share Posted October 14, 2014 Your nav is floated, the header can't detect the nav area, so its height adjusts to element it can detect, the h1 tag.Usually using overflow: hidden; on the container i.e the <header> will fix this, and the other benefit of using this is it get rid of collapsing margin problem that is causing the space above header. Link to comment Share on other sites More sharing options...
FateAce Posted October 14, 2014 Author Share Posted October 14, 2014 Your nav is floated, the header can't detect the nav area, so its height adjusts to element it can detect, the h1 tag.Usually using overflow: hidden; on the container i.e the <header> will fix this, and the other benefit of using this is it get rid of collapsing margin problem that is causing the space above header. This has fixed the problem. Thanks. 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