CSS Styles im Forum
Kapitel 3c : DIV Button Beispiele - CSS Styles & HTML im Forum
Kapitel 3c : CSS & HTML im Forum
|
CSS Styles im Forum
Kapitel 3c : DIV Button Beispiele - CSS Styles & HTML im Forum
|
|
|
| User Tutorial zu CSS Styles & HTML im Forum |
Kapitel 3c : Weitere Beispiele CSS Button mit DIV Einen DIV Button mit Farbe, Rahmen gestalten
In diesem Teilabschnitt unseres CSS Tutorials bzw. How-To zur Css Button Gestaltung geht es nun um die Verwendung von Element DIV beim Erstellen von Button Styles. Solche mit div und entsprechendem Style erstellten CSS Buttons sind sehr gebräuchlich und in unserem Sportwetten Forum recht häufig anzutreffen. 1. Beispiel eines CSS Button mit DIV Um einen solchen Button zu erstellen benötigen wir zunächst das div Element : <div>Wetten Forum</div> Hier ist ohne entsprechenden Button Style noch nicht allzu viel von einem cSS Button zu erkennen, sodas wir nun uns um dessen Gestaltung mit Hilfe der Cascading Style Sheets kümmern müssen. Dazu definieren wir im Header Bereich (Variante 2) entsprechenden Style :
a.bt11:link { color: #ffffff; text-decoration: none }
a.bt11:hover { color: #cc0000; text-decoration: none }
a.bt11:visited { color: #ffffff; text-decoration: none }
.bt12 { width:110px;background:#e1ebf0;padding:1px;border: 1px solid #487D97;white-space:nowrap;text-align:center; }
.bt13 { width:100%;height:100%;border:1px solid #487D97;background:#487D97; }
.bt14 { padding-right:4px; }
.bt15 { font-family:Verdana;font-weight:bold;font-size:10px;font-variant:small-caps;color:#ffffff; }
Nachdem wir die Klassen für unseren Beispiel Button definiert haben,wenden wir uns dem Button selbst zu, dabei verwenden wir neben div auch span, sowie einige Navigations Elemente als Bilder um das schicker zu machen und fügen unsere zuvor definierten CSS Classes in den Button ein : <div class="bt12"><span class="bt13"><span class="bt14"> <img border="0" src="/m_r.gif" width="4" height="7" alt="Tippen">Ist das vollbracht erreichen wir somit folgendes Button Ergebnis : Wir machen hierzu noch weitere Button Beispiele fertig, da diese Variante eben sehr häufig ist und auch umfassende Möglichkeiten bietet. Auch hier sind verschiedenste Mouseover Effekte möglich auch was die Einbindung von Bildern bei einem Button betrifft, Im Zusatz Kapitel 3d gibt es dann weitere Buttons und auch Hilfestellung beim Einsatz, da gerade bei den Div Buttons sich auch einige Probleme ergeben, dazu aber dann mehr im nächsten Kapitel. Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum |
| Wettpoint Übersicht und Forum Index | ||
|---|---|---|
 Forum & allgemeine Diskussion Sportwetten Tipps Wettforum und Wett-Tipps
Archiv |
Sport allgemein Statistiken
Bonus Angebote & Vergleich |
 Fussball aktuell Tennis aktuell Eishockey aktuell
 Basketball aktuell |
 |
 © 2010 Sportwetten Forum & Tipps Wettpoint.com |
