CODEWITHSUNDEEP
htmlcss
Rohitink
Rohitink

Reputation: 1174

Height of Div is too much, not getting reduced?

I am trying to create a menubar with a few links in it. Here is my relevant code:

CSS:

#menuBar {
    overflow: auto;
    padding: 0px 0px;
    margin: 15px 0px;
}
div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
}
div#menuItem ul a {
    font-size:14px;
}

HTML

<div id="menuBar">
<div id="menuItem"> 
<ul>
<li> <a href="index.php"> HOME</a> </li>
<li> <a href="index.php"> ABOUT</a> </li>
</ul>
</div> <!-- Menuitem closes -->
</div>

So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of #menuBar {padding -5px 0px }. But, nothing happens.

How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.

Upvotes: 1

Views: 2572

Answers (2)

Foreign Object
Foreign Object

Reputation: 1640

Try floating the div#menuItem ul li left, then add display:block to your a element and an explicit line-height value.

div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
    float:left;
}

div#menuItem ul a {
    display: block;
    font-size:14px;
    line-height: 1;
    text-decoration: none;
 }​

Upvotes: 0

Salketer
Salketer

Reputation: 15711

put a height to the div... either by using the line-height or height properties.

Upvotes: 1

Related Questions