nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Tag,
Ich habe 2 Textabsätze und möchte diese jeweils mit einer Hintergrundfarbe einfärben. Allerdings ist mein Spezialwunsch, dass die background-color nicht die gesamte Browserbreite der Absätze einfärbt, sondern nur eine rechteckige Fläche, die dem Textausmaß entspricht.
Beispiel:
Der Martin
<p>Das ist die erste zeile des 1.Absatzes<br>
und auch noch die 2.Zeile
<p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
und ebenfalls noch eine 2.Zeile
Die Einfärbung des 1.Absatzes soll direkt rechts neben "1.Absatzes" enden und die Einfärbung des 2.Absatzes gleich rechts neben "2.Absatzes"
Verwende ich <div> oder <p> wird aber die gesamte Browserbreite eingefärbt und bei Verwendung mit <span> jeweils nur eine Zeile, kein zeilenübergreifende Rechteck. Mit float:left endet zwar der Hintergrund des 1.Absatzes gewünscht, allerdings befindet sich dann auch der 2.Absatz nicht mehr unterhalb des 1.Absatzes.
Auf irgendwelche Breitenangaben möchte ich wenn möglich verzeichten.
Was wäre hier die einfachste Lösung?
du könntest mal versuchen den teil den du einfärben möchtest in ein span zu setzen, diesen eine fixe breite geben + display: block;
lg
du könntest mal versuchen den teil den du einfärben möchtest in ein span zu setzen, diesen eine fixe breite geben + display: block;
genau das möchte ich verhindern, mit fixen Breiten zu arbeiten.
Der Browswer soll selber automatisch genau am rechten Rand der längsten Zeile eines Absatzes bzw. div-Blocks mit der Hintergrundfärberei aufhören.
Om nah hoo pez nyeetz, Gunther!
background-clip liefert nicht die Möglichkeiten, die dem Wunsch des OP entsprechen, so wie ich das herauslese http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:CSS3_background-clip.html
Das beste dürfte
float: left; clear: left; für die entsprechenden Elemente sein Suchbegriff: shrink to fit
Matthias
Om nah hoo pez nyeetz, Matthias!
background-clip liefert nicht die Möglichkeiten, die dem Wunsch des OP entsprechen, so wie ich das herauslese http://wiki.selfhtml.org/mediawiki/extensions/SELFHTML/example.php/Beispiel:CSS3_background-clip.html
Nach meinem Verständnis sucht er genau 'background-clip: content-box;', also das dritte/ letzte Beispiel. Abstände werden dann per padding gesetzt und ggf. noch
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Denn der OP sagt ja:"Auf irgendwelche Breitenangaben möchte ich wenn möglich verzeichten."
Das beste dürfte
float: left; clear: left;für die entsprechenden Elemente sein Suchbegriff: shrink to fit
Ehrlich, ich kann diesen Missbrauch von 'float' langsam aber sicher nicht mehr sehen ...! :-P
Schon gar nicht, wenn es entsprechende CSS-Alternativen gibt. Und komm' mir jetzt nicht mit der Browserunterstützung für IEs ...! ;-)
Gruß Gunther
Om nah hoo pez nyeetz, Gunther!
Nach meinem Verständnis sucht er genau 'background-clip: content-box;', also das dritte/ letzte Beispiel. Abstände werden dann per padding gesetzt und ggf. noch
content-box != tatsächlich Text enthaltender Bereich
Matthias
Om nah hoo pez nyeetz, Matthias!
content-box != tatsächlich Text enthaltender Bereich
OK, habe mir das Ausgangsposting nochmal durchgelesen.
Wenn es dem OP tatsächlich um eine "automatische" Breitenbeschränkung ohne explizite Breitenangabe geht, dann wäre aber immer noch ein
p.colored-bg {display: inline-block;}
deiner Float-Variante vorzuziehen! :-P
Gruß Gunther
Hi,
Wenn es dem OP tatsächlich um eine "automatische" Breitenbeschränkung ohne explizite Breitenangabe geht, dann wäre aber immer noch ein
p.colored-bg {display: inline-block;}
> deiner Float-Variante vorzuziehen! :-P
Da musst du dann immer noch dafür sorgen, dass aufeinanderfolgende Absätze nicht nebeneinander dargestellt werden.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Hi,
Da musst du dann immer noch dafür sorgen, dass aufeinanderfolgende Absätze nicht nebeneinander dargestellt werden.
schon klar - das sollte ja nicht unbedingt ein Problem darstellen. ;-)
Allerdings finde ich die vom OP gewünschte "Konstruktion" eh etwas "merkwürdig", jedenfalls ohne weitere Details zu kennen. Von daher eben auch keine weiteren Anmerkungen zur "generellen Struktur".
In aller Regel tun sich aber gerade "unerfahrene" Anwender keinen Gefallen damit, Floats nur wegen des "Shrink-to-fit" Effekts zu verwenden.
Gruß Gunther
Om nah hoo pez nyeetz, Gunther!
Da musst du dann immer noch dafür sorgen, dass aufeinanderfolgende Absätze nicht nebeneinander dargestellt werden.
schon klar - das sollte ja nicht unbedingt ein Problem darstellen. ;-)
Ein größeres als die floats nicht floaten zu lassen :p
Matthias
Om nah hoo pez nyeetz, Matthias!
Da musst du dann immer noch dafür sorgen, dass aufeinanderfolgende Absätze nicht nebeneinander dargestellt werden.
schon klar - das sollte ja nicht unbedingt ein Problem darstellen. ;-)
Ein größeres als die floats nicht floaten zu lassen :p
Hmmm ..., wüßte ich jetzt nicht.
Wo siehst du denn da ggf. ein Problem?
Gruß Gunther
Om nah hoo pez nyeetz, Gunther!
Hmmm ..., wüßte ich jetzt nicht.
Wo siehst du denn da ggf. ein Problem?
Ich wüsste im Moment nicht wie. Zusätzliche Elemente zählen nicht, Abmessungen auch nicht, before und after vielleicht, margin-right: 100% hat komische Nebenwirkungen.
Matthias
Om nah hoo pez nyeetz, Matthias!
Hmmm ..., wüßte ich jetzt nicht.
Wo siehst du denn da ggf. ein Problem?Ich wüsste im Moment nicht wie. Zusätzliche Elemente zählen nicht, ...
Das sehe ich in diesem Fall nicht so, denn wenn ich etwas "inline" darstellen will, ist IMHO der Gebrauch von <br> durchaus legitim.
Aber wie bereits gesagt, ist mir bisher trotz intensiver Überlegungen noch kein wirklich sinnvolles Anwendungsbeispiel dafür eingefallen, wann ich ein P-Element inline verwenden würde ...!
Vielleicht kann mir da ja jemand auf die Sprünge helfen.
Gruß Gunther
Hi,
Das sehe ich in diesem Fall nicht so, denn wenn ich etwas "inline" darstellen will, ist IMHO der Gebrauch von <br> durchaus legitim.
Textabsätze und zusätzliche BR dazwischen halte ich nicht für sonderlich legitim – das gibt in der Darstellung ohne Formatierung große Abstände zwischen den Absätzen, wozu?
Aber wie bereits gesagt, ist mir bisher trotz intensiver Überlegungen noch kein wirklich sinnvolles Anwendungsbeispiel dafür eingefallen, wann ich ein P-Element inline verwenden würde ...!
Lass’ deiner gestalterischen Phantasie freien Lauf – da mag es genug Gründe geben. (Zumal es hier ja nicht um inline, sondern inline-block geht, um shrink-to-fit in der Breite nutzen zu können.)
MfG ChrisB
Hi,
Das sehe ich in diesem Fall nicht so, denn wenn ich etwas "inline" darstellen will, ist IMHO der Gebrauch von <br> durchaus legitim.
Textabsätze und zusätzliche BR dazwischen halte ich nicht für sonderlich legitim – das gibt in der Darstellung ohne Formatierung große Abstände zwischen den Absätzen, wozu?
Ja OK. Das ganze Konstrukt hier ist ja schon im Ansatz "suspekt". Denn anstatt ein P-Element inline zu verwende, nimmt man ja dann eher gleich ein Inline-Element wie span.
Außerdem habe ich 'inline-block' ja deshalb ins Rennen gebracht, weil ich davon ausgegangen war, dass der OP 'background-clip: content-box;' sucht und es eben auch möglich sein sollte, irgendwelche Margins anzugeben.
Aber wie bereits gesagt, ist mir bisher trotz intensiver Überlegungen noch kein wirklich sinnvolles Anwendungsbeispiel dafür eingefallen, wann ich ein P-Element inline verwenden würde ...!
Lass’ deiner gestalterischen Phantasie freien Lauf – da mag es genug Gründe geben.
Daran mangelt es mir so manches Mal ...! ;-)
(Zumal es hier ja nicht um inline, sondern inline-block geht, um shrink-to-fit in der Breite nutzen zu können.)
Für shrink-to-fit macht das doch keinen Unterschied.
" Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context." (Quelle: http://www.w3.org/TR/CSS21/visuren.html#inline-boxes)
Und wenn man denn dann 'display: inline;' verwendet, kann man den Zeilenumbruch per CSS erreichen:
.inline-elements:after {
content:"\A";
white-space:pre;
}
Aber wie gesagt - ich persönlich würde es anders machen ...! ;-)
Und ich verwende 'float' auch nur dann, wenn ich etwas floaten will.
Gruß Gunther
Hi,
Ja OK. Das ganze Konstrukt hier ist ja schon im Ansatz "suspekt". Denn anstatt ein P-Element inline zu verwende, nimmt man ja dann eher gleich ein Inline-Element wie span.
Was „man nimmt“, richtet sich nach dem Inhalt, nicht nach der gewünschten Formatierung.
(Zumal es hier ja nicht um inline, sondern inline-block geht, um shrink-to-fit in der Breite nutzen zu können.)
Für shrink-to-fit macht das doch keinen Unterschied.
Aber für das Ergebnis, das erreicht werden soll.
Gibst du einem inline dargestellten Element einen Hintergrund, bekommst du einen sich über „Zeilen“ erstreckenden Hintergrund, während inline-block nach wie vor ein Rechteck ergibt.
MfG ChrisB
Hi,
Ja OK. Das ganze Konstrukt hier ist ja schon im Ansatz "suspekt". Denn anstatt ein P-Element inline zu verwende, nimmt man ja dann eher gleich ein Inline-Element wie span.
Was „man nimmt“, richtet sich nach dem Inhalt, nicht nach der gewünschten Formatierung.
Schon klar! ;-)
Aber bei dieser Hintergrundgeschichte hier, würde ich dann halt trotzdem ein
<p><span>Lorem ipsum ...</span></p>
bevorzugen (u.a. weil man dann auch text-align für das Elternelement verwenden kann).
(Zumal es hier ja nicht um inline, sondern inline-block geht, um shrink-to-fit in der Breite nutzen zu können.)
Für shrink-to-fit macht das doch keinen Unterschied.
Aber für das Ergebnis, das erreicht werden soll.
Vielleicht sollten wir dieses nochmal genauer definieren!
Gruß Gunther
Om nah hoo pez nyeetz, Gunther!
Ja OK. Das ganze Konstrukt hier ist ja schon im Ansatz "suspekt".
Warum?
<p><span>Lorem ipsum ...</span></p>
> bevorzugen (u.a. weil man dann auch text-align für das Elternelement verwenden kann).
Hat der OP probiert und verworfen, weil ... siehe Ausgangsposting.
Matthias
--
1/z ist kein Blatt Papier.
Om nah hoo pez nyeetz, Matthias!
Hat der OP probiert und verworfen, weil ... siehe Ausgangsposting.
Du beziehst dich auf:"Verwende ich <div> oder <p> wird aber die gesamte Browserbreite eingefärbt ..."
Jetzt bist du aber "unflexibel" ...! ;-)
Dann "verschiebe" es quasi einen Level nach oben
<div>
<p>Lorem ipsum ...</p>
</div>
und das P-Element als 'display: inline-block;'
Und nur mal "angenommen", jetzt kommt noch der Wunsch dazu, dass die Absätze zentriert sein sollen unter der Prämisse "Auf irgendwelche Breitenangaben möchte ich wenn möglich verzichten".
Gruß Gunther
Hi,
Ich wüsste im Moment nicht wie. Zusätzliche Elemente zählen nicht, Abmessungen auch nicht, before und after vielleicht, margin-right: 100% hat komische Nebenwirkungen.
:after mit Zeilenumbruch (\A) als content, und white-space:pre.
MfG ChrisB
Hi,
:after mit Zeilenumbruch (\A) als content, und white-space:pre.
Ah, verflixt – das harmoniert nicht mit inline-block …
MfG ChrisB
Super, ist ja richtig lebendig hier im Forum - gefällt mir!
Der Fachbegriff "Shrink to fit" war mir auch neu, dürfte aber genau das sein, was ich will.
Ich habe jetzt mittels zweier Methoden von euren Tips genau das erreicht. Die Frage: Ist das schon optimales CSS/HTML für meinen Wunsch?
LÖSUNG 1:
<div style="backgrund:#eee; display:inline-block">
<p>Das ist die erste zeile des 1.Absatzes<br>
und auch noch die 2.Zeile
</div>
<p> <!-- wegen Absatzumbruch-->
<div style="backgrund:#eee; display:inline-block">
<p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
und ebenfalls noch eine 2.Zeile
</div>
LÖSUNG 2:
<div style="backgrund:#eee; float:left;">
<p>Das ist die erste zeile des 1.Absatzes<br>
und auch noch die 2.Zeile
</div>
<p style="clear:left;"> <!-- wegen Absatzumbruch-->
<div style="backgrund:#eee; float:left;">
<p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
und ebenfalls noch eine 2.Zeile
</div>
Hallo Mike!
Super, ist ja richtig lebendig hier im Forum - gefällt mir!
Ja, manchmal entfacht eine vermeintlich "einfache" Frage eine angeregte Diskussion! :-)
Dein Beispiel zeigt auch wieder mal, dass die "Standard-Antwort" im Webdesign eigentlich immer ist:"Es kommt darauf an ...!" ;-)
Der Fachbegriff "Shrink to fit" war mir auch neu, dürfte aber genau das sein, was ich will.
Ja genau - soviel ist schon mal sicher ...!
Shrink-to-fit kann man im Prinzip auf 2 Arten erreichen:
1. per Float
2. per Display-Eigenschaft mit einem der 'inline' Werte
Ich habe jetzt mittels zweier Methoden von euren Tips genau das erreicht. Die Frage: Ist das schon optimales CSS/HTML für meinen Wunsch?
LÖSUNG 1:
<div style="backgrund:#eee; display:inline-block">
<p>Das ist die erste zeile des 1.Absatzes<br>
und auch noch die 2.Zeile
</div><p> <!-- wegen Absatzumbruch-->
<div style="backgrund:#eee; display:inline-block">
<p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
und ebenfalls noch eine 2.Zeile
</div>
Nicht ganz. ;-)
Das 'display: inline-block' den P-Elementen zuweisen. Das umschließende Div sorgt jeweils für die Erzeugung einer eigenen Blockbox (und kein leeres P-Element dazwischen basteln).
> LÖSUNG 2:
>
> ~~~html
> <div style="backgrund:#eee; float:left;">
> <p>Das ist die erste zeile des 1.Absatzes<br>
> und auch noch die 2.Zeile
> </div>
>
> <p style="clear:left;"> <!-- wegen Absatzumbruch-->
>
> <div style="backgrund:#eee; float:left;">
> <p>Das hier ist nun die erste Zeile des 2.Absatzes<br>
> und ebenfalls noch eine 2.Zeile
> </div>
>
Auch schon dicht dran, aber du kannst die P-Elemente direkt floaten. Wenn ein Element gefloatet wird, wird dessen Display-Eigenschaft automatisch auf 'block' gesetzt. Um jetzt den Umbruch zu erreichen, muss das nachfolgende Element die entsprechende Clear-Eigenschaft zugewiesen bekommen.
Gruß Gunther
Hallo Mike!
Wieder zu schnell gepostet, deshalb hier noch ein Nachtrag.
Aus Sicht der "(HTML-)Puristen" ist die Float-Variante so gesehen die "sauberste" Lösung, weil sie keinerlei zusätzliches Markup erfordert.
Persönlich bin ich allerdings kein Freund davon, Floats quasi für jeden "Mist" zu missbrauchen. Über lange Zeit waren Floats aber halt das einzige Mittel, insbesondere im Bereich des eigentlichen Layouts und erfreuten sich dementsprechend großer Beliebtheit. IMHO hat das dazu geführt, dass viele Autoren heutzutage immer noch direkt zu float greifen, obwohl es inzwischen "brauchbare" Alternativen gibt.
Mit anderen Worten - ich persönlich sehe es eben so, dass man auch beim CSS immer das "passendste/ geeignetste" Mittel verwenden sollte. Und wenn dazu ein Extra-Element im HTML erfordrlich ist, dann ist das eben so.
Das ist natürlich nicht zu verwechseln mit "Divitis", d.h. keine Extra-Elemente, die nicht auch wirklich erforderlich sind!
Aber aus meiner Sicht gibt es eben nicht umsonst die sog. "allgemeinen Elemente" ohne jegliche semantische Bedeutung.
Bleibt noch zu erwähnen, dass man eigentlich immer jedes Vorhaben/ jede Absicht hinterfragen sollte, denn oftmals ist das der Schlüssel zur passendsten Variante.
In deinem konkreten Fall stellt sich mir bspw. die Frage, warum deine Textabsätze nicht "über die volle Breite" gehen sollen? Und ob dann nicht ggf. auch eine 'max-width' Angabe in Frage kommen würde?
Gruß Gunther
Hi,
Mit anderen Worten - ich persönlich sehe es eben so, dass man auch beim CSS immer das "passendste/ geeignetste" Mittel verwenden sollte. Und wenn dazu ein Extra-Element im HTML erfordrlich ist, dann ist das eben so.
Das ist natürlich nicht zu verwechseln mit "Divitis", d.h. keine Extra-Elemente, die nicht auch wirklich erforderlich sind!
nein, das Charakteristische an der häufig kritisierten "Divitis" ist auch weniger der Gebrauch von div-Elementen an sich - die sind manchmal durchaus sinnvoll. Es ist eher der "falsche" Gebrauch dieser Elemente, beispielsweise wenn klar wird, dass viele der div-Container in Wirklichkeit Überschriften oder gewöhnliche Textabsätze sein sollten, oder dass sie nur ein einziges Kindelement enthalten und damit überflüssig sind, weil der Autor sich nicht bewusst ist, dass man jedes andere Element ebenso mit CSS gestalten oder meinetwegen auch positionieren kann wie einen div-Container.
Aber aus meiner Sicht gibt es eben nicht umsonst die sog. "allgemeinen Elemente" ohne jegliche semantische Bedeutung.
Richtig, sie haben auch ihre Daseinsberechtigung. Nämlich zum Gruppieren, wenn nicht ein anderes gruppierendes Element sowieso da ist. Ein div- oder span-Element mit nur einem Kindelement gruppiert aber nichts und ist daher meistens unangebracht. Ausnahmen bestätigen die Regel. ;-)
Bleibt noch zu erwähnen, dass man eigentlich immer jedes Vorhaben/ jede Absicht hinterfragen sollte, denn oftmals ist das der Schlüssel zur passendsten Variante.
Sollte man unbedingt, auch wenn es oft lästig erscheint, oder so, als wollte man nur kritisieren.
In deinem konkreten Fall stellt sich mir bspw. die Frage, warum deine Textabsätze nicht "über die volle Breite" gehen sollen?
Das will mir auch noch nicht so recht einleuchten, zumal ich mir das Ergebnis auch visuell nicht besonders schön vorstelle, wenn die Einfärbung verschiedener Absätze abhängig von der Verteilung des Texts darin unterschiedlich breit wird.
Ciao,
Martin
Hi,
Lösung 3:
Du könntest den p-Elementen display: table geben. Das sollte zum gewünschten Verhalten führen?
~dave