Home/ Questions/Q 8138813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T11:37:17+00:00

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>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 “!”)

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

    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:

    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:

    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.

    • 0