E-Book Startseite Karteikarten-Programm
0

Steuerung per Liste

Eine Steuerung wird oft mit einer Liste gemacht, obwohl man nachher nicht mehr sieht, dass es eine Liste ist. In unserem Beispiel haben wir einen Bereich mit dem Namen "steuerung". Mit ul- und li-Formatierung speziell für diesen Bereich machen wir eine schöne Navigationsleiste. Eine neue Funktion die wir hier nutzen ist list-style: none; damit werden die Aufzählungspunkt abgeschaltet. Des Weiteren benutzen wir auch gleich noch die Pseudoklassen für die Links.

#steuerung {
    background-color: #F8F8F8;
    border: #F8F8F8 solid 4px;
    float: left;
    width: 250px;
    height: auto;
    margin: 10px;
}
 
#steuerung li {
    background-color: #7C7C7C;
    border-top: red solid 2px;
    border-left: #BABABA solid 15px;
    margin-top: 5px;
    margin-left: -35px;
    font-family: Times;
    font-size: 15px;
    padding: 4px;
}
 
#steuerung ul {
    list-style: none;
}
 
#steuerung a:link { color: #FFFFFF; text-decoration: none; }
#steuerung a:visited { color: #FFFFFF; text-decoration: none; }
#steuerung a:focus { color: #FFFFFF; text-decoration: none; }
#steuerung a:hover { color: #FFFF00; text-decoration: none; }
#steuerung a:active { color: #FFFFFF; text-decoration: none; }
<div id="steuerung">
  <ul>
    <li><a href="startseite.php">Startseite</a></li>
    <li><a href="ueber.html">Über uns</a></li>
    <li><a href="produkte.html">Produkte</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>
</div>
Anzeigebeispiel
Anzeigebeispiel



Steuerung per DIV

Manchmal werden statt Steuerungs-Listen auch Steuerungen mit einzeln zusammengesetzten DIV-Elementen gemacht. Dazu hier folgendes Beispiel mit vertikalen Steuerung:

#steuerung {
    background-color: #00FF00;
    width: 306px;
    height: auto;
    position: absolute;
    top: 10px;
    left: 10px;
}
 
.steuerungsbox {
    background-color: #FF00FF;
    width: 280px;
    height: auto;
    margin-top: 3px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 3px;
    border-left-width: 10px;
    border-left-style: solid;
    border-left-color: #0000FF;
}
 
#steuerung a:link { color: #FFFF00; text-decoration: none; font-size:18px; font-family: Times; }
#steuerung a:visited { color: #FFFF00; text-decoration: none; font-size:18px; font-family: Times; }
#steuerung a:focus { color: #FFFF00; text-decoration: none; font-size:18px; font-family: Times; }
#steuerung a:hover { color: #00FFFF; text-decoration: none; font-size:18px; font-family: Times; }
#steuerung a:active { color: #FFFF00; text-decoration: none; font-size:18px; font-family: Times; }
<div id="steuerung">
  <div class="steuerungsbox"><a href="startseite.php">Startseite</a></div>
  <div class="steuerungsbox"><a href="ueber.html">Über uns</a></div>
  <div class="steuerungsbox"><a href="produkte.html">Produkte</a></div>
  <div class="steuerungsbox"><a href="kontakt.html">Kontakt</a></div>
  <div class="steuerungsbox"><a href="impressum.html">Impressum</a></div>
</div>
Anzeigebeispiel
Anzeigebeispiel



Breadcrumbs

Die Breadcrumbs-Navigation ist die Leiste die bei vielen Webseiten sich unter der Kopfzeile befindet. In dieser Leiste wird angezeigt wo sie sich befinden. Die Startseite ist meistens auf der 1. Ebene. Die 2. Ebene ist für eine ganz normale Seite und die 3. Ebene wird verwendet, wenn die normale Seite (der Ebene 2) eine Unterseite hat. Von der Programmierung ist so eine Breadcrumb-Navigation nichts Besonderes. Das Zeichen » eignet sich gut als Trennzeichen für diese Leisten. In HTML muss es folgendermaßen geschrieben werden: &raquo; - Eine genau Auflistung der ganzen Sonderzeichen erfolgt im Kapitel "Weiterführendes".

#breadcrumb {
    background-color: #E1E1E1;
    float: left; 
    width: 500px;
    padding: 5px;
}
 
#breadcrumb a:link { color: #0000FF; text-decoration: none; font-size:14px; font-family: Arial; }
#breadcrumb a:visited { color: #0000FF; text-decoration: none; font-size:14px; font-family: Arial; }
#breadcrumb a:focus { color: #0000FF; text-decoration: none; font-size:14px; font-family: Arial; }
#breadcrumb a:hover { color: #0000FF; text-decoration: underline; font-size:14px; font-family: Arial; }
#breadcrumb a:active { color: #0000FF; text-decoration: none; font-size:14px; font-family: Arial; }
<div id="breadcrumb">
  <a href="/">Startseite</a>
  &raquo;
  <a href="/CSS/">CSS-Kurs</a>
  &raquo;
  <a href="/CSS/navisteuerung.php">Navigations- und Steuerungsleisten</a>
</div>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de