CSS .Button mit IMG

Dieses Thema im Forum "Webentwicklung" wurde erstellt von master2005, 4. November 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 4. November 2011
    Hallo zusammen.

    Ich verzweifele gerade hier. Ich hätte gerne meine <button>´s abgerundet dynamisch mit einem IMG.

    Habe mal eine img Datei aus dem Internet zb die hier :

    http://www.holidaycheck.de/image/element_sprite/sprite_global_de.gif?29263

    Da gibt es ja 2 Buttons inkl. Mouse:Hover.

    Wie kriege ich es hin das wenn ich mein Button aufrufe <button>Startseite</button>, das die so schön abgerundet wie bei Holidaycheck sind.

    Mein Anfang war:

    button {

    background-image: url("IMG");

    }

    button span {
    background-image: url("IMG");
    background-position: right;
    }


    <button><span>Startseite</span></button>


    Aber das klappt nicht und weiter komme ich leider auch nicht.

    Wäre nett, wenn mir einer eventuell dabei helfen könnte.

    mfg
     
  3. 4. November 2011
    AW: CSS .Button mit IMG

    versuch mal border-radius
     
  4. 4. November 2011
    AW: CSS .Button mit IMG

    Aber das kann doch nicht sooo gut sein oder ? wenn das kaum große Seite verwenden...
     
  5. 4. November 2011
    AW: CSS .Button mit IMG

    also ich habs so gelernt,
    mozilla nutzt es z.B. auch. Kann dir jetzt aber nicht sagen wie der IE damit umgeht..

    Ist halt CSS3 ...
     
  6. 4. November 2011
    AW: CSS .Button mit IMG

    lame:
    du erstellst 3 grafiken.
    - rundung rechts
    - rundung links
    - wiederholbaren zwischenraum

    beispiel:
    http://murdoc.eu/rr/button mit nem kleinen zwischenraum damit du siehst wo die eine grafik anfängt und die andere aufhört.

    css3:
    border-radius
     
  7. 4. November 2011
    AW: CSS .Button mit IMG

    3 Grafiken zu nutzen ist aber nicht "schön" da hier 3 Anfragen an den Server gemacht werde müssen.

    Besser ist eine Sprite Grafik zu nutzen mit dem Button in Überlänge und wenn nötige auch gleich mit "Hover"-Button als zweite Grafik unten drunter.

    Das ganze wird dann ähnlich wie bei Murdoc mit EINEM extra Span-Tag und Background-position geregelt.

    Hier ist eine schön Erklärung:
    Make fancy buttons using CSS sliding doors technique : Janko At Warp Speed
     
  8. 4. November 2011
    AW: CSS .Button mit IMG

    hier der unterschied zwischen sprite und 3-grafik model
    http://murdoc.eu/rr/button
     
  9. 4. November 2011
    AW: CSS .Button mit IMG

    Wer auf einen Button einen Roman schreibt der macht etwas falsch

    Außerdem lässt sich der Bereich beliebig lang abspeichern.

    Deine 3-Grafik Variante lässt sich auch in eine 1-Grafik variante verwandeln in dem man die 3 Teile untereinander packt und den mittleren teil so breit wie die beiden Rundungen macht.
     
  10. 4. November 2011
    AW: CSS .Button mit IMG

    stimmt, habs angepasst
     
  11. 5. November 2011
    AW: CSS .Button mit IMG

    Auf Span verzichten und before nutzen. Nur so als Idee.
     
  12. 5. November 2011
    AW: CSS .Button mit IMG

    Da hat theQuest natürlich Recht, damit spart man sich das unnütze Span-Tag.

    Der Support für :before und :after ist, bis auf den IE (erst ab IE 8+), flächendeckend.
    CSS - Contents and compatibility
     
  13. 5. November 2011
    AW: CSS .Button mit IMG

    :before und :after sind nicht zu empfehlen, da sich diese selektoren an den TEXT ausrichten. mit ein wenig fummelei funktioniert es zwar, ist aber mmn. recht fehleranfällig.

    was aber noch funktioniert sind multiple backgrounds dank css3:
    http://murdoc.eu/rr/button
     
  14. 6. November 2011
    AW: CSS .Button mit IMG

    Wenn man den HTML-Code möglichst minimal halten will, würde ich before:after bevorzugen. Das mit dem multiplen Hintergrund kannte ich nicht. Ansonsten würde ich dem Gradient den Vorzug geben.
     
  15. 7. November 2011
    AW: CSS .Button mit IMG

    Danke euch ihr habt mir alle sehr geholfen.
    BW ist raus
     
  16. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.