Mit CSS vertikale Linien erzeugen

Beiträge mit Randmarkierung versehen. 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.

Beiträge mit Randmarkierung 

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>

Das Ergebnis sieht dann so aus:

wichtiger Text-Absatz erstellt am 14.6.2016

Mit padding verändere ich den Abstand ich den Abstand vom Balken auf 16.
Der Rand soll auf 6px erhöht werden. Die Farbe ist dunkelgrün = 1d4209
in der style definieren wir als .bl1
{
padding: 16px;
border-left: 6px solid #1d4209;
}

Dies ist mit padding 16, border 6px und dunkelgrün:

Hier gibts weitere Informationen

 

Beiträge mit Randmarkierung

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Zum Newsletter anmelden

Zum Newsletter anmelden

Melden sie sich zum meinem Newsletter an und Sie erhalten ein Geschenk

Sie haben sich erfolgreich angemeldet