hallo,

ik heb een horizontaal menu.
wanneer ik over een knop ga. krijgt hij een andere achtergrond kleur en een border links en rechts. maar nou doet hij iets wat ik niet wil.

hij voegt de breedte van de 2 borders.. dus 2 keer 1px bij de padding op.
en nu schuift de knoppen die daarachter komen allemaal 2 px op..

dit is uiteraard niet de bedoeling.

html:

Code:

<div id="top">
        <div id="menu">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">WERKZAAMHEDEN</a></li>
                <li><a href="#">PROJECTEN</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div><!-- END MENU -->
    </div><!-- END TOP -->

css:

Code:

#top {
    background:url(../images/menu_bg.jpg) repeat-x;
}

#menu {
    width:880px;
    margin:0 auto;
}

#menu a {
    text-decoration:none;
    color:#efefe5;
    font-size:12px;
    margin:0px 5px 0px 5px;
    padding:8px 15px 8px 15px;
    line-height:30px;
    letter-spacing:2px;
}

#menu a:hover, active  {
    background-color:#88af36;
    border-left:1px solid #abd15b;
    border-right:1px solid #abd15b;
}

#menu li {
    display:inline;
}

alvast bedankt

Björn Eijt

edit // heb padding in de a:hover gewoon 2 px kleiner gemaakt.. stom dat ik er niet aan heb gedacht..

sorry voor het ongemak.

Dit komt omdat je de padding en de borders op moet tellen en van de breedte van je links af moet trekken. Het getal wat daar uit komt is de breedte die de links moeten krijgen als je er over hovered.

Jij hebt je links ook geen breedte gegeven, in dat geval is het dus de padding links en rechts met 1 pixel verkleinen.

dus padding: 8px 14px 8px 14px;

En stom dat ik dat niet gelezen had, toen ik de post van je las.