Höhe für Border definieren

OXO

Hallo,

ich möchte gerne folgendes Layout gestalten:

Code

|------------------------------
| Überschrift
|
  das ist der Text
  das ist der Text
  das ist der Text

Der Text ist in einem div enthalten. Der div-Container hat dadurch eine bestimmte Höhe, sagen wir mal 200px.

Oben einen Rand zu bekommen ist logischerweise kein Problem. Wenn ich als Style einen "border-left: 2px solid" definiere, bekomme ich den linken Rand in voller Höhe angezeigt (logisch). Ich möchte die Linie links aber gerne etwa bei 5px - 10px aufhören lassen, so dass die Linie wie oben in etwa aussieht.

Wie kann ich das denn erreichen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

alchymyth

wahrscheinlich am einfachsten mit einem hintergrundbild in der css.

JakoThAn

Würde es auch mit einer Graik lösen, oder du definierst für die Überschrift einen Absatz <p> oder <span> mit 5px Außenabstand oben und einer Linie....

Oh. Hab es eben noch mal gelesen... Du willst ja die linke Linie auch aufhören lassen... Dann die Grafik. :)

cester

Pack doch einfach die Überschrift in eine Div-Class!!!

Das Ganze würde dann so aussehen:

Code

<div class="content">
<div class="content-title">Hier deine Überschrift</div>


<p>Hier kommt dann dein Text rein....</p>
</div>

Die CSS würde dann so aussehen:

Code

.content {
border-top: 1px solid #000;
}
.content-title {
border-left: 1px solid #000;
padding: 10px;
font-weight: bold;
margin-bottom: 20px;
}
.content p {
padding: 10px;
}

Alles anzeigen

So könnte eine Lösung aussehen!

OXO

Das gefällt mir eigentlich ganz gut! Ist zwar lustig verschachtelt, aber so komm ich zu meinem Ziel !

Danke für Eure Hilfe!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Höhe für Border definieren

Jetzt mitmachen!