Frage Padding bei Hover (ul)

[noahklr]

#main-navbar{
background-color:#333;
color:#fff;
}

#main-navbar ul{
padding-top:15px;
padding-bottom:15px;
padding-left: 0;
list-style:none;

}

#main-navbar li{
display:inline;

}

#main-navbar a{
color:#fff;
text-decoration:none;
font-size:21px;
padding-right: 25px;


}

/*Meine Frage:Ich habe eine Navbar und will, wenn ich hover, dass eine border mit 2px um das list item drum rum geht.Ich habe zwischen den list items ein padding-right von 25px das sie nicht so gequetscht sind. wenn ich dann aber hover werden die 2px der border noch dazu addiert und es verschiebt sich immer. */

#main-navbar a:hover{
color:#000;
background-color:#fff;
border:2px solid;
border-color:#000;

}

#main-navbar a:active{
color:#AB7A94;
}

 

[noahklr]

Mach das Border statisch um alle Elemente, aber im Grundzustand transparent. Dann ändere beim Hover nur die Farbe.

Danke für die Antwort.
Kannst du mir sagen/zeigen wie das geht?
Bin noch ziemlich am Anfang, sorry :)

 

[noahklr]

So habe ich es mir vorgestellt und gerade getestet. Die Farbe des Randes habe ich auf lightblue geändert, weil er sonst schlecht zu sehen war:

        #main-navbar a {
            color: #fff;
            text-decoration: none;
            font-size: 21px;
            padding-right: 25px;
            border: 2px solid transparent;
        }

        /*Meine Frage:Ich habe eine Navbar und will, wenn ich hover, dass eine border mit 2px um das list item drum rum geht.Ich habe zwischen den list items ein padding-right von 25px das sie nicht so gequetscht sind. wenn ich dann aber hover werden die 2px der border noch dazu addiert und es verschiebt sich immer. */

        #main-navbar a:hover {
            color: #000;
            background-color: #fff;
            border-color: lightblue;
        }

Dann verschiebst sich nichts mehr.

Danke dir, werde es morgen direkt einfügen