Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 35): Listen und Counter

HTML & CSS für Einsteiger (Teil 35): Listen und Counter

Wie sich Listen definieren lassen, wisst ihr wahrscheinlich längst. Das wurde schließlich im Rahmen dieser Reihe ausführlich gezeigt. Chic sind Listen von Hause aus allerdings nicht unbedingt. Damit sie auch optisch ansprechend daherkommen, gibt es entsprechende CSS-Eigenschaften. Welche das sind und wie man diese einsetzt, erfahrt ihr in diesem Video-Training. Im zweiten Teil geht es dann um die sogenannten Counter, mit denen sich auch komplexere Nummerierungen umsetzen lassen.


Über die in diesem Tutorial gezeigten CSS-Eigenschaften lassen sich Listen gestalten. Die Angaben beziehen sich dabei auf die HTML-Elemente ul und ol. Ihr könnt also geordnete und ungeordnete Listen euren Wünschen entsprechend anpassen.


Allgemeine Angaben zur Liste

Bei list-style handelt es sich um eine Zusammenfassung der drei folgenden Eigenschaften:

list-style-type
list-style-position
list-style-image

Über list-style lässt sich die Art der grafischen Darstellung der Bullets vor Aufzählungen und deren Einrückung beeinflussen. Die genannten Angaben werden jeweils durch ein Komma voneinander getrennt notiert. Die Reihenfolge ist dabei egal. Außerdem muss nicht zu jeder Eigenschaft ein Wert angegeben werden.

Ein Beispiel Beispiel:
<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul {
    list-style:square;
 }
 </style>
 </head>
 <body>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>

 
Im Browser sieht das folgendermaßen aus:

Bilder



 

Grafische Aufzählungszeichen

Ihr könnt eine eigene Grafik als Aufzählungszeichen angeben. Verwendet wird dafür die Eigenschaft list-style-image. Die folgenden Werte sind möglich:

url – der Dateiname und eventuell Pfad der Grafik
none – es wird keine Grafik angezeigt.

Ein Beispiel:
ul { 
    list-style-image: url(bullet.gif); 
 }

Achtet darauf, dass der Pfad zu der bei URL angegebenen Grafik stimmt.

Bilder



Wurde ein falscher Pfad angegeben, sollten die Browser auf ein Standardaufzählungszeichen zurückgreifen.


Die Position der Aufzählungszeichen

Über list-style-position wird festgelegt, wie sich Nummerierungen oder Aufzählungszeichen hinsichtlich der Einrückung verhalten sollen.

inside – die erste Zeile wird so weit eingerückt, dass Aufzählungszeichen und Listeneintrag linksbündig abschließen.
outside – das Aufzählungszeichen steht links vom Listeneintrag.

Im folgenden Beispiel werden die beiden Werte inside und outside verwendet.
<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-position:inside;
 }
 ul.b {
    list-style-position:outside;
 }
 </style>
 </head>
 <body>
 <p>Eine inside-Liste:</p>
 <ul class="a">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 <p>Eine outside-Liste:</p>
 <ul class="b">
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
 </body>
 </html>

 
So sieht man direkt, welche unterschiedlichen Auswirkungen diese beiden Werte tatsächlich haben.

Bilder



 

Das Aussehen der Aufzählungszeichen festlegen

Für die Bullet- beziehungsweise Aufzählungszeichen können Sie das Aussehen explizit bestimmen. Ebenso lässt sich die Darstellung nummerierter Listen beeinflussen. Verwendet wird dafür die Eigenschaft list-style-type. Erlaubt sind bei dieser Eigenschaft die folgenden Werte:

decimal – für ol-Listen: Nummerierung 1, 2, 3 usw.
lower-roman – für ol-Listen: Nummerierung i., ii., iii. usw.
upper-roman – für ol-Listen: Nummerierung I., II., III., IV. usw.
lower-alpha oder lower-latin – für ol-Listen: Nummerierung I., II., III., IV. usw.
upper-alpha oder upper-latin – für ol-Listen: Nummerierung A., B., C., D. usw.
disc – für ul-Listen: gefüllter Kreis als Bullet-Zeichen
circle – für ul-Listen: leerer Kreis als Bullet-Zeichen
square – für ul-Listen: Rechteck als Bullet-Zeichen
none – weder Bullet-Zeichen noch Nummerierung
lower-greek – für ol-Listen: Nummerierung mit griechischen Buchstaben
hebrew – für ol-Listen: Nummerierung mit hebräischen Buchstaben
decimal-leading-zero – für ol-Listen: Nummerierung mit führender Null 0: 01., 02., 03., 04. usw.
cjk-ideographic – für ol-Listen: Nummerierung mit ideografischen Zeichen
hiragana – für ol-Listen: japanische Nummerierung (mit Kleinbuchstaben)
katakana – für ol-Listen: japanische Nummerierung (mit Großbuchstaben)
hiragana-iroha – für ol-Listen: japanische Nummerierung (mit Kleinbuchstaben)
katakana-iroha – für ol-Listen: japanische Nummerierung (mit Großbuchstaben)

 
Im folgenden Beispiel werden einige der aufgeführten Varianten verwendet.
<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
 <style>
 ul.a {
    list-style-type:circle;
 }
 ul.b {
    list-style-type:square;
 }
 ol.c {
    list-style-type:upper-roman;
 }
 ol.d {
    list-style-type:lower-alpha;
 }
 </style>
 </head>
<body> 
   <ul class="a">   
      <li>HTML</li>   
      <li>CSS</li>
      <li>JavaScript</li>
   </ul> 
   <ul class="b">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ul> 
   <ol class="c"> 
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
   <ol class="d">   
      <li>HTML</li>   
      <li>CSS</li>   
      <li>JavaScript</li> 
   </ol> 
</body> 
</html>

 
Im Browser ergibt sich folgendes Bild:

Bilder



Zähler

Über ol-Listen lassen sich Inhalte nummerieren. Bei komplexeren Anwendungen ist diese Form der Nummerierung allerdings nicht wirklich praktikabel. CSS bietet hierfür mit den Countern eine Alternative.

Nachfolgend zeige ich euch, wie sich Counter nutzen lassen.

Zunächst einmal lege ich für das body-Element einen neuen Counter an.
body { 
    counter-reset: kapitel; 
 }

 
Dank dieser Definition existiert der Counter kapitel im Dokument. Diesen Counter kann man nun verwenden.
h1 { 
    counter-increment: kapitel; 
 }

Durch die gezeigte Syntax wird der Zähler jeweils automatisch um den Wert 1 erhöht, wenn ein neues h1-Element auftaucht. Das Problem dabei: Von der Zählung ist momentan noch nichts zu sehen. Das lässt sich ganz einfach durch den Einsatz von Pseudoelementen ändern.
h1::before {
   content: counter(kapitel) ". ";
 }

Eine vollständige Anwendung könnte folgendermaßen aussehen:
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset: kapitel;
 }
 h1 {
    counter-increment: kapitel;
 }
 h1::before {
    content: counter(kapitel) ". ";
 }
 </style>
 </head>
 <body>
 <h1>Kapitel</h1>
 <h1>Kapitel</h1>
 </body>
 </html>

 
Und hier das Ergebnis im Browser:

Bilder



Im gezeigten Beispiel wird durch ::before die jeweilige Nummer am Anfang des h1-Elements ausgegeben. Damit die Ziffer nicht direkt am Text der Überschrift hängt, werden nach der Ziffer ein Punkt und ein Leerzeichen eingefügt.
content: counter(kapitel) ". "

Verschachtelte Zählungen sind ebenfalls möglich. Dazu definiert man den Counter an der Stelle, an der er letztendlich wieder von vorne beginnen soll.
h1 {
   counter-increment: kapitel;
   counter-reset: unterkapitel;
 }

 
So wird in diesem Beispiel der Zähler immer dann zurückgesetzt, wenn ein neues h1-Element auftaucht. Das folgende Beispiel zeigt eine typische Anwendung für verschachtelte Counter.
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 body {
    counter-reset:kapitel;
 }
 h1 {
    counter-reset:unterkapitel;
 }
 h1:before {
    counter-increment:kapitel;
    content: counter(kapitel) ". ";
 }
 h2:before {
    counter-increment:unterkapitel;
    content:counter(kapitel) "." counter(unterkapitel) " ";
 }
 </style>
 </head>
 <body>
 <h1>Kapitel</h1>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h1>Kapitel</h1>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 <h2>Unterkapitel</h2>
 </body>
 </html>

 
Im Browser sieht das Ganze folgendermaßen aus:

Bilder



Die Beispiele haben gezeigt, wie leistungsfähig Counter sind.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kiasa
  • 14.07.2015 - 09:25

Vielen herzlichen Dank für das gelungene Tutorial! :)

Portrait von ZainaPhoto
  • 28.03.2015 - 20:37

Großen Dank für das Video.

LG Zaina

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.03.2015 - 16:10

Danke für sie gute Erklärung ;-)

Es würde mich interessieren, ob man an ein <li> Element eine <div> Box anhängen kann, welche sich durch ein Klick auf das <li> Element auf und zuklappt. Geht das ??

Portrait von fe_web
  • 22.03.2015 - 22:50

Super - Vielen Dank für diesen weiteren Teil der Tutorialreihe.Klasse.

Portrait von Caesarion2004
  • 22.03.2015 - 19:59

Vielen Dank für das informative und interessante Tutorial.

Portrait von dlieb
  • 22.03.2015 - 18:41

Vielen Dank für den Teil 35.

Portrait von MARIA52
  • 22.03.2015 - 16:54

Vielen Dank für den weiteren Teil.

Portrait von rocking_sid
  • 22.03.2015 - 16:42

Vielen Dank für das Tutorial!

Portrait von suzana
  • 22.03.2015 - 14:47

Danke für das Tutorial.

Portrait von Domingo
  • 22.03.2015 - 14:37

Danke für die ausführliche Info.

Portrait von BOPsWelt
  • 22.03.2015 - 13:50

Vielen Dank für das Tutorial. :)

Portrait von wehkom
  • 22.03.2015 - 13:34

Vielen Dank! Es gibt immer wieder etwas Neues.

Portrait von Kundentest
  • 22.03.2015 - 13:24

Herzlichen Dank für das Tutorial.

Portrait von Enigmon
  • 01.02.2015 - 12:18

Schön einfach erklärt.. Vielen Dank!!
Ich sammle diese Video-Reihe und finde sie echt gelungen.

Portrait von Dagmar_Hannig
  • 28.01.2015 - 21:50

Ich bin begeistert von dieser Reihe. Vielen Dank für die informativen Videos.

Portrait von pemis
  • 28.01.2015 - 13:33

Mit jeder Folge wird meine begonnen Internetseite kompletter.

Portrait von fe_web
  • 26.01.2015 - 19:19

Super- toll zum dazu lernen

Portrait von fe_web
  • 26.01.2015 - 05:54

Danke - warte gespannt auf den nächsten Teil

Portrait von Caesarion2004
  • 25.01.2015 - 22:42

Vielen Dank für das informative Videotutorial.

Portrait von Zicke
  • 25.01.2015 - 20:39

Vielen Dank. Ich folge Deiner Reihe mit großem Interesse.

x
×
×