DIV soll beim Scrollen stehen bleiben

soezkan

soezkan

Erfahrenes Mitglied
Hallo zusammen,

frohes neues Jahr ...

Ich wusste nicht wonach ich suchen soll bzw. habe nichts gefunden:
wie kann ich zwei DIVs in einem drei-Spalten-Layout statisch machen,
so dass sich nur das mittlere DIV beim nach unten scrollen bewegt?

Mein Layout:
HTML: 
<div id="left">...statisch...</div>
<div id="center">...beweglich beim scrollen...</div>
<div id="right">...statisch...</div>

Kann mir da bitte jemand einen Tipp geben? Die JS die ich gefunden habe
zittern irgendwie wenn man scrollt.

Danke!

Liebe Grüße
Soezkan
 
Zuletzt bearbeitet:
anke schonmal für die Antworten!

Das komische ist nur, dass jetzt mein gesamtes inneres Layout nach links
verschoben wird:
HTML: 
<div id="left">...statisch...</div>
<div id="center">...beweglich beim scrollen...</div>
<div id="right">...statisch...</div>

So ca. 20px bricht das nach links aus, wenn ich
HTML: 
html>body {  /* nur fuer moderne Browser! */
	position: fixed;
}
in meinem CSS angebe.

Hm komisch,,,,
 
Wofür soll diese Regel überhaupt dienen:
Code: 
html>body {  /* nur fuer moderne Browser! */
	position: fixed;
}
... wenn die DIV-Blöcke fixiert werden sollen?

In chmees verlinktem Beispiel folgt in dem Selektor noch der ID-Bezeichner des zu fixierenden DIVs:
Code: 
html>body #fixiert {  /* nur fuer moderne Browser! */
    position: fixed;
}


Daraus folgt für deinen Fall:
Code: 
html>body #left,  html>body #right {  /* nur fuer moderne Browser! */
    position: fixed;
}


mfg Maik
 
Danke für die Antwort.

Allerdings klappt das bei mir einfach nicht!
Wenn ich das so mache wie hier angegeben, dann sind
die Positionen meiner beiden fixierten DIVs 0,0 was heisst
dass Sie ganz links, ganz oben angezeigt werden =>
die Seite fällt also auseinander.
Habe das versucht über margins zu "retten" aber das
klappt für alle Browser ausser dem IE 7 + 8

Das ist das Schema meiner Seite:
HTML: 
<html>
<body>
<div id="centerboxmain">
	<div id="LeftColumn">... soll FIXIERT sein ...</div>
	<div id="CenterColumn">
        <div id="HeaderBox">... header bla ...</div>
        <div id="NavigationBox">... Navigation ...</div>
        <div id="ContentBox">
		... bleibt mit SCROLLING ...
		</div>
		<div id="FooterBox">... footer bla ...</div>
	</div>
	<div id="RightColumn">... soll FIXIERT sein ...</div>
</div>
</body>
</html>

Meine Seite: http://www.rodurago.net/
Wenn man mit dem Firebug da mal im CSS das
div#LeftColumn mit einem position: fixed versieht,
dann weiß man was ich meine.

Danke für Zeit und Nerven. Ich verstehs halt echt
nicht wieso das nicht einfacher geht :(

Liebe Grüße
Soezkan
 
#centerboxmain muß in diesem Fall zusätzlich mit position:relative versehen werden, damit sich die fixe Positionierung der Nachfolgeelemente auf seinen Anzeigebereich, und nicht auf den Fensterrand bezieht, denn das ist die Voreinstellung für position:fixed.

Desweiteren ist für #CenterColumn eine entsprechende relative Positionsangabe von links vonnöten, damit der Spaltenblock nicht unter den linken Spaltenblock rutscht.

mfg Maik
 
Danke.

Habe es so gemacht:
HTML: 
#centerboxmain {
	...
	position: relative;
}

...

div#LeftColumn {
	...
	position: fixed;
}

...

div#RightColumn {
	...
	position: fixed;
	left: 999px;
}

...

div#CenterColumn {
	...
	position: relative;
	left: 140px;
}

Aber der IE mag das nicht und klappt auseinander un ds
DIV LeftColumn wird bei selbem garnicht mehr angezeigt.
Das nervt ... wahrscheinlich bin ich zu ungeduldig :confused:
Noch Rat?

Lieben Dank,
Soezkan
 
Ich hab mir das gerade mal mit einer eigens erstellten Testseite in den Browsern näher betrachtet, und komme zu dem Schluß, dass dein Vorhaben sich in einem horizontal zentrierten DIV mit zwei fixierten Spaltenblöcken nicht umsetzen lässt, denn entweder rutscht der rechte Spaltenblock unter/über den linken, oder sitzt außerhalb des Elternelements am rechten Fensterrand, wenn er zusätzlich die Positionsangabe right:0 erhält, weil sich diese Positionsangabe wieder auf den Fensterrand bezieht.

Mit einem einzigen fixierten Spaltenblock würde es, wie von mir eben geraten, tadellos funktionieren. Sobald aber ein zweiter hinzukommt, spielen die Browser ausnahmslos verrückt.

Von daher wirst du dir hier etwas anderes überlegen müssen, denn mit drei Spaltenblöcken funktioniert dies in den Browsern nur auf diese Weise, wodurch der mittlere Spaltenblock aber eine relative Breite besitzen würde:

HTML: 
<body>
     <div id="leftCol">leftCol</div>
     <div id="centerCol">centerCol</div>
     <div id="rightCol">rightCol</div>
</body>
CSS: 
#leftCol {
position:fixed;
left:0;
width:100px;
}
#centerCol {
position:absolute;
left:100px;
right:100px;
}
#rightCol {
position:fixed;
right:0;
width:100px;
}

mfg Maik
 
Ganz lieben Dank für den hilfreichen Rat!

Ich werde dann wohl erstmal auf diese Variante mit fixierten DIVs verzichten.

Einen schönen Tag
Soezkan
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück