Lösung einfache vertikale Steuerung

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Lösung Aufgabe vertikale Steuerung mit CSS</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="steuerung">
<ul>
  <li><strong>Startseite</strong></li>
  <li><a href="hobby.htm">Hobby</a></li>
  <li><a href="kunst.htm">Kunst</a></li>
  <li><a title="Kultur in Tübingen" href="kultur.htm">Kultur</a></li>
</ul>
</div>
<p>Lösung Aufgabe vertikale Steuerung mit CSS</p>
</body>
</html>

Und das zugehörige CSS - in der Datei style.css gespeichert.

* {
    margin: 0;
    padding: 0;
}
#steuerung {
    background-color: #DBDBDB;
    width: 10em;
    float: left;
}
#steuerung strong, 
#steuerung a {
    display: block;
    text-decoration: none;
    padding: 0.3em 0.3em 0.3em 1.2em;
    border-right: solid 20px silver;    
}
#steuerung strong {
    border-right: solid 20px green;
}
#steuerung a:hover {
    border-right: solid 20px red;
}
#steuerung li {
    list-style-type: none;   
}
#steuerung ul li li {
    padding-left: 2em;
    font-size: .7em;
}
#steuerung ul li li li {
    font-size: 1em;
}

CSS lernen
- Einbinden von CSS
- Aufbau CSS-Anweisung
- CSS kontrollieren mit CSS-Validator
- CSS und Farbe
- Schriften mit CSS gestalten
- Rahmen in CSS
- CSS Box Modell Hierarchie
- Hintergrundbilder mit CSS
- CSS-Selektoren
- Layout über CSS
- horizontale Navigation
- einfache vertikale Steuerung
  - Lösung einfache vertikale Steuerung
- Tabellen mit CSS formatieren
- Formulare über CSS gestalten
- Erklärung zu display
- CSS Tipps und Tricks