Webmaster-Crashkurs

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;
}
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: