Knifflige css-Positionierung

[Joshh]

Hallo zusammen,

ich bin gerade dabei auf Basis von YAML eine Seite zu bauen und bin mir nicht sicher, ob ich die folgende Problemstellung ohne großen Pfusch mit Hilfe von css gelöst kriege:
Die Seite soll ungefähr aufgebaut sein, wie auf dieser Testseite. Sie hat eine Mindestbreite von 740px, eine Maximalbreite von 75em und soll horizontal zentriert sein, kein Problem.
Rechts vom Inhaltsbereich soll eine Grafik liegen (in der Testseite durch die rote Box symbolisiert), die 100px breit ist und die ruhig verschwinden kann, wenn das Browserfenster zu schmal wird.
Bei großem Viewport (so ab 1152px-Auflösung) verhält sich die Seite wie gewünscht. Der Hauptbereich ist zentriert und die Grafik liegt direkt daneben. Jetzt das Knifflige (hoffentlich nicht nur eine Idealvorstellung): Ich möchte, dass der Inhaltsbereich bis ca. 1000px Viewport-Breite an seiner Mindestgröße (740px) festhält und erst danach beginnt, mitzuwachsen. Das hätte den Effekt, dass die Grafik erst bei kleineren Fenstergrößen beginnt, sich zu verabschieden.
Ich hoffe, die Problemstellung ist verständlich. Hat jemand eine Idee, wie ich das hinbekommen könnte?

Grüße
Josh

[LX]

Es gibt zwar die Eigenschaft min-width, die der MSIE jedoch nicht versteht - an dieser Stelle muss man entweder auf das gewünschte Layout verzichten oder sich mit CSS-Expressions behelfen.

Gruß, LX

[Joshh]

Es gibt zwar die Eigenschaft min-width, die der MSIE jedoch nicht versteht - an dieser Stelle muss man entweder auf das gewünschte Layout verzichten oder sich mit CSS-Expressions behelfen.

Das ist klar und auch kein Thema. Wie auf der Testseite zu sehen, habe ich ja min-width verwendet. Der Inhaltsbereich verhält sich ja durchaus korrekt. In dem beschriebenen Fall möchte ich nur erzielen, dass z.B. bei einer 1024px-Auflösung die Grafik noch vollständig sichtbar ist. Wenn der Inhaltsbereich (also die eigentliche Seite) seine min-width länger beibehält hätte ich auch bei dieser Auflösung noch alles im Fenster (100px linker Rand + 740px Breite der Seite + 100px rechter Rand, respektive Grafik + vielleicht noch ein paar kleine margins = weniger als 1000px).
Wenn ich es hinkriege, dass mir ein Browser das so anzeigt, bekomme ich den IE auch in den Griff ;-)

Gruß
Josh

[Gernot Back]

Hallo LX,

Es gibt zwar die Eigenschaft min-width, die der MSIE jedoch nicht versteht - an dieser Stelle muss man entweder auf das gewünschte Layout verzichten oder sich mit CSS-Expressions behelfen.

Wieso? Der IE7 versteht doch min-width und der IE6 interpretiert width fälschlicherweise wie min-width! Diesbezüglich gibt es also kein Problem, es sei denn, man verwendet zu der Width-Angabe für den IE6 auch noch overflow:hidden.

Was die Max-Width angeht, hast du allerdings Recht, dass man hier für den IE6 auf JavaScript ausweichen muss.

Gruß Gernot

[ChrisB]

Hi,

und der IE6 interpretiert width fälschlicherweise wie min-width!

Nein, tut er nicht.

Das gilt fuer height, aber fuer width nicht.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

und der IE6 interpretiert width fälschlicherweise wie min-width!

Nein, tut er nicht.
Das gilt fuer height, aber fuer width nicht.

Ich wars’s nicht!!1elf ;-)

Live long and prosper,
Gunnar

[Gernot Back]

Hallo ChrisB,

Nein, tut er nicht.

Das gilt fuer height, aber fuer width nicht.

Möglicherweise reden wir ja aneinander vorbei, aber ich kann keinen prinzipiellen Unterschied im Fehlverhalten des IE6 bezüglich Width- und Height-Angaben erkennen:

Wenn ich einem Blockelement 10*10 Pixel und eine Hintergrundfarbe verpasse, dann stellen alle vernünftigen Browser und darüber hinaus sogar auch der IE7 ein Quadrat von 10 mal 10 Pixeln dar, aus dem Wörter, die länger sind, horizontal und weitere Zeilen vertikal herauslaufen, während beides die Box in den IE-Versionen darunter in beiden Dimensionen aufdehnt.

Wenn Josh also nur für den IE6 eine Angabe für Width über JavaScript (mit oder ohne Expression) regelt, sind die minimale und die maximale Breite  fixe Werte als String mit Maßeinheit und dazwischen entspricht sie dem Wert 'auto'. Die Fallunterscheidung kann er anhand der offsetWidth des Elternelements treffen.

Eine Zentrierung des Elements über margin:auto ergibt ohnehin nur Sinn, wenn die maximale Breite zum Tragen kommt, schadet aber auch in den anderen Fällen nicht, lässt sich also über einfaches CSS ohne Javascript setzen.

Gruß Gernot

[ChrisB]

Hi,

Möglicherweise reden wir ja aneinander vorbei, aber ich kann keinen prinzipiellen Unterschied im Fehlverhalten des IE6 bezüglich Width- und Height-Angaben erkennen:

Wenn ich einem Blockelement 10*10 Pixel und eine Hintergrundfarbe verpasse, dann stellen alle vernünftigen Browser und darüber hinaus sogar auch der IE7 ein Quadrat von 10 mal 10 Pixeln dar, aus dem Wörter, die länger sind, horizontal und weitere Zeilen vertikal herauslaufen, während beides die Box in den IE-Versionen darunter in beiden Dimensionen aufdehnt.

Dann nimm dir zwei Elemente, floate sie nach links und gebe ihnen bspw. jeweils 100px Breite.
Packe sie in ein (block level) Containerelement mit einer Mindestbreite von, sagen wir, 150px - fuer den IE < 7 also, unter der Annahme, er interpretiere width wie min-width, width:150px.

Lasse das in einem Viewport darstellen, der mehr als 200px Anzeigebreite zur Verfuegung stellt.
Browser, die min-width:150px verstehen, werden das Containerelement nun trotzdem so breit darstellen, wie es der Viewport erlaubt - und die beiden gefloateten Elemente haben nebeneinander Platz.

Und was passiert im IE < 7 ...?

MfG ChrisB

[Gunnar Bittersmann]

@@Gernot Back:

Was die Max-Width angeht, hast du allerdings Recht, dass man hier für den IE6 auf JavaScript ausweichen muss.

Aber CSS-Expressions nicht ständig, sondern nur bei Bedarf auswerten lassen. Das heißt in diesem Fall wohl, auch auf 'resize'-Events zu reagieren.

Live long and prosper,
Gunnar

[Joshh]

Okay, ein bisschen weiter bin ich inzwischen. Ich habe die Grafik jetzt nicht mehr nach außen verbannt, sondern zusammen mit dem Inhaltsbereich in ein div gepackt, das min-width: 850px; hat. Diese setzen sich zusammen aus den 740px min-width des Inhaltsbereiches + 10px Abstand zur Grafik + 100px für die Breite der Grafik. Die Seite verhält sich jetzt schon fast wie gewünscht.
Das einzige Problem, was noch bleibt, ist dass der Inhaltsbereich nicht mehr mittig im Browserfenster liegt, sondern seine Mittelachse um 55px links von der Viewportmitte liegt.
Die neue Frage lautet also: Wie kann ich ein Element, von dem ich die Breite nicht kenne, 55px rechts der Mitte positionieren?

Gruß
Josh

[ChrisB]

Hi,

Die neue Frage lautet also: Wie kann ich ein Element, von dem ich die Breite nicht kenne, 55px rechts der Mitte positionieren?

Zum Beispiel mit relativer Positionierung.

MfG ChrisB

[Joshh]

Zum Beispiel mit relativer Positionierung.

Meine Frage war glaub ich etwas missverständlich. Ich möchte nicht ein Element 55px rechts von der Mitte positionieren, wofür relative Positionierung durchaus das Mittel der Wahl wäre, sondern ich möchte, dass ein Element (im Beispiel die schwarze Box mit dem gestrichelten Rand) mit seiner Mittelachse 55px rechts von der Mittelachse des Viewports liegt. Mit anderen Worten: Im Moment ist das Element zentriert und ich möchte es jetzt noch 55px nach rechts verschieben.
Ziel ist, dass die weiße Box im Beispiel im Browserfenster _immer_ zentriert wird, ohne dass ich sie z.B. mit margin-left verschiebe, weil dann auf der linken Seite ein Rand entsteht, der bei einem kleinen Browserfenster nicht verschwindet.
Wenn die relative Positionierung auch hierfür geeignet ist, dann hilf mir bitte auf die Sprünge ;-)

Gruß
Josh

[Joshh]

Also inzwischen bin ich zu dem Schluss gelangt, dass mein Vorhaben mit CSS wohl nicht zu machen ist und bleibe bei der aktuellen Variante, da es so noch am akzeptabelsten ist (Seite nicht ganz zentriert, aber dafür verschwindet die Grafik nicht so schnell und an der linken Seite gibt es keinen störenden Rand).

Gruß
Josh