Problem mit Positionierung (position: fixed)

[olzu]

Hallo liebe selfHMTL - Gemeinde,

bevor ich hier geoutet werde, muss ich gestehen,
dass es sich bei folgendem Beitrag um ein Cross-Posting handelt.
Ich habe diese Frage vor kurzem bereits bei
http://spotlight.de/zforen/htm/t/forum_htm_1.html gestellt,
leider ohne aber die gewünschte Lösung bekommem zu haben.

Deshalb würde ich gerne hier einen weiteren Versuch starten -
vielleicht kann mir von euch jemand weiterhelfen.

Schaut euch bitte mal die Seite http://www.zubrod.de/test.htm an

Wenn euer  Browser position:fixed umgehen kann,
seht ihr auf dieser Seite seht zwei DIV-Container:
der Obere (mit gelbem Hintergrund) wurde mit Hilfe
von position:fixed am oberen Fensterrand platziert.

Der untere Container soll sich immer (durch einen Abstand x getrennt)
unter dem oberen DIV befinden.

Wenn ihr jetzt aber das Browserfenster verkleinert,
so dass es bei den Links ('Seite01' ... 'Seite08') einen
Zeilenumbruch gibt, seht ihr mein Problem:
Der untere Container wird vom gelben Container überlagert.

Wie muss das CSS für das weisse DIV aussehen,
dass es sich immer unter dem Oberem befindet?

Für euere hilfreichen Antworten bedanke ich mich im Voraus!

Viele Grüße aus Oberfranken
OLZU

[L00NIX]

Hallo

Vielleicht solltest du die Größe des oberen Containers beschränken auf 150px, dann liegt der andere genau drunter.

Anm.: Der IE (das ist das Mistding mit ziemlich großem Marktanteil ;o)) versteht position: fixed nicht!

Gruß
  L00NIX

[olzu]

Hallo L00NIX,

danke für deine Antwort.

Vielleicht solltest du die Größe des oberen Containers beschränken auf 150px, dann liegt der andere genau drunter.

Hm, dann verschwindet aber ggf. ein Teil des Inhaltes des oberen Divs.
Natürlich könnte ich mit overflow:scroll o.ä. arbeiten,
aber eigentlich sollte sich die Höhe des gelben DIV-Containers
am Inhalt orientieren.

Anm.: Der IE (das ist das Mistding mit ziemlich großem Marktanteil ;o)) versteht position: fixed nicht!

Ja, ist mir bekannt. Der IE bekommt später ein position:absolute zugeteilt.
Sooo wichtig ist mir das nicht, dass der Header immer und überall fix ist...

Gruß
  L00NIX

Gruss zurück
olzu

[L00NIX]

Vielleicht solltest du die Größe des oberen Containers
»»beschränken auf 150px, dann liegt der andere genau drunter.

Hm, dann verschwindet aber ggf. ein Teil des Inhaltes des oberen
Divs.
Natürlich könnte ich mit overflow:scroll o.ä. arbeiten,

overflow: auto wäre besser:

Passt es rein: kein Scrollbar

Passt es nicht: Scrollbar

Mit overfow:scroll _erzwingst_ du die Scrollbars.

aber eigentlich sollte sich die Höhe des gelben DIV-Containers
am Inhalt orientieren.

Dann empfehle ich eine Höhenangabe in em oder ex (also relativ) für
beide divs. em und ex sind Abhängig von der Schriftgröße. Wenn du
oben eine Grafik reinsetzt, kannst du zusätzlich mit min-height
arbeiten, was aber wiederum der IE nicht blickt.

Gruß
L00NIX

[olzu]

overflow: auto wäre besser:
Passt es rein: kein Scrollbar
Passt es nicht: Scrollbar
Mit overfow:scroll _erzwingst_ du die Scrollbars.

Danke für den Hinweis, war mir aber klar, deswegen auch "o.ä."  :-)

aber eigentlich sollte sich die Höhe des gelben DIV-Containers
am Inhalt orientieren.

Dann empfehle ich eine Höhenangabe in em oder ex (also relativ) für
beide divs. em und ex sind Abhängig von der Schriftgröße.

Trotzdem passt sich die Höhe nicht an, wenn die Schrift zwei- oder mehrzeilig umgebrochen wird...  :-(

Am liebesten wäre mir eine Positionierung in Abhänigkeit vom unteren Rand des gelben Containers.
Ist dies wirklich nicht irgendwie möglich?

Gruss
olzu

[wahsaga]

hi,

Am liebesten wäre mir eine Positionierung in Abhänigkeit vom unteren Rand des gelben Containers.
Ist dies wirklich nicht irgendwie möglich?

nein, da die fixe positionierung - genau wie absolute - das element aus dem elementfluss nimmt.

du könntest höchstens mit javascript die reale höhe des oberen abfragen, und das padding des unteren dann dynamisch anpassen - aber rein mit CSS sehe ich keine möglichkeit.

gruß,
wahsaga

[olzu]

Hallo,

auch dir vielen Dank für deine Antwort.

Am liebesten wäre mir eine Positionierung in Abhänigkeit vom unteren Rand des gelben Containers.
Ist dies wirklich nicht irgendwie möglich?

nein, da die fixe positionierung - genau wie absolute - das element aus dem elementfluss nimmt.

Das war die Aussage, die ich befürchtet habe...  :-(

du könntest höchstens mit javascript die reale höhe des oberen abfragen, und das padding des unteren dann dynamisch anpassen - aber rein mit CSS sehe ich keine möglichkeit.

So wie es aussieht, ist mein Ansatz damit hinfällig und ich muss mir
wohl was anderes überlegen...

Einen schönen Sonntag noch
OLZU

[Ingo Turski]

Hi,

So wie es aussieht, ist mein Ansatz damit hinfällig und ich muss mir
wohl was anderes überlegen...

richtig. position:fixed taugt nur bei Elementen, die unter den gängigen Bedingungen sowohl in den Anzeigebereich als auch die festgesetzten Box-Dimensionen passen. Zudem finde ich eine Fixierung eines oberen (und unteren) Bereiches unpraktisch: vermehrtes Scrolling und Ankerprobleme können daraus folgen.

freundliche Grüße
Ingo