H2 Background -> padding

[Hannes Weninger]

Hallo,

ich hab ein kleines Problem mit einem h2 Header. Der h2 Header geht über 2 Zeilen (oder mehrere - je nach breite des Browsers), ich hab ein Padding eingestellt -> das padding gilt aber nur für die erste Zeile.
Ich hab den Header "display: inline" gemacht, da ich nur einen Hintergrund beim Text möchte und nicht den ganzen Block.

Hier ist ein Beipiel:

H2 Beispiel

Hat jemand einen Tip, wie ich das padding-left auch für die zweite Zeile machen kann?

vielen Dank,

lg
Hannes

[qx]

Hallo Hannes,

könnte das display: inline-block; sein.

lg qx

[Hannes Weninger]

Hallo Hannes,

könnte das display: inline-block; sein.

lg qx

Hallo,

danke für die Antwort,
Ich habs jetzt ausprobiert. Da ist leider der ganze Block dann mit der Hintergrundfarbe belegt.

h2 padding example

gibts da noch was anderes?

lg
Hannes

[qx]

Hallo Hannes,

schau hier an.
Evt. noch die line-heigth anpassen.

[Hannes Weninger]

Hallo Hannes,

schau hier an.
Evt. noch die line-heigth anpassen.

Aber padding-left geht nicht, oder?

Test Example

[Gunther]

Hallo,

ich hab ein kleines Problem mit einem h2 Header. Der h2 Header geht über 2 Zeilen (oder mehrere - je nach breite des Browsers), ich hab ein Padding eingestellt -> das padding gilt aber nur für die erste Zeile.
Ich hab den Header "display: inline" gemacht, da ich nur einen Hintergrund beim Text möchte und nicht den ganzen Block.

Hier ist ein Beipiel:

http://jsfiddle.net/3A73S/4/

HTML:~~~html <h2><span>Das ist eine h2 Überschrift</span><span>über 2 Zeilen</span></h2>

CSS:~~~css
h2 {  
    border-radius: 10px 0 10px 0;  
    background-color: #f00;  
    display: inline;  
}  
  
h2 span {  
    white-space: pre;  
}  
  
h2 span:first-child:before {  
    content:"";  
    padding-left: 10px;  
}  
  
h2 span:first-child:after {  
    content:"\A";  
    padding-right: 10px;  
}  
  
h2 span:last-child:before {  
    content:"";  
    padding-left: 10px;  
}  
  
h2 span:last-child:after {  
    content:"";  
    padding-right: 10px;  
}  

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

HTML:<h2><span>Das ist eine h2 Überschrift</span><span>über 2 Zeilen</span></h2>

Du hast ebenso wie qx die Aufgabe nicht verstanden:

Der h2 Header geht über 2 Zeilen (oder mehrere - je nach breite des Browsers)

Die Zeilenumbrüche sollen sich nach der Veiwportbreite richten, nicht hart codiert werden.

@Hannes: überschrift heißt auf englisch „head_ing_“. Head_er_ ist was anderes: der (Seiten-)Kopf.

Und nein, eine Lösung hab ich auch nicht.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Du hast ebenso wie qx die Aufgabe nicht verstanden:

Der h2 Header geht über 2 Zeilen (oder mehrere - je nach breite des Browsers)

Die Zeilenumbrüche sollen sich nach der Veiwportbreite richten, nicht hart codiert werden.

Wenn sie sich nach der Viewportbreite richten sollen, ist der ganze Zubel doch eh überflüssig!
Denn dann kann man die <h2> auch "ganz normal" als Blocklevel-Element verwenden (inklusive margin und padding).

Mein Vorschlag bietet die Möglichkeit in Kombination mit Media Queries und font-size die Umbrüche "flexibel" selber zu gestalten, inklusive einem "durchgehenden" Padding.

Mehr kann man imho nicht erwarten ...!

Gruß Gunther

[Der Martin]

Hallo,

Die Zeilenumbrüche sollen sich nach der Veiwportbreite richten, nicht hart codiert werden.
Wenn sie sich nach der Viewportbreite richten sollen, ist der ganze Zubel doch eh überflüssig!

nein, lies nochmal nach, was Hannes haben möchte.

Denn dann kann man die <h2> auch "ganz normal" als Blocklevel-Element verwenden (inklusive margin und padding).

Dann erstreckt sich eine Hintergrundfarbe für das h2-Element aber über die ganze Breite (display:block, default) oder paddings wirken nur am Anfang der ersten bzw. am Ende der letzten Zeile, falls die Überschrift mehrzeilig wird (display:inline oder display:inline-block).

Hannes möchte jedoch den rechten und linken Rand sauber ausgerichtet haben, auch wenn's mehrzeilig wird, die Hintergrundfarbe aber nur dort, wo auch Schrift ist.

Also einfach ein h2-Element mit display:block (Defaultwert), dem das passende padding geben, und darin ein span-Element, das die Hintergrundfarbe bekommt. Fertig.

Wobei mir das zusätzlich nötige Element nicht gefällt, aber ich komme auf keine elegantere Lösung.

Ciao,
 Martin

[Gunther]

Hallo,

Die Zeilenumbrüche sollen sich nach der Veiwportbreite richten, nicht hart codiert werden.
Wenn sie sich nach der Viewportbreite richten sollen, ist der ganze Zubel doch eh überflüssig!

nein, lies nochmal nach, was Hannes haben möchte.

Brauch' ich nicht ...! ;-)
Das, was er haben möchte, und das, was er an Beispielcode gepostet hat, widerspricht sich ja schon mal, oder wozu das <br> Element!?

Denn dann kann man die <h2> auch "ganz normal" als Blocklevel-Element verwenden (inklusive margin und padding).

Dann erstreckt sich eine Hintergrundfarbe für das h2-Element aber über die ganze Breite (display:block, default) oder paddings wirken nur am Anfang der ersten bzw. am Ende der letzten Zeile, falls die Überschrift mehrzeilig wird (display:inline oder display:inline-block).

Hannes möchte jedoch den rechten und linken Rand sauber ausgerichtet haben, auch wenn's mehrzeilig wird, die Hintergrundfarbe aber nur dort, wo auch Schrift ist.

Also einfach ein h2-Element mit display:block (Defaultwert), dem das passende padding geben, und darin ein span-Element, das die Hintergrundfarbe bekommt. Fertig.

Das ist aber auch nicht das Gewünschte! :-P
Denn dann hast du die Hintergrundfarbe auch nicht mit Paddings versehen.

Wobei mir das zusätzlich nötige Element nicht gefällt, aber ich komme auf keine elegantere Lösung.

Ohne geht es gar nicht, und mit nur "annähernd".
Das eigentlich Gewünschte ist aber in der Form nicht machbar (siehste ja schon alleine daran, dass Gunnar auch keine "Lösung" eingefallen ist).

Ehrlich gesagt finde ich solche "Probleme" auch dermaßen nachrangig, dass ich darauf nicht all zu viel Zeit & Energie verwenden würde. Zumal er jetzt in diesem Thread ja quasi schon alle "machbaren" (und noch halbwegs "ordentlichen") Varianten aufgezeigt bekommen hat.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Das eigentlich Gewünschte ist aber in der Form nicht machbar (siehste ja schon alleine daran, dass Gunnar auch keine "Lösung" eingefallen ist).

:-D

Ja, hier bräuchte man wohl zusätzlich zu ::first-line noch Pseudoelemente ::any-line und ::last-line.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Ja, hier bräuchte man wohl zusätzlich zu ::first-line noch Pseudoelemente ::any-line und ::last-line.

Das ist keine schlechte Idee! ;-)
Wobei hier ja schon ::last-line reichen würde.

Reich' das doch mal als Vorschlag bei der WG ein, falls noch nicht geschehen.

Gruß Gunther

[Hannes Weninger]

@@Gunnar:

nuqneH

Ja, hier bräuchte man wohl zusätzlich zu ::first-line noch Pseudoelemente ::any-line und ::last-line.

Das ist keine schlechte Idee! ;-)
Wobei hier ja schon ::last-line reichen würde.

Reich' das doch mal als Vorschlag bei der WG ein, falls noch nicht geschehen.

Gruß Gunther

danke für die Antworten!!
lg
Hannes

[ChrisB]

Hi,

ich hab ein kleines Problem mit einem h2 Header. Der h2 Header geht über 2 Zeilen (oder mehrere - je nach breite des Browsers), ich hab ein Padding eingestellt -> das padding gilt aber nur für die erste Zeile.
Ich hab den Header "display: inline" gemacht, da ich nur einen Hintergrund beim Text möchte und nicht den ganzen Block.

Wenn es dir nur um eine Hintergrund*farbe* geht – dann lass’ das padding weg, und nutze einen beidseitigen box-shadow: http://jsfiddle.net/3A73S/11/

(Wenn du dann noch einen seitlichen Abstand haben willst, musst du den allerdings über das umgebende Element realisieren.)

MfG ChrisB

[Gunnar Bittersmann]

@@Hannes Weninger:

nuqneH

Hat jemand einen Tip, wie ich das padding-left auch für die zweite Zeile machen kann?

Ich glaube, dir schwebt sowas vor.

Ohne das zusätzliche span-Element sehe ich auch keine Möglichkeit, da man in ein Pseudoelement kein weiteres Pseudoelement schachteln kann.

Es sei denn, Lea Verous Idee mit border-corner-shape würde implementiert werden. Dann könnte man anstelle des span ein Pseudoelement verwenden und dessen runde Ecke nach innen laufen lassen.

Qapla'