Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?
zurück: Textfeld mit Dropdownmenü aktivieren weiter: Dummes CSS-Anfängerproblem (Tabellenformatierung) Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Feedback Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Eberh@rd
Ergonomie-Junkie


Verfasst am:
30. Okt 2009, 09:40
Rufname:

Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV? - Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?

Nach oben
       

Hi Forum,

angenommen, eine Webseite enthält einen Content-DIV, der mittels Scrollbar rauf und runter gescrollt werden kann.

Klar ist erstmal, dass in dem Content-DIV natürlich auch Grafiken enthalten sein können, die dann (in den Content eingebettet) ebenso rauf und runterscrollen.

Ist es aber auch möglich, eine Grafik sozusagen in dem Content-DIV zu verankern, wobei die Grafik jedoch eine andere z-Position hat, und wobei die Grafik (außerhalb des Content-DIV) irgendwo auf der Seite angeordnet ist?

Sprich, die Grafik müsste sich mit der Srollposition des Content-DIV's rauf und runter bewegen, aber außerhalb der Begrenzungen des Content-DIV positioniert werden können.

Ist so etwas möglich?

Vielen Dank schon mal für Tipps,

Grüße Eberh@rd
Gast



Verfasst am:
17. Dez 2009, 13:04
Rufname:

AW: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV? - AW: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?

Nach oben
       

Für beide Elemente die Eigenschaft "position:scroll" setzen.
Dann bleiben beide an der selben Stelle. (Auch beim Scrollen)

Mit "left:", "right:", "top:" und "bottom:" kannst du die Elemente dann unabhängig voneinander auf dem Dokument platzieren.
Eberh@rd
Ergonomie-Junkie


Verfasst am:
13. März 2012, 10:32
Rufname:


AW: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV? - AW: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?

Nach oben
       

Eberh@rd am 17. Dez 2009 um 12:14 hat folgendes geschrieben:
Danke, werde ich bei nächster Gelegenheit ausprobieren!

Grüße Eberh@rd.

Eberh@rd am 13. März 2012 um 06:41 hat folgendes geschrieben:
Muss nochmal darauf zurückkommen...

Habe das "inzwischen" ausprobiert, aber wenn ich für die besagte Grafik "position:scroll" setze, dann schaffe ich es nicht, der Grafik eine Position (auch nur teilweise) außerhalb der Begrenzungen des Content-DIV zu geben. Stattdessen bleibt die (nun mit dem Content-DIV mitscrollende) Grafik immer innerhalb der Begrenzungen des Content-DIV.

Was nun?

Grüße Eberh@rd

Eberh@rd am 13. März 2012 um 09:02 hat folgendes geschrieben:
Zur Verdeutlichung mal anhand eines Beispiels:

Hier auf der legendären Demo-Seite von Stu Nicholls:
tha holy grill

...kann man ja den Content wunderbar scrollen, während Menü und Header per CSS schön fixiert bleiben.

Könnte man jetzt eine Grafik so auf der Seite positionieren, dass diese mit dem Content scrollt, jedoch in Z-Richtung "oberhalb" von Menü und/oder Header schwebt, und somit beim Scrollen über Menü und/oder Header drüber geht (sprich Menü und/oder Header teilweise verdeckt)?

Oder kann ein mit dem Content scrollendes DIV immer nur innerhalb des Bereichs angezeigt werden, den der Content belegt?

Oder z.B. hier: Statisch, relative, absolute und feste Positionierung

Könnte hier der "statisch positionierte Container" (links im Content) in der Z-Anordnung auch oben über den "fest positionierten Container" drüber laufen, wenn der Content gescrollt wird? Also so, dass der "statisch positionierte Container" den "fest positionierten Container" beim Scrollen verdeckt?

VIELEN Dank schonmal für diesbezügliche Erfahrungswerte,

Grüße Eberh@rd

OK also gerade mal probiert: (siehe Anhang)

Somit kann der "absolut positionierte Container" und der "relativ positionierte Container" (zusammen mit dem Content) oberhalb des "fest positionierten Containers" vorbeiscrollen!

(Beim "statisch positionierten Container" ist es mir nicht gelungen, diesen oberhalb des fest positionierten Containers zu positionieren bzw. vorbeiscrollen zu lassen.)

Wie auch immer, auf jeden Fall sind das schon mal gute Nachrichten für mein Vorhaben.

Grüße Eberh@rd

--
Hier noch der schnell gehackte Quelltext, damit sich auf Statisch, relative, absolute und feste Positionierung die abgebildete z-order ergibt:
Code:
#PositionStatic { z-index:3; position: static; width: 300px; background: url(mediaevent_files/bg010000.gif); padding: 10px; border: 1px solid silver; }
#PositionStatic p { background: white; padding: 4px; border: 1px solid silver; }
#PositionAbsolute { z-index:4; position: absolute; width: 300px; left: 600px; top: 200px; background: url(mediaevent_files/bg010000.gif); padding: 10px; border: 1px solid silver; }
#PositionAbsolute p { z-index:5; background: white; padding: 4px; border: 1px solid silver; }
#PositionReative { z-index:5; position: relative; width: 300px; left: 400px; background: url(mediaevent_files/bg010000.gif); padding: 10px; border: 1px solid silver; }
#PositionReative p { z-index:6; background: white; padding: 4px; border: 1px solid silver; }
#PositionFixed { z-index:2; position: fixed; width: 300px; top: 200px; left: 400px; background: url(mediaevent_files/bg010000.gif); padding: 10px; border: 1px solid silver; }
#PositionFixed p { z-index:1; background: white; padding: 4px; border: 1px solid silver; }



Test.png
 Beschreibung:
 Dateigröße:  51.13 KB
 Angeschaut:  1409 mal

Test.png


Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge HTML & CSS Forum: Frage: <div>tabelle</div> statt <Frame>tab 0 Resool 273 24. Feb 2014, 18:07
Resool Frage: <div>tabelle</div> statt <Frame>tab
Keine neuen Beiträge MS Expression Web Forum: Formatierungs-Verschiebung im Browser durch Nutzung von DIV 3 ladwest 867 09. Mai 2012, 17:53
womaninweb Formatierungs-Verschiebung im Browser durch Nutzung von DIV
Keine neuen Beiträge HTML & CSS Forum: Grafik relativ in einem DIV positionieren geht nicht 2 Eberh@rd 1849 28. März 2012, 20:47
Eberh@rd Grafik relativ in einem DIV positionieren geht nicht
Keine neuen Beiträge PHP & JavaScript Forum: Grafik auswechseln in Abhängigkeit von einer Scrollposition 0 Eberh@rd 1019 28. März 2012, 18:07
Eberh@rd Grafik auswechseln in Abhängigkeit von einer Scrollposition
Keine neuen Beiträge Macromedia Dreamweaver Forum: div problem 1 Gast 912 01. März 2012, 10:57
womaninweb div problem
Keine neuen Beiträge MS Expression Web Forum: Grafik einfügen mit Bildvorschau möglich? 0 gubheinicke 1569 31. Mai 2011, 19:33
gubheinicke. Grafik einfügen mit Bildvorschau möglich?
Keine neuen Beiträge HTML & CSS Forum: div Container dem Browser Fenster anpassen 5 Sugarfree 5519 14. Apr 2011, 16:23
womaninweb div Container dem Browser Fenster anpassen
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2445 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge HTML & CSS Forum: grafik etwas verschieben... zu hülf! :-) 2 Computer-Beratung 4501 12. Feb 2010, 15:19
Computer-Beratung grafik etwas verschieben... zu hülf! :-)
Keine neuen Beiträge HTML & CSS Forum: Spalte+Grafik die 2te 1 Mihawk 1581 28. Dez 2009, 13:03
Gast7 Spalte+Grafik die 2te
Keine neuen Beiträge MS Expression Web Forum: Div Positionieren 4 HBM00 885 14. Jul 2009, 15:56
HBM00 Div Positionieren
Keine neuen Beiträge HTML & CSS Forum: Navigation in div verrutscht je nach Version 2 chopsui 1594 04. Jun 2009, 21:54
chopsui Navigation in div verrutscht je nach Version
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel-Formeln