Listen mit CSS formatieren
Folien
Falls keine PDF-Präsentation zu sehen ist: Direktdownload der PDF-Präsentation
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei 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
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>2. a, b, c …
<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
<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.
<!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.
<!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>