Steuerung per CSS

So nun geht es an die Feinarbeit - wir basteln eine Steuerung per CSS - dazu nehmen Sie als Zutaten (den nur mit hochwertigen Zutaten schmeckt das Gericht), ein Prise <ul>, eine Handvoll <li>, als Füllung wählen Sie Ihren gewünschten Inhalt wie Beispielsweise "Startseite", "Über mich", "Termine" etc.

Zum Abschmecken eine Handvoll CSS, wie "border", "background-color" und "padding" und "margin"

Steuerung vertikal

Unser Grundaufbau in HTML sieht wie folgt aus (das ganze Design kommt aus der CSS-Definition!)

<div id="navi">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-mich.htm">&Uuml;ber mich</a></li>
    <li><a href="termine.htm">Termine</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
  </ul>
</div>

Das sieht als reines HTML nicht wirklich spektakulär aus.

Da die Steuerung auf jeder unserer Seiten später auftaucht, binden wir die CSS-Definition über eine externe Datei ein. Dadurch können Änderungen (Relaunch einer Website) vereinfacht werden. Designumstellungen werden i.d.R. an einer einzigen Datei erledigt (egal wie viele html-Seiten Sie auch haben.) 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
 <link rel="stylesheet" type="text/css"
 media="screen" href="design.css" />
</head>

<body>
<div id="navi">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-mich.htm">Über mich</a></li>
    <li><a href="termine.htm">Termine</a></li>
    <li><a href="impressum.htm">Impressum</a></li>
  </ul>
</div>
</body>
</html>

Design über externe CSS-Datei

Diese Datei speichern wir mit dem Name "design.css" ab (der Namen, mit der die Datei über link rel="stylesheet" eingebunden wird).

Inhalt der Datei ist folgender:

#navi {
   width:200px;                   /* Breite des Bereichs */
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
 }
 
 #navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
 }
 
 #navi li {
   background-color:silver;       /* Hintergrundfarbe   */
   border-top:1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;   /* Rahmenfarbe unten  */
   border-right:2px blue solid;   /* Rahmenfarbe unten  */
   margin-top:10px;               /* Außenabstand oben  */
   padding-top:8px;               /* Innenabstand oben  */
   padding-bottom:8px;            /* Innenabstand unten */
   padding-left:8px;              /* Innenabstand unten */
   padding-right:8px;             /* Innenabstand unten */
 }

Das Ergebnis im Browser:

Steuerung horizontal

Aus der vertikalen Steuerung können wir schnell eine horizontale Steuerung, wenn nur wenige Menüpunkte vorhanden sind.

Nutzen Sie hier einfach float:left;

#navi {
   text-align:left;               /* Textausrichtung     */
   margin-top:10px;               /* Außenabstand oben   */
   margin-bottom:10px;            /* Außenabstand unten  */
   margin-left:20px;              /* Außenabstand links  */
   margin-right:15px;             /* Außenabstand rechts */
}
 
#navi ul {
   list-style:none;               /* keine Aufzählungspunkte */
}
 
#navi li { 
   float:left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand oben */
   width:90px;                     /* Breite des Links  */
 
   background-color:silver;        /* Hintergrundfarbe  */
   border-top:1px black solid;     /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid;  /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;    /* Rahmenfarbe unten  */
   border-right:2px blue solid;    /* Rahmenfarbe unten  */
   margin-top:10px;                /* Außenabstand oben  */
   padding-top:8px;                /* Innenabstand oben  */
   padding-bottom:8px;             /* Innenabstand unten */
   padding-left:8px;               /* Innenabstand unten */
   padding-right:8px;              /* Innenabstand unten */
}

Ergebnis im Browserfenster:

vorheriges Kapitel: dreispaltiges Layout
nächstes Kapitel: Steuerung mit Feedback
dreispaltiges LayoutSeitenanfangSteuerung mit Feedback
eBook HTML-Seminar.de
del.icio.usMister Wong         dreispaltiges LayoutSeitenanfangSteuerung mit Feedback
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de