Listen mit CSS formatieren


(letzte Änderung an dieser Seite: 03.08.2010)

Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.

***** Übungen: CSS - Listen *****

CSS_7-1: Liste mit unterschiedlichen Aufzählungszeichen formatieren

Formatieren Sie die folgenden Listen wie angegeben (mit style="...") und überprüfen Sie, ob das Ergebnis Ihren Vorstellungen entspricht. Ergänzen Sie außerdem die umschließenden Tags für ungeordnete oder nummerierte Liste.

1. Kein Aufzählungszeichen

HTML-Code
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
 

2. a, b, c …

HTML-Code
<li>Der Präsident hat sämtliche Vollmachten.</li>
<li>Punkt a. gilt auch für den Sonderfall.</li>
<li>Der Vizepräsident hat sämtliche Sonderbefugnisse.</li>
 

3. gefüllte Quadrate

HTML-Code
<li>rot</li>
<li>grün</li>
<li>blau</li>
 




CSS_7-2: Listendefinition im Head


Sorgen Sie über Stildefinitionen im Head des Dokuments dafür, dass die Listen wie vorgegeben formatiert werden.

HTML-Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  	
	"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
  <title>Ich bin ein Dokument mit vielen Listen</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<h1>Liste mit Großbuchstaben: A, B, C ...</h1>
<p>Meine Lieblingsgötter der griechischen Mythologie sind:</p>
<ol>
  <li>Zeus</li>
  <li>Apollo</li>
  <li>Herakles</li>
</ol>
 
<h1>Liste mit leeren Kreisen</h1>
<ul>
   <li>Der Head-Bereich ist nicht unwichtig.</li>
   <li>Der Body-Bereich ist ebenfalls wichtig.</li>
   <li>Denken Sie an die Stildefinitionen!</li>
</ul>
 
</body>
</html>
 



CSS_7-3: Liste horizontal ausrichten

Wenn Sie dem li-Tag die Definition display : inline; zuweisen, wird die Liste horizontal ausgerichtet (s.a. listamatic). Das ist häufig nützlich, wenn man eine horizontale Navigation erstellen möchte.
Verändern Sie den folgenden Code so, dass die Liste horizontal ausgerichtet wird.

CSS-Code
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  	
	"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
  <title>Ich bin eine bald horizontale Liste</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <style = "text/css">
    ul {
        font-family : Arial, Helvetica, sans-serif;
        }
    li {
        margin : 5px;
        }
   </style>
</head>
 
<body>
 
<ul>
   <li>Der Head-Bereich ist nicht unwichtig.</li>
   <li>Der Body-Bereich ist ebenfalls wichtig.</li>
   <li>Denken Sie an die Stildefinitionen!</li>
</ul>
 
</body>
</html>
 



Nach oben