3.4.4.2) Listen und Aufzählungen

Auch die bereits bekannten Listen kann man mit CSS einfach formatieren, häufig werden auch Menüs von Webseiten mit Listen gestaltet.

Zur Wiederholung eine ungeordnete Liste in (X)HTML: 

<ul>
   <li>Ein Punkt</li>
   <li>Ein weiterer Punkt</li>
   <li>Ein weiterer Punkt</li>
</ul>

Listen werden in ul (ungeordnete Listen → Aufzählungszeichen) und ol (geordnete Listen → Zahlen oder Buchstaben zur Aufzählung) getrennt.

Wichtige CSS-Eigenschaften für Listen

Eigenschaft erlaubte Werte Erklärung Anwendung möglich auf
list-style-type none (ol+ul), disc, circle, square (bei ul), decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, decimal-leading-zero, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha (bei ol) Bestimmt das Aufzählungszeichen (Standardmäßig disc - gefüllter Kreis) ul, ol, li
list-style-image none, url(), Inherit (vererbt vom übergeordneten Element) Für die Verwendung einer Grafik anstatt eines Symbols von list-style-type ul, ol, li
list-style-position inside, outside Bestimmt, ob Aufzählungszeichen innerhalb oder außerhalb des Textblocks stehen sollen (Standard: outside) ul, ol, li

Weitere Informationen zu den einzelnen Eigenschaften gibt es unter http://www.css4you.de/listproperty.html.

Natürlichen können die „allgemeinen“ CSS-Eigenschaften für Text, Links, Bilder, Farben, etc. auch innerhalb von Listen angewendet werden.

Verschachtelung

Bekanntlicherweise können Listen verschachtelt werden. In X(HTML) sieht das folgendermaßen aus: 

<ul>
   <li>Ein Punkt</li>
   <li>Ein weiterer Punkt
      <ul>
         <li>Unterpunkt
            <ul>
               <li>Unter-Unterpunkt</li> 
            </ul> 
         </li> 
         <li>Unterpunkt</li> 
      </ul>  
   </li>
   <li>Ein weiterer Punkt</li>
</ul>

Zur Formatierung der Unterpunkte arbeitet man mit Nachfahrenselektoren, das sieht folgendermaßen aus (CSS-Code): 

ul {
  list-style-type: disc;
}
ul ul 
{
  list-style-type: circle;
}
ul ul ul
{
  list-style-type: square; 
}

Würde man keine Nachfahrenselektoren deklarieren, würde das übergeordnete ul-Element die Eigenschaft an die untergeordneten vererben.

BSP: Menü mit Listen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Listen inline</title>
<style type="text/css">
/* <![CDATA[ */
body {
   font-family: sans-serif;
   background-color: #FFF;
   color: #306;
}
ul {
   list-style-type: none;
   display: inline;
   padding-left: 0;
   margin-left: 0;
}
li {
   display: inline;
   padding: 3px 15px;
   border-left: 1px solid #000;
}
 
/* ]]> */
</style>
</head>
<body>
 
<ul>
  <li>Ein Punkt</li>
  <li>Ein Punkt</li>
  <li>Ein Punkt</li>
  <li>Ein Punkt</li>
</ul>
 
</body>
</html>

CSS4You: Eigenschaften für Listen