CSS Styles im Forum
Kapitel 3 : Buttons - CSS Styles und HTML im Forum
Kapitel 3 : CSS & HTML im Forum
|
CSS Styles im Forum
Kapitel 3 : Buttons - CSS Styles und HTML im Forum
|
|
|
| User Tutorial zu CSS Styles & HTML im Forum |
Kapitel 3 : CSS Buttons Button Farbe und Button Rahmen anpassen
Möchte man auf seiner Seite oder Forum einen Button unterbringen, der mal ein wenig anders aussehen soll als der Standard, dann kann man CSS Code nutzen, um das richtig zu bewerkstelligen. Die Anpassung der Farbe und des Rahmens der Buttons kann wieder über verschiedene CSS Varianten erfolgen. Wir verwenden hier wieder die zuvor vorgestellen Varianten : 1) im Quelltext ein Attribut style hinzufügen 2) im Header-Bereich die Style-Anweisungen definieren 3) im Header-Bereich die Style-Anweisungen definieren und zusätzlich die Stylesheeht-Klasse angeben Variante 1) Hier wird der Button Style direkt im HTML-Element "button" festgelegt, weshalb dieser Style dann auch NUR FÜR DAS ELEMENT gilt. Diese Variante ist eine recht häftige Button Einbindung die man recht oft findet, so auch auf WP beispielsweise bei Kategorien (bei neuer Eintrag) oder den Sportwetten Tipps, aber auch im Ergebnis Dienst, z.B. die Fussball Ergebnisse in den Buttons der Suchfunktionen vorhanden. <button style="color:#050; background-color:#FED; font-weight:bold; Variante 2) Hier wird der Style global wieder festgelegt. Das "button" vor der geschweiften Klammer bedeutet, dass die eingeschlossenen Styles auf alle Elemente des Typs "button" angewendet werden. Auch die Button Variante 2 ist gebräuchlich, auch in unserem Forum z.B. siehe neue Ticker in Liveticker, aber auch bei den Wett-Tipps (System) oder im Wettanbieterverleich, z.B. Wettbörsen findet es seinen Platz.
<style type="text/css">
button
{
color : #050;
background-color : #FED;
font-weight : bold;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #050;
}
</style>
Variante 3) Hier wird der Style ebenfalls global festgelegt. Zudem wird hier mit dem Zeichen "." nach dem "button"-Element auf eine Stylesheet-Klasse referenziert. In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "button.test". Nun können wir bei den Buttons, bei denen der Style angewendet werden soll, diese Stylesheet-Klasse auswählen, so dass auch nur diese Elemente entsprechend des Styles angepasst werden. Hat man also zwei oder mehrere Buttons auf seiner z.B. Wett Seite versieht man jeden Button, was den zuvor definierten Style anwenden soll mit dem Attribut "class" und als Wert setzt man den Namen der zu verwendenen Stylesheet-Klasse.
<style type="text/css">
button.test
{
color : #050;
background-color : #FED;
font-weight : bold;
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : #050;
}
</style>
Das dazugehörige "button"-Element zu unserem Beispiel sieht dann so aus :<button class="test">Wetten</button> Wer noch einige weitere Beispiele zu CSS Style Buttons möchte, auch die ein oder andere praxisnahe Alternative sollte mal in unserem Kapitel 3a CSS Button Beispiele oder auch im weiteren Beispielkapitel 3b CSS Button mit Tabellen bzw. dem DIV Button Kapitel schauen. Die obigen Button Varianten bewirken alle folgendes :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 |