CSS: Überlappen vermeiden

[Nico Zorn]

X-No-Archive: yes

Hi,

versuche gerade auf CSS umzusteigen ( http://www.nico-zorn.de , Pivot als
Weblog-System ) - klappt soweit, einen Fehler kriege ich aber nicht behoben:
Wenn ich das Browserfenster verkleiner, überlappt die rechte Box die anderen
Elemente. Wie kann ich das vermeiden?

Danke und Grüße

Nico

Der CSS-Code:

a {
color : #113377;
text-decoration : none;
}

a:hover {
text-decoration : underline;
}

body {
background-color : #525252;
font-family : Arial, "Microsoft Sans Serif";
font-size : 12px;
margin : 10px 10px 0px 10px;
padding : 0px;
}

h1 {
font-size : 14px;
padding-top : 10px;
}

p,h1,pre, h2 {
margin : 0px 13px 13px 13px;
}

date {
color : #113377;
float : right;
font-size : 12px;
font-style : italic;
font-weight : normal;
padding-bottom : 10px;
}

floatright {
padding-right : 10px;
text-align : right;
}

#banner {
background-color : ##525252;
border-left : 1px solid #747474;
border-right : 1px solid #747474;
border-top : 1px solid #747474;
color : #FFFFFF;
height : 29px;
padding : 15px;
width: 800px;
}

#banner a {
color : #FFFFFF;
text-decoration : none;
}

#banner a:hover {
text-decoration : underline;
}

#banner h1 {
display : inline;
font-size : 20px;
font-family : Arial Rounded MT Bold, Arial;
height : 30px;
margin : 0px;
padding : 10px 10px 0px 10px;
color : #457EF5;
width: 800px;
}

#banner h2 {
display : inline;
font-size : 20px;
font-family : Arial Rounded MT Bold, Arial;
height : 30px;
margin : 0px;
padding : 10px 10px 0px 0px;
color : #457EF5;
width: 800px;
}

#centercontent {
background : #FFFFFF;
border : 1px solid #FFFFFF;
line-height : 18px;
margin-left : 161px;
margin-right : 201px;
width: 472px;
}


#commentcontent {
background : #FFFFFF;
border : 1px solid #FFFFFF;
line-height : 18px;
}



#leftcontent {
background-color : #B3CAFB;
border : 1px solid #B3CAFB;
font-family : Arial, "Microsoft Sans Serif";
font-size : 11px;
left : 10px;
position : absolute;
top : 70px;
width : 159px;
}

#rightcontent {
background-color : #B3CAFB;
border : 0px solid #B3CAFB;
font-family : Arial, "Microsoft Sans Serif";
font-size : 11px;
position : absolute;
right : 160px;
top : 70px;
width : 197px;
}

#rightcontent p, #leftcontent p {
line-height : 16px;
margin-top : 10px;
}

[Mario Mueller]

Post by Nico Zorn
X-No-Archive: yes

*seufz*

Post by Nico Zorn
versuche gerade auf CSS umzusteigen ( http://www.nico-zorn.de , Pivot als
Wenn ich das Browserfenster verkleiner, überlappt die rechte Box die anderen
Elemente. Wie kann ich das vermeiden?

#centercontent hat einen rechten Rand von 201px, #rightcontent ist
absolut positioniert und ist mit right:160px; und width:197px; ca. 357px
breit - ragt also 156px über #centercontent drüber.

m.m

[Boris 'pi' Piwinger]

Post by Mario Mueller
#centercontent hat einen rechten Rand von 201px, #rightcontent ist
absolut positioniert und ist mit right:160px; und width:197px; ca. 357px
breit - ragt also 156px über #centercontent drüber.

BTAIM, wir hatten hier schon einmal die leider fruchtlose
Diskussion, wie man es komplett vermeiden kann, dass sich
verschiedene Bereiche ueberlagern. Es kamen hoechstens
Kruecken raus, die aber keineswegs nebenwirkungsfrei waren.

pi

[Mario Mueller]

Post by Boris 'pi' Piwinger
BTAIM, wir hatten hier schon einmal die leider fruchtlose
Diskussion, wie man es komplett vermeiden kann, dass sich
verschiedene Bereiche ueberlagern. Es kamen hoechstens
Kruecken raus, die aber keineswegs nebenwirkungsfrei waren.

Komplett vermeiden kann man es nicht, da bspw. Grafiken oder Tabellen
natürlich immer mal größer als der verfügbare Inhalt sein kann. Die
Lösung auf ego4u sollte aber in halbwegs aktuellen Browsern relativ gut
funktionieren.

m.m

[Boris 'pi' Piwinger]

Post by Mario Mueller

Post by Boris 'pi' Piwinger
BTAIM, wir hatten hier schon einmal die leider fruchtlose
Diskussion, wie man es komplett vermeiden kann, dass sich
verschiedene Bereiche ueberlagern. Es kamen hoechstens
Kruecken raus, die aber keineswegs nebenwirkungsfrei waren.

Komplett vermeiden kann man es nicht, da bspw. Grafiken oder Tabellen
natürlich immer mal größer als der verfügbare Inhalt sein kann.

Naja, letztlich geht es darum, dass wir Bloecke haben. Diese
muessen iregendwie angeordnet werden. Ich halte es fuer
einen Designfehler in CSS, dass man nicht sagen kann, egal
was passiert, aber ueberlagern duerfen die Teile sich nicht.
Dazu koennte man z.B. Prioritaeten (z.B. z-index) geben, so
dass die anderen diesen Platz dann nicht nehmen, ohne
drunter zu gehen (also umfliessen). Oder die Bloecke werden
so verschoben, dass es keine Probleme gibt. Denkbar ist eine
Loesung also.

Post by Mario Mueller
Die
Lösung auf ego4u sollte aber in halbwegs aktuellen Browsern relativ gut
funktionieren.

Auf Mozilla wird bei schmalem Fenster Text ueberlagert, ist
also verloren. Funktionieren wuerde ich das nicht nennen.

pi

[Boris 'pi' Piwinger]

Post by Boris 'pi' Piwinger
Naja, letztlich geht es darum, dass wir Bloecke haben.
[...] Ich halte es fuer
einen Designfehler in CSS, dass man nicht sagen kann, egal
was passiert, aber ueberlagern duerfen die Teile sich nicht.

Man kann den Containing Block mit min-width versehen, so daß auch
ungünstigstenfalls alles reinpaßt.

Also gut, aber z.B. habe oben rechts ein Logo, in der Mitte
einen Content-Bereich (mit max-width), die sich
typischerweise nicht in die Quere kommen. Macht man das
Fenster schmaler, geht es halt doch in die Hose.

pi

[Boris 'pi' Piwinger]

Post by Boris 'pi' Piwinger
Also gut, aber z.B. habe oben rechts ein Logo, in der Mitte
einen Content-Bereich (mit max-width), die sich
typischerweise nicht in die Quere kommen. Macht man das
Fenster schmaler, geht es halt doch in die Hose.

http://www.ohrbelag.de/tmp/20030912-1.html

Es rutscht aber rechts aus dem Bild raus.

Beim IE mit seinem kaputten Boxmodell schon, aber das kannst du CSS
nicht in die Schuhe schieben.

Das ist in der Praxis ein Problem.

pi

[Uwe Schröder]

Post by Boris 'pi' Piwinger

http://www.ohrbelag.de/tmp/20030912-1.html

Es rutscht aber rechts aus dem Bild raus.

Ja nun, wenn es weder floaten noch überlappen soll, muß es doch
schließlich irgendwo hin. Wo hättest du es den gerne? Soll ein zweiter
Monitor angeflogen kommen, auf dem es dann erscheint?

Post by Boris 'pi' Piwinger

Beim IE mit seinem kaputten Boxmodell schon, aber das kannst du CSS
nicht in die Schuhe schieben.

Das ist in der Praxis ein Problem.

Die Praxis hat aber nichts mit deiner Aussage zu tun, es wäre "in CSS"
nicht möglich, das Überlappen von Elementen zu verhindern. "In CSS" ist
es sehr wohl möglich, nur "im IE" nicht. Und das ist kein Designfehler
in CSS.

usch

[Joachim Wiesemann]

Post by Uwe Schröder
Die Praxis hat aber nichts mit deiner Aussage zu tun, es wäre "in CSS"
nicht möglich, das Überlappen von Elementen zu verhindern.

Ich habe jedenfalls keine Loesung gesehen.

Post by Uwe Schröder
"In CSS" ist
es sehr wohl möglich, nur "im IE" nicht. Und das ist kein Designfehler
in CSS.

Ich gebe Dir noch ein Beispiel, Du sagst mir, wie ich in CSS
sicherstelle, dass nichts passiert. Schaue Dir
http://piology.org/dtl/rasur.html an. Der Textteil ist einfach im Body,
dieser hat eine Maximalbreite und dazu passende Margins. Oben rechts ist
ein Yahoo!-Logo. So weit, so gut. Und nun das Fenster schmaler machen.

Ganz einfach: laß das position:absolut weg, schon geht's. Ein float:right
(oder das bereits vorhandene align=right) reicht völlig und funktioniert
ohne Überlappung. Die absolute oder relative Positionierung von Kisten
kann zu Überlappungen führen, da der Rest der Seite auf diese Kisten keine
Rücksicht nimmt.

Normal flow und float funktionieren miteinander, außer der Browser ist kaputt.

Aus der CSS-Spezifikation:
"This implies that relative positioning may cause boxes to overlap."
<http://www.w3.org/TR/REC-CSS2/visuren.html#relative-positioning>

"It is removed from the normal flow entirely (it has no impact on later
siblings). ... However, the contents of an absolutely positioned element
do not flow around any other boxes. They may or may not obscure the
contents of another box, depending on the stack levels of the
_overlapping_ boxes."
<http://www.w3.org/TR/REC-CSS2/visuren.html#absolute-positioning>

Viele Grüße
Joachim

[Boris 'pi' Piwinger]

Post by Joachim Wiesemann

Ich gebe Dir noch ein Beispiel, Du sagst mir, wie ich in CSS
sicherstelle, dass nichts passiert. Schaue Dir
http://piology.org/dtl/rasur.html an. Der Textteil ist einfach im Body,
dieser hat eine Maximalbreite und dazu passende Margins. Oben rechts ist
ein Yahoo!-Logo. So weit, so gut. Und nun das Fenster schmaler machen.

Ganz einfach: laß das position:absolut weg, schon geht's.

Das ist keine wirkliche Loesung.

Post by Joachim Wiesemann
Ein float:right
(oder das bereits vorhandene align=right) reicht völlig

Da landet das Bild aber an anderer Stelle.

Post by Joachim Wiesemann
und funktioniert
ohne Überlappung. Die absolute oder relative Positionierung von Kisten
kann zu Überlappungen führen, da der Rest der Seite auf diese Kisten keine
Rücksicht nimmt.

Und genau das ist das, was ich bei CSS fuer einen
Designfehler halte.

pi

[Joachim Wiesemann]

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann

Ich gebe Dir noch ein Beispiel, Du sagst mir, wie ich in CSS
sicherstelle, dass nichts passiert. Schaue Dir
http://piology.org/dtl/rasur.html an. Der Textteil ist einfach im Body,
dieser hat eine Maximalbreite und dazu passende Margins. Oben rechts ist
ein Yahoo!-Logo. So weit, so gut. Und nun das Fenster schmaler machen.

Ganz einfach: laß das position:absolut weg, schon geht's.

Das ist keine wirkliche Loesung.

Warum nicht?

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
Ein float:right
(oder das bereits vorhandene align=right) reicht völlig

Da landet das Bild aber an anderer Stelle.

Habe hier beim Testen keinen nennenswerten Unterschied feststellen können.

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
und funktioniert
ohne Überlappung. Die absolute oder relative Positionierung von Kisten
kann zu Überlappungen führen, da der Rest der Seite auf diese Kisten keine
Rücksicht nimmt.

Und genau das ist das, was ich bei CSS fuer einen
Designfehler halte.

Du möchest etwas von CSS, das dieses nicht bietet. Das ist kein Fehler,
sondern ein fehlendes Feature:

Zum einen bräuchte es da eine neue CSS-Eigenschaft, die sagt, ob diese
Box nun umflossen werden soll, oder nicht.
Zum anderen wird das schnell sehr aufwendig, wenn rechts und links von
der Box noch Platz ist. Dann kann man zwei Spalten fließen lassen oder
man man läßt den Text rechts und links durchlaufen (wieder eine neue
Eigenschaft), ... Und dazwischen sind dann noch Bilder und Floats.

Das wäre vielleicht nett, aber zum einen muß dafür noch reichlich
definiert werden und eine Menge Eigenschaften festgelegt werden. (Wo doch
bisher schon viele nicht in der Lage sind, für floatende Elemente die
Breite anzugeben.) Zum anderen glaube ich nicht, daß sowas auch nur
halbwegs funktionieren kann, solange der meistverbreitete Brauser nicht
mal Text um ein einzelnes Bild fließen lassen kann (Guillotine-Effekt).

Viele Grüße
Joachim

[Boris 'pi' Piwinger]

Post by Joachim Wiesemann

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann

Ich gebe Dir noch ein Beispiel, Du sagst mir, wie ich in CSS
sicherstelle, dass nichts passiert. Schaue Dir
http://piology.org/dtl/rasur.html an. Der Textteil ist einfach im Body,
dieser hat eine Maximalbreite und dazu passende Margins. Oben rechts ist
ein Yahoo!-Logo. So weit, so gut. Und nun das Fenster schmaler machen.

Ganz einfach: laß das position:absolut weg, schon geht's.

Das ist keine wirkliche Loesung.

Warum nicht?

Weil es IMHO keine Loesung eines Problems ist, auf den
gewuenschten Effekt zu verzichten.

Post by Joachim Wiesemann

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
Ein float:right
(oder das bereits vorhandene align=right) reicht völlig

Da landet das Bild aber an anderer Stelle.

Habe hier beim Testen keinen nennenswerten Unterschied feststellen können.

Ich habe das flasch in Erinnerung gehabt. Allein: Es aendert
am Problem nichts.

Post by Joachim Wiesemann

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
und funktioniert
ohne Überlappung. Die absolute oder relative Positionierung von Kisten
kann zu Überlappungen führen, da der Rest der Seite auf diese Kisten keine
Rücksicht nimmt.

Und genau das ist das, was ich bei CSS fuer einen
Designfehler halte.

Du möchest etwas von CSS, das dieses nicht bietet. Das ist kein Fehler,

Ich sage doch ein Designfehler von CSS. Denn typischerweise
will ja niemand, dass sich Texte einfach ueberlagern.

pi

[Joachim Wiesemann]

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
Du möchest etwas von CSS, das dieses nicht bietet. Das ist kein Fehler,

Ich sage doch ein Designfehler von CSS. Denn typischerweise
will ja niemand, dass sich Texte einfach ueberlagern.

Nein, das wohl selten. Aber einen Text auf eine bestimmte Stelle einer
Grafik zu positionieren kann schon nützlich sein. Oder einen
transparenten anklickbaren Bereich zu definieren. Die Beschreibung der
position: absolut Eigenschaft in der CSS Spezifikation zeigt, daß das
Ziel vermutlich war, die elenden Frames ersetzen zu können. Dafür ist es
durchaus geeignet. Aber halt leider nicht für Deine Ziele. Deshalb ist es
trotzdem nicht unbedingt ein Designfehler.

Viele Grüße
Joachim

[Boris 'pi' Piwinger]

Post by Joachim Wiesemann

Post by Boris 'pi' Piwinger

Post by Joachim Wiesemann
Du möchest etwas von CSS, das dieses nicht bietet. Das ist kein Fehler,

Ich sage doch ein Designfehler von CSS. Denn typischerweise
will ja niemand, dass sich Texte einfach ueberlagern.

Nein, das wohl selten. Aber einen Text auf eine bestimmte Stelle einer
Grafik zu positionieren kann schon nützlich sein.

Kann schon, ist aber oft nicht erwuenscht.

Post by Joachim Wiesemann
Oder einen
transparenten anklickbaren Bereich zu definieren. Die Beschreibung der
position: absolut Eigenschaft in der CSS Spezifikation zeigt, daß das
Ziel vermutlich war, die elenden Frames ersetzen zu können. Dafür ist es
durchaus geeignet. Aber halt leider nicht für Deine Ziele. Deshalb ist es
trotzdem nicht unbedingt ein Designfehler.

Sondern wie nennst Du es, wenn man eine ganz natuerliche
Problemstellung nicht richtig vermeiden kann?

pi

[Mario Mueller]

Post by Boris 'pi' Piwinger

Post by Mario Mueller
Die
Lösung auf ego4u sollte aber in halbwegs aktuellen Browsern relativ gut
funktionieren.

Auf Mozilla wird bei schmalem Fenster Text ueberlagert, ist
also verloren. Funktionieren wuerde ich das nicht nennen.

Das Fenster muss schon ziemlich schmal sein, damit der Text in Mozilla
überlagert wird. Aber egal, jetzt sollte das (zumindest in Mozilla) nicht
mehr vorkommen - besser?

m.m

[Volker Gringmuth]

Post by Nico Zorn
floatright {

Gibts 'n Element namens "floatright"?
Oder gehört da doch noch 'n "." oder 'n "#" davor?


vG

[Erik Griffin]

Post by Nico Zorn
[...]
Hi,

Hallo !

Post by Nico Zorn
versuche gerade auf CSS umzusteigen ( http://www.nico-zorn.de , Pivot als
Wenn ich das Browserfenster verkleiner, überlappt die rechte Box die anderen
Elemente. Wie kann ich das vermeiden?
[...]

Hatte das gleiche Problem wie Du ;) Habe im Endeffekt dafür wieder eine
Tabelle genutzt...

mfg
Erik