nicht angemeldet
Hintergrundfarbe von Textzeilen. Aber nur da wo auch Text steht
0 
Matthias Apsel
0 0 0
Hintergrundfarbe von Textzeilen. Aber nur da wo auch Text steht
Gunnar BittersmannHallo,
ich versuche gerade ein HTML mittels CSS so zu formatieren, dass die Textzeilen eine Hintergrundfarbe erhalten, aber nur so weit in jeder Zeile bis wohin der Text in dieser steht.
Problem ist, dass wenn ich das <p> Element mittels "background-color" formatiere, das dann eine umschließende Fläche farbig wird. Wenn ich es zusätzlich mittels "display:inline" formatiere, dann sieht es schon fast so aus wie ich es brauche. Problem ist nur das es dann nicht in einer neuen Zeile anfängt, sondern direkt hinter dem vorherigen <h1>. Und ich kann die Höhe der Textzeile mittels "height" oder auch "line-heigt" nicht steuern, was die Hintergrundfarbe etwas zu gequetscht aussehen lässt.
Das Ergebnis sollte so aussheen wie in der angehängten Grafik.
Sehr dankbar wäre ich über eine Hilfe.
-
Om nah hoo pez nyeetz, Jens777!
ungetestet:
display inline für p und display block für p::before mit einem Leerzeichen als Inhalt.
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Integral und Integralhelm.
-
Hallo,
ich versuche gerade ein HTML mittels CSS so zu formatieren, dass die Textzeilen eine Hintergrundfarbe erhalten, aber nur so weit in jeder Zeile bis wohin der Text in dieser steht.
Vielleicht so: http://jsfiddle.net/FE9BN/ ?
Gruß H.
-
ich versuche gerade ein HTML mittels CSS so zu formatieren, dass die Textzeilen eine Hintergrundfarbe erhalten, aber nur so weit in jeder Zeile bis wohin der Text in dieser steht.
Oder noch besser so: jsFiddle .
Gruß H.
-
-
Hallo,
Problem ist nur das es dann nicht in einer neuen Zeile anfängt, sondern direkt hinter dem vorherigen <h1>.
Dann hast dem h1 aber auch ein display:inline gegeben. Lass das weg.
gruß
Kalk -
Danke für eurer Tipps.
p::before
Da ist die Unterstützung durch die Browser etwas mager. Besonders die des IE.Dem h1 muss ich ja ein inline geben, sonst beschränkt sich der Hintergrund nicht auf den Inhalt, sondern ist so breit wie das Element welches das h1 beinhaltet.
Herrmann, deine Variante kommt den ganzen schon sehr gut nahe. Ich habe es etwas modifiziert.
Hier erhalte ich ein etwas anderes Bild, habe aber bei der Codeerstellung nicht so viele verschachtelte Elemente.
http://jsfiddle.net/8vuaG/6/Und hier habe ich es fast so wie du gemacht, nur habe ich mit display:inline-block die Möglichkeit geschaffen mittels padding die Hintergrundfarbe nicht so an den Buchstabenkanten kleben zu lassen. Unschön ist jedoch das bei Zeilenumbruch das padding-left flöten geht, da da ja gar keins existiert. Schau in die erste und zweite Zeile jeweils die Anfangsbuchstaben an. Der Abstand nach links ist nicht identisch. Das ist sehr unschön.
http://jsfiddle.net/8vuaG/5/Wahrscheinlich ist dann die Variante 1 hier besser. Da ist ein Abstaz zusammen betrachtet farbig hinterlegt. Leider ist die Hintergrundfarbe bei Umbruch aber auch bis an die rechte Grenze des Umgebenden Elementes.
So richtig bin ich mit beiden Varianten nicht zu frieden.
Gruß
Jens-
@@Jens777:
nuqneH
p::before
Da ist die Unterstützung durch die Browser etwas mager. Besonders die des IE.Ja und? Do websites need to look exactly the same in every Browser? Schon gar nicht, wenn es um solcherlei Spielerei geht.
Und schon ganz und gar nicht, wenn es sich um Uralt-IEs handelt. Außerdem lassen sich in diesen Pseudoelemente mit CSS-Expressions erzeugen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Jens777:
...
Ja und? ... Schon gar nicht, wenn es um solcherlei Spielerei geht...
Naja es handelt sich halt um eine gewerbliche Webseite und die Hintergrundfarbe des Textes ist da schon ein elementares Stilmittel. Das kann ich nicht einfach weglassen.
Ich habe jetzt meine Absätze in ein <p><span>Absatz</p></span> gepackt. Dadurch habe ich Umbrüche, kann padding und margin angeben un kann die Hintergrundfarbe eines inline Elementes definieren. Das ist für mich jetzt perfekt.
-
-