11.01.2008
Mit CSS vertikale Linien erzeugen
Im Gegensatz zur horizontalen Linie <hr> gibt es bisher kein Element für eine vertikale Linie. Dennoch müssen wir auf Vertikallinien nicht verzichten. Mit ein paar kleinen Kniffen können sie mit CSS erzeugt werden.
1. Vertikal-Linien per Rahmeneigenschaft
Die Eigenschaft "border" wird in der Regel für einen allumfassenden Gesamtrahmen genutzt. Man kann damit aber auch gezielt einen einzelnen oberen, rechten, unteren und linken Rahmen oder eine Kombination davon definieren.
Nehmen wir an, es soll ein Absatz mit einer linken, roten Vertikallinie markiert werden, um auf die Wichtigkeit seines Inhalts hinzuweisen. Dazu brauchen wir lediglich eine CSS-Klasse zu bilden. Wir bezeichnen sie mit .bl als Abkürzung für "border-left" (selbstverständlich könnt ihr auch andere Bezeichnungen wählen):
.bl
{
padding: 8px;
border-left: 2px solid #f00;
}
HTML-Aufruf mit
<p class="bl">
wichtiger Text-Absatz
<p>
Für einen beidseitigen Rahmen links und rechts, der zudem noch etwas breiter ist, verwenden wir
.brl
{
padding: 8px;
border-right: 5px solid #f00;
border-left: 5px solid #f00;
}
Beispiel 1 ansehen
2. Vertikal-Linien als Layout-Gestaltungselement
Bei einem mehrspaltigen Layout kann ein einseitiger Rahmen auch sehr gut als Gestaltungs- oder Trennelement eingesetzt werden.
Hierzu bei gleicher Höhe der benachbarten Divs einfach einen linken oder rechten Rahmen definieren.
Sind die Divs unterschiedlich lang und ist der längere Div bekannt, dann bei diesem den Rahmen hinterlegen. Ansonsten mit "Faux Columns" arbeiten.
Beispiel 2 ansehen
3. Vertikal-Linien als kachelnde Hintergrundgrafik
Etwas anspruchsvoller als ein schnurgerader Rahmen sieht je nach Geschmack eine Vertikallinie in Form einer sich kachelnden Hintergrundgrafik aus.
Somit definieren wir anstatt eines seitlichen Rahmens einen entsprechenden Hintergrund.
Dem folgenden Beispiel liegt diese kleine Hintergrundgrafik mit 21px auf 21px zugrunde: 
Ihre Position ist abhängig von der Breite des Divs in dem sie sich befindet, hier mit
background-position: 200px;
festgelegt. Das entspricht einem linken Abstand von 200px. Mit einem zusätzlichen zweiten Wert könnte zudem ein oberer Abstand angegeben werden.
Durch
background-repeat: repeat-y;
wird sichergestellt, dass sich die Grafik nur vertikal wiederholt. Schließlich sorgen wir durch
<p style="padding-right: 20px;">
für einen rechten Abstand des Textes zur trennenden Hintergrundgrafik. Stattdessen könnten wir auch noch einmal einen Div in box1 setzen, der den Abstand generell festlegt.
Beispiel 3 ansehen