Tutorial: Fixierte Leiste am unteren Seitenrand
In diesem Tutorial werde ich erklären, wie man eine simple Leiste macht,
die am unteren Broweserrand bleibt.
Die Verwendung
Die Leiste kann man für unterschiedlichste Zwecke verwenden. Man
kann z.B. eine Navigation mit dieser Technik positionieren oder man
kann Neuigkeiten in die Leiste schreiben. Da sie mitscrollt hat der
Benutzer die Leiste immer vor Augen.
Die Erstellung
Der erste Schritt der Erstellung ist ein <div> Container, diesen muss
man im CSS erstellen, das ganze sieht etwa so aus:
Grün: Der Name des neuen <div> Containers, das "#" zeigt, dass es sich um einen <div> Container handelt.
Rot: Hier kommen die weiteren CSS Angaben hin.
Nun folgt die Positionierung der Leiste, das wird mit drei einfachen
Angaben gemacht: left, bottom und position.
Zitat: #leiste
{
position: fixed;
left: 0px;
bottom: 0px;
}
Blau: Definiert das die Position bleibt auch wenn man scrollt.
Indigo: Bestimmt das der Abstand von links 0px sein muss(!).
Braun: Bestimmt das der Abstand von unten 0px sein muss(!).
Nun definieren wir die Größe der Leiste, ich will eine Leiste machen
die den gesamten unteren Rand füllt, dafür benutzen wir width und
height.
Zitat: #leiste
{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
}
Indigo: Bestimmt das die Leiste 100% des Randes einnimmt.
Braun: Bestimmt das die Leiste 50px hoch ist (Kann man gerne ändern).
Im letzten Schritt der eigentlichen Erstellung geben wir des Leiste ein
schönes Aussehen. Das macht man mit background und border.
Zitat: #leiste
{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
background: #FF0000;
border: 1px solid #000000;
}
Indigo: Bestimmt die Hintegrundfarbe der Leiste mit einem HEX-Code.
Braun: Bestimmt die Dicke, Art und Farbe des Randes.
Der CSS Code ist nun fertig.
In die Seite einbauen
Man muss den <div> Block nun in die Seite einbinden, da er nur mit
CSS nicht angezeigt wird. Das ist auch nicht so schwer:
Zitat: <div id="leiste">...</div>
Grün: Dort muss der Name des eben erstellten Leistenblocks hin. In unserem Fall ist dieser Leiste.
Rot: Bestimmt was in der Leiste ist, ich habe einfach mal ein wenig Text genommen.
Den Code muss man bei Text unter dem Design eintragen, und dort
an unterster Stelle.
Nun sind wir fertig die Leiste erscheint jetzt auf der Seite. In unserem
Fall sieht die Seite bis jetzt so aus:
=> http://img.webme.com/pic/w/websock/leiste.png
Das passt noch nicht so gut zur Seite, um es aber passend zu
machen gibt es auch noch:
Weitere Gestaltungsmöglichkeiten
Es gibt unendlich viele Wege seine Leiste zu gestalten, die drei
häufigsten beschreibe ich noch einmal.
Die erste Möglich keit ist es den Rand nur an den oberen Rand der
Leiste zu machen, das würde den Rand unten, links und rechts
entfernen. Das ganze ist auch nicht schwer:
Zitat: #leiste
{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
background: #FF0000;
border-top: 1px solid #000000;
}
Dunkelrot: Das "-top" hinter Rand sagt dem CSS, dass der border nur oben sein soll.
Die zweite Möglichkeit ist etwas für die Grafiker unter euch. Die
zweite Möglichkeit zeigt wie ihr ein Hintegrundbild für die Leiste
einstellen könnt.
Zitat: #leiste
{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 50px;
background: url(Adresse der Hintegrundgrafik);
background-repeat: repeat-x;
}
Braun: Hier kann man das Hintegrundbild einsetzen, zwischen dden Klammern muss die Grafikadresse stehen.
Dunkelblau: Bestimmt, dass der horizontal wiederholt wird, diese Option muss nicht sein ist aber von mir empfohlen.
Meine fertige Leiste könnt ihr euch auf websock.de.tl ansehen. Mit
ein wenig Kreativität sind euch bei der Gestaltung keine Grenzen
gesetzt. |
