andynail: Button mit Background + icon + Text

Hallo zusammen

ich will auf meiner Webseite Schaltflächen erstellen, die als Hintergrund einen grafischen Verlauf von Weiß nach Grau zeigen, und vorne sollen Icons und Text angezeigt werden.

Und so nehme ich hierfür die Zeile:

<button id="Aktuell" type="button" onfocus="this.blur()" onclick="AktuellerLink()" style="background: url('Pictures/Button.jpg'); height:40px; width:120px; text-align:left; padding:0; border-top:0" title="Auswahl den Favoriten hinzufügen"><img src="Pictures\Sunny.ico" width="32" height="32" align="middle" alt="Denker">  Favoriten</button>  

Aber leider zeight der FireFox den Text nie vertikal zentriert, sondern immer auf gleicher Höhe wie die Grafik an. Das ich border-top:0 schreibe liegt daran, dass ansonsten so blöd störende Striche angezeigt werden. Das würde ich auch gerne in den Griff bekommen. Hier stört es nicht so, dass da ein Strich angezeigt wird, aber die Buttons sollen auch anderswo noch in Einsatz kommen, und da Soll das Ganze bitte wie ein Button aussehen. Auch stört es mich, dass Abstände zwischen den Buttons vorhanden sind, was sich ja mit einer Tabelle in den Griff bekommen könnte.

Aber es geht mir erst einmal an erster Stelle um den Text hinter den Icons!

Würde mich also freuen wenn mir jemand helfen könnte.

Danke Gruß Andreas

  1. Moin,

    ich will auf meiner Webseite Schaltflächen erstellen, die als Hintergrund einen grafischen Verlauf von Weiß nach Grau zeigen, und vorne sollen Icons und Text angezeigt werden.

    Gut.

    Und so nehme ich hierfür die Zeile:

    <button id="Aktuell" type="button" onfocus="this.blur()" onclick="AktuellerLink()" style="background: url('Pictures/Button.jpg'); height:40px; width:120px; text-align:left; padding:0; border-top:0" title="Auswahl den Favoriten hinzufügen"><img src="Pictures\Sunny.ico" width="32" height="32" align="middle" alt="Denker">  Favoriten</button>

      
    Einen Farbverlauf würde ich heute nicht mehr per Bild machen, sondern per CSS3 inkl. Fallback für Uralt-Browser. CSS bitte auslagern und nicht inline per style-Attribut vergeben. Das title-Attribut des Buttons gibt mir sehr zu denken. "Den Favoriten hinzufügen" mache ich über die Schaltfläche meines Browsers, da hat die Webseite nix mit zu tun.  
      
    
    > Aber leider zeight der FireFox den Text nie vertikal zentriert, sondern immer auf gleicher Höhe wie die Grafik an.  
      
    1\. [Das Ding heißt Firefox](http://home.comcast.net/~SupportCD/FirefoxMyths.html).  
    2\. `line-height`{:.language-css} auf den gleichen Wert wie `height`{:.language-css} setzen.  
      
    
    > Das ich border-top:0 schreibe liegt daran, dass ansonsten so blöd störende Striche angezeigt werden. Das würde ich auch gerne in den Griff bekommen. Hier stört es nicht so, dass da ein Strich angezeigt wird, aber die Buttons sollen auch anderswo noch in Einsatz kommen, und da Soll das Ganze bitte wie ein Button aussehen.  
      
    Meinst du damit das Default-Styling der Browser? Ohne irgendwelche Style-Angaben deinerseits hat das Button-Element ja trotzdem einen Hintergrund, einen Rahmen u.s.w. Diese Angaben musst du überschreiben (z.B. ~~~css
    button {  
        background:none;  
        border:none;  
    }
    ~~~).  
      
    
    > Auch stört es mich, dass Abstände zwischen den Buttons vorhanden sind, was sich ja mit einer Tabelle in den Griff bekommen könnte.  
      
    Nein. Das bekommt man mit CSS in den Griff. Schaue dir mit Firebug (oder den Chrome Developer-Tools oder Dragonfly in Opera) an, welche CSS-Eigenschaften den Abstand hervorrufen (wahrscheinlich `margin`{:.language-css} und/oder `padding`{:.language-css} und überschreibe diese.  
      
    Gruß,  
    Take
    
    -- 
    [www.take-weiland.de](http://www.take-weiland.de) | [Bürgerinitiative Norden](http://www.bi-norden.de)
    
  2. [latex]Mae  govannen![/latex]

    [code lang=html]<button id="Aktuell" type="button" onfocus="this.blur()"

    Du willst also dem Nutzer die Bedienung per Tastatur unmöglich machen?

    Stur lächeln und winken, Männer!
    Kai

    --
    It all began when I went on a tour, hoping to find some furniture
     Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
    SelfHTML-Forum-Stylesheet