User Tutorial zu CSS Styles & HTML im Forum
 

Kapitel 5a : Listen definieren mit Hilfe von CSS

Forum Listentypen definieren
Im ersten Teil zu den Listen haben wir die Grundlagen einer Liste vorgestellt,
im Kapitel 5a, dem 2. Teil der Listen geht es um das Einrücken einer Liste.
Mit dem Style-Wert "list-style-position" legt man die Listeneinrückung der Elemente in einer Liste fest.
Dieses Attribut kann sowohl für Aufzählungslisten "ul" als auch für nummerierte Listen "ol" verwendet werden.
Hier wieder verwendet die schon vorgestellen Varianten bzw. alternativen :
 
a) im HTML Quelltext ein Attribut style hinzufügen
b) im Header der Seite 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; list-style-postion:inside">
	<li>Das erste Listenelment<br />und das nach dem Zeilenumbruch im ersten Listenelement</li>
	<li>Das zweite Listenelement</li>
	<li>Das dritte Listenelement</li>
</ol>


CSS Liste Variante b)
Hier wird der Style der Liste ebenfalls wieder 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;
list-style-position : inside;
}
</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;
list-style-position : inside
}
</style>
Das dazugehörige "ol"-Element zu unserem Beispiel sieht dann so aus:
<ol class="test">
	<li>Das erste Listenelment<br />und das nach dem Zeilenumbruch im ersten Listenelement</li>
	<li>Das zweite Element der Liste</li>
	<li>Das dritte Element der Liste</li>
</ol>

Die Listen Varianten bewirken dann das folgende Ergebnis :

  1. Das erste Listenelment
    und das nach dem Zeilenumbruch im ersten Listenelement
  2. Das zweite Element unserer Liste
  3. Das dritte Element unserer Liste

Diese Listen, in welcher Form oder Ausrichtung sind sehr viel im Wettpoint Forum im Einsatz, so
beim Sitemap oder in Kategorie usw. wie beispielweise bei Bet365 oder Sportingbet.
Ein Praxis Beispiel aus dem Forum stellt aber auch der wettpoint Forum Index im unteren Bereich
dieser Seite dar, wo Listen mit dem Typ square verwendet sind, dabei mit verschiedenen
Style Definitionen beispielsweise mit aus dem Standard verändertem margin und padding.
 
 
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 und Live Ticker
Wetten Statistiken
Wetten Bonus Angebote & Buchmacher 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