Button mit Background + icon + Text – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Button mit Background + icon + Text Sun, 15 Apr 12 00:23:56 Z https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547663?srt=yes#m1547663 https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547663?srt=yes#m1547663 <p>Hallo zusammen</p> <p>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.</p> <p>Und so nehme ich hierfür die Zeile:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Aktuell<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onfocus</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">blur</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">AktuellerLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'Pictures/Button.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">border-top</span><span class="token punctuation">:</span>0</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Auswahl den Favoriten hinzufügen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pictures\Sunny.ico<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Denker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Favoriten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <p>Aber es geht mir erst einmal an erster Stelle um den Text hinter den Icons!</p> <p>Würde mich also freuen wenn mir jemand helfen könnte.</p> <p>Danke Gruß Andreas</p> Button mit Background + icon + Text Sun, 15 Apr 12 09:58:10 Z https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547665?srt=yes#m1547665 https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547665?srt=yes#m1547665 <p>Moin,</p> <blockquote> <p>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.</p> </blockquote> <p>Gut.</p> <blockquote> <p>Und so nehme ich hierfür die Zeile:</p> <pre><code class="block language-html"></code></pre> </blockquote> <p><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></p> <blockquote></blockquote> <pre><code class="block"> 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) </code></pre> Button mit Background + icon + Text Sun, 15 Apr 12 12:19:28 Z https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547664?srt=yes#m1547664 https://forum.selfhtml.org/self/2012/apr/15/button-mit-background-icon-text/1547664?srt=yes#m1547664 <p>[latex]Mae  govannen![/latex]</p> <blockquote> <p>[code lang=html]<button id="Aktuell" type="button" onfocus="this.blur()"</p> </blockquote> <p>Du willst also dem Nutzer die Bedienung per Tastatur unmöglich machen?</p> <p>Stur lächeln und winken, Männer!<br> Kai</p> <div class="signature">-- <br> It all began when I went on a tour, hoping to find some furniture<br>  Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)<br> <a href="http://selfhtml.knrs.de/#h_stylesheet" rel="nofollow noopener noreferrer">SelfHTML-Forum-Stylesheet</a> </div>