User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 5: Listen mit Hilfe von CSS

Forum Listentyp definieren
Ein häufig verwendetes Mittel, um Aufzählungen übersichtlich darzustellen sind Listen.
Listenformate kommen in den Bereichen des Wettforums häufig vor,
Hier einige Bespiele im Sportwetten Forum alternativ, wo CSS Listen in verschiedener Form angewandt werden,
beispielsweise in der Fussball Statistik, dabei an verschiedensten Stellen von den Tabellen,
bis zu den Tipps z.B. Champions League.
 
Diese CSS Listen können natürlich auch wieder mit einigen Tricks nach Bedarf angepasst werden.
Mit dem Style-Wert "list-style-type" legt man den Darstellungstyp einer Liste fest.
Dieses Attribut kann sowohl für Aufzählungslisten "ul" als auch für nummerierte Listen "ol" verwendet werden.
Wir verwenden hier wieder die zuvor vorgestellen Varianten in den alternativen a-c :
a) im Quelltext ein Attribut style hinzufügen
b) im Header-Bereich die Style-Anweisungen definieren
c) im Header-Bereich die Style-Anweisungen definieren und zusätzlich die Stylesheeht-Klasse angeben


CSS Liste Variante a)
Hier wird der Style direkt im HTML-Element "ol" festgelegt, weshalb dieser Style dann auch NUR FÜR DAS ELEMENT gilt.
<ol style="list-style-type:upper-roman">
	<li>Das erste Listenelment</li>
	<li>Das zweite Listenelement</li>
</ol>

Man könnte nun die Liste mit beispielsweise Tipps füllen,
das würde dann so aussehen, in Bereichen :
  1. alle Sportwetten Tipps
  2. nur Fußball Wetten Tipps

CSS Liste Variante b)
Hier wird der Style global festgelegt. Das "ol" vor der geschweiften Klammer bedeutet,
dass die eingeschlossenen Styles auf alle Elemente des Typs "ol" angewendet werden.
<style type="text/css">
ol
{
list-style-type : upper-roman
}
</style>


CSS Liste Variante c)
Hier wird der Style ebenfalls global festgelegt.
Zudem wird hier mit dem Zeichen "." nach dem "ol"-Element auf eine Stylesheet-Klasse referenziert.
In unserem Beispiel wird also die Stylesheet-Klasse "test" verwendet --> "ol.test".
Nun können wir bei den Listen, 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 Listen auf seiner Seite, versieht man jede Liste, die 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">
ol.test
{
list-style-type : upper-roman
}
</style>
Das dazugehörige "ol"-Element zu unserem Beispiel sieht dann so aus:
<ol class="test">
	<li>Das erste Listenelment</li>
	<li>Das zweite Listenelement</li>
</ol>

Alle Varianten bewirken das folgende Ergebnis:

  1. Das erste Listenelment
  2. Das zweite Listenelement
Solche Listen, speziell auch mit CSS abgestimmt und gestylt sind sehr schön einsetzbar.
Im Wettforum sind noch weitere Bereich geplant um diese Tipps & Tricks alternativ einzusetzen,
so bei der Darstellung der Fussball Ergebnisse als alternativer Bereich des Ergebnis Dienstes von WP.
Besser noch dürften sich die CSS Listen aber noch bei den Kategoriebereichen des Forums machen
z.B. in den Bonusbedingungen z.B. bei Bet365 oder Sportingbet.
In Frage käme aber auch die Liveticker Liste oder die TV live Sport Liste.
Aber diese neuen Einsatzmöglichkeiten der CSS Liste sind erstmal nur eine Vorstellung zur Gestaltung was generell möglich ist.
Weiter bei den CSS Listen geht es im Teil 5a wo das Liste einrücken beschrieben ist.
 
 
Zurürck zur CSS Tutorial Übersicht : CSS & HTML im Forum
 
 
Wettpoint Übersicht und Forum Index
Wetten Forum & allgemeine Diskussion
Wetten Sportwetten Tipps
Wettforum und Wett-Tipps Wettforum und Wett-Tipps
Archiv Archiv
Wetten Sport allgemein
Wetten Statistiken
Wetten Bonus Angebote & Vergleich
Fussball Fussball aktuell
Tennis Tennis aktuell
Eishockey Eishockey aktuell
Basketball Basketball aktuell
CSS Forum   Valid HTML 4.01 Transitional   CSS ist valide!
Sportwetten Forum © 2011 Sportwetten Forum & Tipps Wettpoint.com