html5 nav height style

Question

Html:

<body>
        <div>
            <header>
            HTML5
            </header>           
            <nav>
             <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Logout</a></li>
                    <li><a href="">Login</a></li>

             </ul>

            </nav>
            <p id="navclear" />

css:

/*page*/
body{
    margin:0 auto;
    width: 800px;
    height:auto;
    border: 1px solid black;
}



/*navigation*/
nav{
    border: 1px solid black;
    background-color: #E3E3E3;
    height:auto;
}
nav ul{
    list-style:none;
    padding:0;
    !margin-top:0;


}


nav li a{
    float:left;
    text-decoration:none;
    display: block;
    padding-right:5px;
    width:75px;
    background-color: #E3E3E3;
    color:#66777F;
    !line-height: .5em;
    font-weight: bold;
    font-family:Cantarell, Arial, Helvetica, sans-serif;
}

nav li a:hover{
    color: #FE4C06;
}

#navclear{
    clear:both;
}

I am new to html5. Here i am facing problem with height property.I want to make my my nav height auto i tried the same with above syntax but the ul part overflowed from nav.Means height:auto; not working . i cant fix the same by nav ul {margin-top:0;}. Here my question is how to make nav height auto?

http://jsbin.com/alukej/edit#javascript,html,live

I have no idea what you're asking. Why are you using `!height:35px`? Which browser are you testing in? — thirtydot, Jun 25 '12 at 14:24
If you want the height to be auto, just remove `!height:35px;`, which shouldn't have the exclamation point anyway. If that doesn't do what you want, `height:auto;` isn't the problem. Instead, you should explain what you're trying to achieve. Height with CSS can be confusing sometimes, so it's likely working correctly. — Nathanael, Jun 25 '12 at 14:29
i just removed !height:35px; but still have the same problem. i am using fire fox @thirtydot — sudeep cv, Jun 25 '12 at 14:40
Your question does not contain enough detail. It is not answerable. Nobody can answer it. All we can do it guess, because your question is unclear. Here's my guess: add `nav { overflow: hidden }`. You should improve your question. Try making a http://jsbin.com/ demo. — thirtydot, Jun 25 '12 at 14:42
It will work if you change `
` to `
`. It's not good code though. — thirtydot, Jun 25 '12 at 15:40
thirtydot thanks it's works fine. bad code? then how can i improve it?Thanks. — sudeep cv, Jun 25 '12 at 15:49

score 4 · Accepted Answer · edited May 23 '17 at 11:53

EDIT

As thirtydot commented, you had the <p class="clear" /> in the wrong spot. Here's revised code below:

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Logout</a></li>
    <li><a href="">Login</a></li> 
  </ul>
  <div class="clear"></div>
</nav>

I deleted all of your unnecessary code (you still had a lot of "!")

jsBin Edit 1

Another option is to use nav li{ display: inline; } instead of nav li{ float:right; } Code below:

jsBin Edit 2

ORIGINAL

Just to expand on thirtydot and Nathanael's comments.

!higher:35px is the wrong syntactical usage of the exclamation point in CSS. See here for an explanation on how to use it correctly:

How do you read !important in CSS?

With that said, it doesn't appear that you need !important in your CSS code.

Furthermore, you don't need your last line either, height:auto; because that is already the default behavior of the element's height property. So, as far as any of us can tell right now, your final code simply needs to be:

jsFiddle.net Demo

HTML

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Logout</a></li>
    <li><a href="">Login</a></li>
  </ul>
</nav>

CSS

nav{
  border: 1px solid black;
  background-color: #E3E3E3;
}

If you are trying do achieve something different, please edit your question and explain it more clearly. Sometimes pictures help with HTML questions.

html5 nav height style

1 Answers1