kostenloser Webspace werbefrei: lima-city


Rollover button css

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    chalk

    chalk hat kostenlosen Webspace.

    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 Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    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. 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. 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! :wink:
  6. Autor dieses Themas

    chalk

    chalk hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!