CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 85

Spacing between menu items (CSS)

I have a menu that works on large screens but when the browser size is reduced in width (and the menu wraps) I can't get the menu items not to overlap each other.

HTML:

<div style="padding-top: 10px">
    <a class="menu" style=
    "border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#">Design
    and Install</a><a class="menu" href="#">About this site</a><a class=
    "menu" href="#">Products</a><a class="menu" href="#">F A Q</a><a class=
    "menu" href="#">Portfolio</a><a class="menu" href="#">Contact</a>
</div>

CSS:

.menu {
    font-family: Verdana;
    font-size: 12px;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid;
    border-width: 0 1px 0 0;
    padding: 10px 17px 10px 12px;
}

.menu:link,.menu:visited {
    background-color: #E5E5E5;
}

.menu:hover,.menu:active {
    background-color: #F9C232;
}

http://jsfiddle.net/9j77E/1/

Thanks if you can help.

Upvotes: 2

Views: 32497

Answers (3)

rekire
rekire

Reputation: 47985

Also if I'm too late you could also set line-height to 32. Because your font-size is 12px plus 2 times 10px padding.

Upvotes: 2

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

.menu { 
    font-family:Verdana;
    font-size: 12px;
    color: #000000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid; 
    border-width: 0px 1px 0px 0px;
    padding: 10px 17px 10px 12px;
    display:inline-block;
}

display:inline-block; this property added and tested, please check.

Upvotes: 2

Lucas
Lucas

Reputation: 10646

Try adding display: inline-block; to .menu

Upvotes: 7

Related Questions