An die Länge der Überschriften angepasste Unterstriche?

Jerome

Guten Abend!

Ist es möglich den Überschriften eines Beitrages einen Unterstrich (border-bottom) zu geben der egal wie lange die Überschrift ist immer einen bestimmten Wert länger als der Text ist?

Also z.B. soll der Unterstrich immer 20px länger als der Text sein, oder 20%, ein fixer Wert eben.

Derzeit habe ich das im Stylesheet so geregelt, gefällt mir aber nicht weil die Linie halt entweder viel zu lange oder zu kurz ist.

Code

h3 {
font-size: 1.3em;
border-bottom:1px solid #c9c9c9;
width: 350px;
}

Besten Dank!

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

Jeriko

Code

h3 {
font-size: 1.3em;
display: inline;
border-bottom:1px solid #c9c9c9;
padding-right: 20px;
}

Damit kriegst du deine gewünschte Linie. Allerdings musst du danach dafür sorgen, dass die nächsten Elemente zuerst einen Zeilenumbruch kriegen. display:inline sorgt dafür, dass das Element eben inline, also im Textfluss angezeigt wird (Überschriften beanspruchen normalerweise die ganze Zeile für sich).

Gruß Jeriko

Jerome

Danke für deine Antwort, ich habe deinen Vorschlag nun im Stylesheet umgesetzt, allerdings ist die Linie nun genau so lange wie der Text.

Eine Änderung der padding Angabe zeigt keine Wirkung. Gibt es im Standard Kubrick Theme unter WordPress 2.0.2 vielleicht eine Einstellungen die dies verhindert?

Was genau meinst du damit das die nächsten Elemente zuerst einen Zeilenumbruch bekommen? Da ich noch Anfänger auf dem Gebiet bin, kenne ich mich noch nicht so aus.

Meinst du vielleicht in den Templates ein <br /> hinzufügen?

Danke.

Jeriko

Hm komisch, ich habs ja selber hier ausprobiert (Firefox 1.5.0.2), und ich habe keine Probleme mit der exakt 20 Pixel längeren Linie, egal was ich als Überschrift eingebe.

Zum dem anderen Problem, gib einfach mal

Code

<h3>Testüberschrift</h3> und noch etwas Text

ein. Normalerweise müsste "und noch etwas Text" unterhalb der Überschrift erscheinen, aber wegen dem display:inline; erscheint es daneben, eben im Textfluss. Wenn man nun aber "und noch etwas Text" in <p>-Tags packt, ist alles wieder normal.

Gruß Jeriko

Jerome

Habe das Problem schon gelöst, weiter unten im Stylesheet war nochmal padding: 0; für h3 definiert, habe dies nun auskommentiert und nun funktioniert es. Danke!

Monika

Zitat von Jerome

Habe das Problem schon gelöst, weiter unten im Stylesheet war nochmal padding: 0; für h3 definiert, habe dies nun auskommentiert und nun funktioniert es. Danke!

ich freue mich für Dich:)
außerdem hast du jetzt gleich gelernt, dass es in einer CSS Datei nicht egal ist wo was steht,
das was weiter unten steht hat eindeutig mehr >Macht ;)

lg

Jerome

Ja das macht Sinn, wenn ich also z.B. am Anfang bei einem Element padding:0; mache und am Ende diesem Element in der Sidebar padding:10px; zuweise gibt es überall außer in der Sidebar kein Padding?

Sehr interessant, danke für diese Information!

Monika

Zitat von Jerome

Ja das macht Sinn, wenn ich also z.B. am Anfang bei einem Element padding:0; mache und am Ende diesem Element in der Sidebar padding:10px; zuweise gibt es überall außer in der Sidebar kein Padding?

Sehr interessant, danke für diese Information!

ja
aber das ist wiederum eine andere Regel

#sidebar p{padding:10;}

gibt nur dem p Element unter der id sidebar ein padding von 10.
jedes andere p hat kein padding,

das ist aber die Regel der Hierarchie:
wer dient unter wem ;);)

lg

Willkommen! Melden Sie sich an oder registrieren Sie sich.

An die Länge der Überschriften angepasste Unterstriche?

Jetzt mitmachen!