kostenloser Webspace werbefrei: lima-city

Rollover button css

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   chalk

   chalk hat kostenlosen Webspace.

   11:58, 26.5.2011

   Hallo zusammen,
   
   Wie der Name schon fast verrät versuche ich mich im Moment an einem Rollover Button. Dazu benutze ich eine Css Datei, die bis jetzt wie folggt aussieht
   
   

   /* CSS Document */
   
   a.rollover {
   display:block;
   background: url(Button1.png);
   width: 155px;
   height: 50px;
   border: 0;
   text decoration: none;
   }
   a.rollover:hover {
   background-position: -50px;
   }

   
   
   Das Bild (Button1.png) sind beide Button einmal im normalen Status und einmal im hover Status. Wenn man nun drüber geht verschiebt sich das Bild aber nicht um 100% wie ichs gerne hätte sondern stoppt in der Mitte, so dass man beide Buttons ein wenig sieht. Weiß jemand was ich falsch gemacht habe ?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. daswing

   Moderator

   daswing hat kostenlosen Webspace.

   15:05, 26.5.2011

   Erstelle deine Button nebeneinander(horizontal) oder untereinander(vertikal). Wenn du schon background-position nimmst kannst du folgendes nutzen:
   
   

   background-position: top; /* Hier wird das Bild oben platziert. */
   background-position: bottom; /* Hier wird das Bild unten platziert. */
   background-position: left; /* Hier wird das Bild links platziert. */
   background-position: right; /* Hier wird das Bild rechts platziert. */
   background-position: center; /* Hier wird das Bild in der Mitte platziert. */

   
   Jeweils das Bild eben ausgerichtet.
   
   Das ganze funktioniert natürlich auch in Kombination.
   
   

   background-position: left top; /* Hier wird das Bild eben in der linken oberen Ecke platziert */

   
   
   mfg Stephan

4. sneppa

   

   sneppa hat kostenlosen Webspace.

   15:09, 26.5.2011

   chalk schrieb:
   Weiß jemand was ich falsch gemacht habe ?

   
   Na, wenn du sagst, es ist zur Häfte nur drin,
   dann versuche entweder -50px oder 100px :)

5. wagnerm

   wagnerm hat kostenlosen Webspace.

   15:14, 26.5.2011

   chalk schrieb:
   Hallo zusammen,
   
   Wie der Name schon fast verrät versuche ich mich im Moment an einem Rollover Button. Dazu benutze ich eine Css Datei, die bis jetzt wie folggt aussieht
   
   

   /* CSS Document */
   
   a.rollover {
   display:block;
   background: url(Button1.png);
   width: 155px;
   height: 50px;
   border: 0;
   text decoration: none;
   }
   a.rollover:hover {
   background-position: -50px;
   }

   
   
   Das Bild (Button1.png) sind beide Button einmal im normalen Status und einmal im hover Status. Wenn man nun drüber geht verschiebt sich das Bild aber nicht um 100% wie ichs gerne hätte sondern stoppt in der Mitte, so dass man beide Buttons ein wenig sieht. Weiß jemand was ich falsch gemacht habe ?

   Laut deinen CSS-Angaben ist das Gesamtbild mit beiden Buttons 155px breit (width:155px;). Wenn du das Bild jetzt um 50px nach links verschiebst, sieht man eben noch 105px vom Gesamtbild. Daraus schließe ich, dass von beiden Buttons eben nur ein bißchen was zu sehen ist. Liegt dein Problem vielleicht darin? Rechne die Pixel sicherheitshalber nochmal nach!
6. Autor dieses Themas

   chalk

   chalk hat kostenlosen Webspace.

   0:06, 27.5.2011

   habs jez nach daswings Variante gem8, vielen dank für die hilfe

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?