CSS-Problem bei Button
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
background
beitrag
body
button
comic
datei
designer
effekt
gucken
image
lsen
margin
none
recht
right
schrift
test
verschiebung
versuchen
-
Ich versuche jetzt seit einiger Zeit einen Button mit CSS zu machen. Es soll so aussehen, als würde der Button nach unten gedrückt, wenn man sich mit der Maus darüber befindet:
Beim Hover-Effekt ändert sich die Rahmenfarbe und die Schrift soll 1px nach rechts und 1px nach unten verschoben werden (-> padding). Die Verschiebung nach rechts hat funktioniert. Aber anstatt dass die Schrift nach unten verschoben wird, wird der ganze Button um 1px nach oben verschoben. :S
Ich hoffe es kann mir jemand sagen, woran das liegt?
Hier der Link: http://colon.lima-city.de/button/index.php
Die php-Datei sieht so aus:
<html> <head> <title>Test</title> <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/> <link rel='stylesheet' type='text/css' href='style.css'/> </head> <body> <a href="" class="button_2">Button #1</a><a href="" class="button_2">Button #2</a><a href="" class="button_2">Button #3</a><br><br><br><br> </body> </html>
Und die CSS-Datei sieht so aus:
body { background-image: url(hintergrund_1.png); padding: 10px; } .button_2 { background-image: url(hintergrund_2.png); margin-bottom: 3px; margin-right: 1px; padding-top: 0px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; font-family: Comic Sans MS; font-size: 16px; color: #ffffff; text-decoration: none; border-top: 1px solid #B0B0B0; border-left: 1px solid #B0B0B0; border-bottom: 1px solid #000000; border-right: 1px solid #000000; } .button_2:hover { padding-top: 1px; padding-right: 9px; padding-bottom: 1px; padding-left: 11px; border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #B0B0B0; border-right: 1px solid #B0B0B0; }
Beitrag geändert: 4.8.2007 0:59:15 von colon -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
http://www.highdots.com/css-tab-designer/
Guck' Dir einfach mal das an... könnte evtl. Dein Problem lösen ;) -
@ greymiche
Vielen Dank! Hat funktioniert. :D -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
