Jump to content
FateAce

Help with nav bar

Recommended Posts

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:

 

 

4ga9vjn.png

 

 

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;}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

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.

Guest
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.

Loading...

×
×
  • Create New...