CSS Button Problem

11/07/2013 19:17 CHXENVS#1
Tag Leute,

will sich zwar jetzt im ersten Moment übertrieben lächerlich anhören, aber ich bekomm es einfach nicht gebacken! (Lachen erlaubt)

Ich versuche gerade in meine Navi einen Loginbutton einzubauen.
Die Hover (normal, hover, active) werden aus einer Bilddatei ausgelesen.
Bis jetzt ist es ja noch kein Problem, nun will ich aber meinen Button nicht am Bildschirmrand (top) kleben haben, sondern will diesen Button um 13px nach unten verschieben.

Jetzt werden einige sagen, wo liegt das Problem? Mach doch einfach margin-top oder padding-top. - Keine schlechte Idee, aber wenn ich margin-top verwende, schiebe ich die komplette Navi runter und wenn ich padding-top verwende schiebe ich zwar den Button an die richtige Stelle, nur dann machen mir die Hover nen Strich durch die Rechnung ... (Siehe Screen)

Screen (mit der Verwendung von padding-top)

Sieht dann leider so aus, wenn ich mit der Maus über den Button fahre / klicke.


Hier wäre noch der CSS Code des Buttons:

Und hier ist der Container im Quelltext bzw. aus der index:
11/07/2013 19:56 Mikesch01#2
Weiss grad nicht, warum jeder Zustand bei dir eine anderen Größe hat. Eigentlich sollte sich nur das Bild ändern:

Code:
#login_button{
padding-top:13px;
}	
						
#login_button a{
background:url(../images/button_small.png) no-repeat;
background-position: 0px 0px;
height:37px;
width:102px;
float:right;
}

#login_button a:hover{
background-position: 0px 30px;
}
				
#login_button a:active{
background-position: 0px 60px;
}
Die Werte für background-position sind fiktiv. Hier musst du deine eigenen Werte eingeben.
11/07/2013 20:07 CHXENVS#3
Verdammte sche... wieso bin ich nicht selbst drauf gekommen?! Danke!!