float:right und text-background
1 
Tim Tepaße
0
float:right und text-background
hi
ich arbeite an einem neuen layout für die homepage eines freundes. als basis template verwende ich den "Sinorcaish" layout: http://www.oswd.org/design/1794/sinorcaish/sample.html ... so weit so gut.
im Sinorcaish css gibt es die class="floatbox", welche ich für eine box am rechten rand der homepage nutzen möchte. der content text (in div id=main) fliesst dann schön um diese box herum.
nun zu meinem problem:
für die untertitel möchte ich diese mit blauer farbe hinterlegen (background). dabei endet aber der background nicht so wie der normale text ein paar pixel vor dem rand der floatbox, sondern fliesst weiter und unter der floatbox durch.
beispiel zur illustration was ich meine (seite noch in bearbeitung):
http://www.trittibach-bau.ch/testnew/parser/parser.php?file=/testnew/tb_portrait.htm
wie kann ich erreichen, dass die hintergrund farbe (background) genau gleich wie der normale text nur bis ein paar pixel vor der floatbox geht? ich möchte aber gleichzeitig auch erreichen, dass wenn keine floatbox da ist, der background wie auch der text bis an den rechten bildschirmrand geht.
danke für die unterstützung
markus
-
Hallo Markus,
für die untertitel möchte ich diese mit blauer farbe hinterlegen (background). dabei endet aber der background nicht so wie der normale text ein paar pixel vor dem rand der floatbox, sondern fliesst weiter und unter der floatbox durch.
Das ist kein Bug, das ist leider ein Feature von float. Dokumentiert siehst Du das z.B. in SELFHTML: CSS-basierte Layouts oder in dem recht ausführlichen Artikel Float: Die Theorie.
wie kann ich erreichen, dass die hintergrund farbe (background) genau gleich wie der normale text nur bis ein paar pixel vor der floatbox geht?
Genau aus diesen Gründen vermeide ich die Verwendung von float, wo ich nur kann. Dessen Herausheben eines Elementes aus dem Dokumentfluss ist mir zuftiefst zuwieder.
Eine einfach Lösung zur Behebung wäre sicherlich, der Überschrift einen rechten margin etwas über der Breite des floatenden Box zu verpassen. Das Blockelement der Zwischenüberschrift geht dann nicht mehr über die gesamte verfügbare Breite, also auch nicht mehr hinter der Float-Box hindurch. Aber dann ist dies nicht mehr gegeben:
ich möchte aber gleichzeitig auch erreichen, dass wenn keine floatbox da ist, der background wie auch der text bis an den rechten bildschirmrand geht.
Tja. Dafür weiß ich keine wirklich praktikable Lösung. Eine andere billige Lösung wäre es, der Zwischenüberschrift die Deklaration clear:right; zu verpassen, dann würde sie aber unter die Float-Box rutschen und eventuell möchtest Du den Zwischenabstand nicht.
Eine andere, etwas zweifelhaftere, Angriffsmethode wäre, die Zwischenüberschrift nicht als Block-Element sondern mit display:inline; als Inline-Element zu gestalten. So sollte sie im Prinzip in den normalen Textfluss eingereiht werden und die erzeugende Line-Box, die jeweils die ganze Zeile enthält sollte von der Float-Box umgebrochen werden. Das Problem hierbei ist aber: Die Zwischenüberschrift erzeugt keinen Zeilenumbruch mehr, Du müßtest manuell ein unschönes <br> setzen. Und noch schlimmer: Inline-Elemente dehnen sich im Gegensatz zu Blockelementen nicht über die gesamte Breite einer Zeile aus. Auch darf man ihnen im Prinzip keine feste Breite in der Form von "100%" zuweisen. D.h. Dein gewünschter visueller Effekt der blau hinterlegten, sich über die gesamte Breite ziehenden Überschrift ist auch dahin.
Es gibt dafür keine befriedigende Lösung. Ich an Deiner Stelle würde entweder die Float-Box entfernen oder andersweitig unterbringen, z.B. in die linke Sidebar. In einem Porträt empfinde ich so eine Adresse sowieso als störend. Wenn Du darauf nicht verzichten möchtest, dann würde ich die Variante mit clear wählen, der entstehende Zwischenraum ist nicht wirklich groß und störend.
Tim
-
Hi,
ich arbeite an einem neuen layout für die homepage eines freundes. als basis template verwende ich den "Sinorcaish" layout: http://www.oswd.org/design/1794/sinorcaish/sample.html ... so weit so gut.
nö. den unnützen horizontalen Scrollbalken solltest Du schon noch eliminieren.
http://www.trittibach-bau.ch/testnew/parser/parser.php?file=/testnew/tb_portrait.htm
wie kann ich erreichen, dass die hintergrund farbe (background) genau gleich wie der normale text nur bis ein paar pixel vor der floatbox geht? ich möchte aber gleichzeitig auch erreichen, dass wenn keine floatbox da ist, der background wie auch der text bis an den rechten bildschirmrand geht.
das Beispiel zeigt auch, daß Du PHP nutzt. Dir steht es also frei, serverseitig das Layout an die ausgegebenen Inhalte anzupassen. Ein für beide Fälle passendes CSS dürfte wohl nicht möglich sein.
freundliche Grüße
Ingo