fixer bereich scrollbar
torsten
- css
0 suit
Moin!
Ich habe gelernt, dass fixe Bereiche {position: fixed;}
wegen eben dieser Fixierung nicht scrollbar sind wenn das Browserfenster kleiner ist als der Bereich...
Sieht jemand eine Möglichkeit das zu umgehen? Ggf. eine Zentrierung des div Bereiches mit Javascript bei Zentrierung des div mittels absoluter Positionierung?
Geht sowas? Oder besser wie geht sowas? Bzgl. der absoluten Positionierung mit css hab ich keine Probleme... mit dem scrollbar machen des "Hintergrundes" und scrollbar machen bei zu kleinem Fenster allerdings schon...
Beispiel für Funktion (hier mit css Fixierung)
momentanes css mit fixed & absoluter Zentrierung
Danke schon mal für potentielle Antworten.
Danke schon mal für potentielle Antworten.
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
user: suit
pass: rebell
In deinem Fall musst du aber zusätzlich im body 2 Elemente Elemente positionieren je übereinanderpositioniert sind und jeweils die volle Höhe und Breite des Viewports ausfüllen und über ein overflow: auto verfügen.
In deinem Fall musst du aber zusätzlich im body 2 Elemente Elemente positionieren je übereinanderpositioniert sind und jeweils die volle Höhe und Breite des Viewports ausfüllen und über ein overflow: auto verfügen.
danke erst mal.
Ich verstehe, aber ich verstehe nicht... das hätte sicher die volle Scrollbarkeit zur Folge aber würde doch auch dafür sorgen, dass bei großem Fenster das der zentrierte Bereich mit weggescrollt wird sobald der Fall overflow eintritt?!
Ich verstehe, aber ich verstehe nicht... das hätte sicher die volle Scrollbarkeit zur Folge aber würde doch auch dafür sorgen, dass bei großem Fenster das der zentrierte Bereich mit weggescrollt wird sobald der Fall overflow eintritt?!
Ja, das ist der Sinn davon (sofern du das möchtest).
Bei deiner Lösung ist es aktuell so, dass bei einer Viewportgröße < den Abmessungen deines zentrieren Elements das Ding (teilweise) unscrollbar nach links oben verschwindet. Ich sehe das als massives Bedienungsproblem ;)
Das steht übrigens auch so auch in meinem Artikel im Abschnitt "Probleme mit gängigen Lösungen" :)
moin!
Ja, das ist der Sinn davon (sofern du das möchtest).
Neeeeee!
Bei deiner Lösung ist es aktuell so, .. unscrollbar nach links oben verschwindet. Ich sehe das als massives Bedienungsproblem ;)
Jein, meine Lösung ist eine Krücke aber wenn ich das position:fixed entferne bleibt das ganze hübsch zentriert, verschwindet rechts aber bleibt voll scrollbar... das kannste hier nachvollziehen (nicht meckern, die hiddenlinks kommen wech)
Vielleicht hab ich mich nicht korrekt ausgeschrieben:
Fall 1) das zentrierte Element soll zentriert sein und bleiben so lange das Fenster größer ist als der zentrierte Bereich aber der hintergrund (also das darunter liegende div) soll scrollbar sein.
Fall 2) erst wenn das Fenster kleiner ist als der zentrierte Bereich kann / soll der zentrierte Bereich durch scrollen verschwinden oder erscrollbar sein.
Mit position:fixed lässt sich Fall 1 realisieren, aber nicht Fall 2 mit meiner oder deiner Lösung lässt sich Fall 2 realisieren aber nicht Fall 1
Das steht übrigens auch so auch in meinem Artikel im Abschnitt "Probleme mit gängigen Lösungen" :)
hab ich gelesen, guter artikel... wieso du den vor suchmaschinen verseckst versteh ich allerdings nicht?! beschreibt aber nicht mein problem / lösung und trifft bei mir auch so nicht zu.
Das steht übrigens auch so auch in meinem Artikel im Abschnitt "Probleme mit gängigen Lösungen" :)
hab ich gelesen, guter artikel... wieso du den vor suchmaschinen verseckst versteh ich allerdings nicht?!
Weil die Seite eigentlich nocht nicht fertig ist.
beschreibt aber nicht mein problem / lösung und trifft bei mir auch so nicht zu.
Darum sagte ich ja auch, dass du 2 extra Elemente brauchst:
<body>
<div id="uno">
<div id="top"></div>
<div id="container">zentrierter inhalt</div>
</div>
<div id="dos">
hintergrund
</div>
</body>
Der Inhalt von "uno" entspricht dann meinem Beispiel.
moin!
Der Inhalt von "uno" entspricht dann meinem Beispiel.
ich bin deinem Beispiel gefolgt, vermutlich hab ich aber offensichtlich Mist gebaut denn die beiden zusätzlichen elemente lösen die zentrierung ganz auf, vermutlich liegt der fehler bei mir...
ich hab mir einfach dein Beispiel gekrallt aber das funzt so ned schau selbst
Om nah hoo pez nyeetz, torsten!
auch wenn es nicht direkt darum geht: Warum hast du denn so entsetzlich viele divs?
Matthias
hallo M
auch wenn es nicht direkt darum geht: Warum hast du denn so entsetzlich viele divs?
hab damit Rahmen gebastelt wie du sicher schon gesehen hast... sicher gibt's da auch andere Lösungen die mir nicht eingefallen sind. Die div's sind bald fast alle wech...
Om nah hoo pez nyeetz, torsten!
und ein Lob für deine Seite, die Idee mit den Thumbs gefällt mir, auch wenn sie etwas klein sind.
Rahmen: Ab CSS3 kann man auch den Rahmen eine Hintergrundgrafik zuweisen oder einem Div (anderen Elementen auch) mehrere Hintergrundgrafiken geben. Ein kleiner Artikel dazu unter selfhtml.apsel-mv.de/hintergrund/hintergrund.html. Dort ist auch ein Link zur Verwendung von border-image
.
Matthias
dir auch "Frieden in ihren Herzen, Glück auf allen Wegen" matthias,
& danke für die blumen :) allerdings hab ich's nicht erfunden, allerdings so zusammengefügt ;-)
Ein kleiner Artikel dazu unter selfhtml.apsel-mv.de/hintergrund/hintergrund.html. Dort ist auch ein Link zur Verwendung von
border-image
.
|
unter klein hätte ich mir irgendwie was anderes vorgestellt, damit fang ich aber erst an wenn ich mein problem nr 1 gelöst habe... die grafiken... hm sind klein stimmt... aber mit meinem recht undynamischen seitenaufbau (für kleine bildschirme z.b.) geht die minigrafik als kompromiss einher...
ui, bin gerade selbstpersönlich über einen möglichen lösungsansatz gestolpert...
allerdings nur ein teilerfolg...
<div id="uno">
<div id="dos">
hintergrund ... 100x ... hintergrund
</div>
<div id="top"></div>
<div id="container">
<div id="content">
inhalt
</div>
</div>
</div>
und das css ~~~css
#uno {height:100%; width:100%; position:absolute; margin:0; padding:0; overflow:auto;}
#dos {height:100%; width:100%; position:absolute; margin:0; padding:0; overflow:auto;}
doch leider verschwindet bei kleinem browserfenster im FF der hintergrund völlig. im IE ist alles ichtbar aber wie... grrrusel!
hat noch jemand ne idee?
[mfg](http://www.jungmann.to/) [torsten](http://www.jungmann.net)
--
Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
moinmoin!
Warum "hüpft" das zentrierte div im IE immer an die Oberkante wenn ich in den Hintergrund klicke?
<div id="uno">
<div id="dos">
hintergrund ... 100x ... hintergrund
</div>
<div id="top"></div>
<div id="container">
<div id="content">
inhalt
</div>
</div>
</div>
[mfg](http://www.jungmann.to/) [torsten](http://www.jungmann.net)
--
Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
Om nah hoo pez nyeetz, torsten!
Was soll denn das DIV IESpacer? mMn tut sich der IE schwer mit leeren Elementen. Auch <html> und <body> lassen sich formatieren, sodass das, was dein div "spacer" ist durchaus auch <body> werden kann und dann verpasst du <html> ein wenig padding und schon sollte es funktionieren. Bei den Bezeichnungen halte ich mich an deine aktuelle Seite.
Matthias
Hallo Matthias,
das mit dem Spacer is oll und kommt bald wech. Irgendwo hab ich gelesen man bräuchte den an dieser Stelle, weil irgend ein IE Version xy-ungelöst irgend ein leeres Element mit irgendwelchem Mindestabstand braucht usw. oder so...
Aber eigentlich geht's um dieses projekt... das Hüpfen hab ich wegbekommen in dem ich den divs ein z-index verpasst habe und das div #dos neu angeordnet habe... allerdings sieht die seite jetzt gruselig aus wenn ich das Fenster verkleinere außerdem komme ich nicht mehr an die Scrollbalken des hintergrundes ran (bei fenster < #content) ist nur noch ne Frage der Zeit bis ich raus habe wie's geht aber schätze dann gibts bereits ein neues CSS das ich wieder nicht verstehe :)
Außerdem hab ich Null Ahnung wie's bei meiner neuen Lösung mit der Browserkompatibelität aussieht? Könenn das denn die meißten darstellen? Auch die etwas älteren?
hm
Fragen über Fragen
Außerdem hab ich Null Ahnung wie's bei meiner neuen Lösung mit der Browserkompatibelität aussieht? Könenn das denn die meißten darstellen? Auch die etwas älteren?
IE6, IE7, IE8, Opera 10.10, Firefox 3.6 sehen ok aus - mehr hab' ich auf die schnelle nicht getestet.
Om nah hoo pez nyeetz, torsten!
die overflow-eigenschaft bei #uno sorgt dafür.
Matthias
hi matthias,
dank deines tipps habe ich herausgefunden dass sich "overflow:visible" ganz gut eignet um die scrollerei zu ermöglichen... trotzdem funzt das immer noch nicht weil das scrollbare div "#dos" teilweise oder ganz verschwindet... wenn ich body oder #uno oder #dos eine mindestbreite oder -höhe verpasse hab ich doppelte srolleisten oder sehe nur weisses
grrrrrrrr
Om nah hoo pez nyeetz, torsten!
overflow:visible; ist sozusagen die Voreinstellung. Ein Scrollen sollte dadurch eigentlich nicht ermöglicht werden.
Matthias
moin!
hm irgendwie werden einem div beim fenster verkleinern vertikale scrollbalken zugewiesen, geb ich beiden divs ein visible mit auf den weg scrollt das zentrierte fenster mit (was es ja nicht soll) bei hidden ist der hintergrund nicht mehr scrollbar, was auch nicht sinn des erfinderversuchers ist...
hab auch versucht mit display: rumzuexperimentieren... bringt auch nix, jedenfalls nicht so wie ich die sache anzupacken verstehe :(
Om nah hoo pez nyeetz, torsten!
Ich gehe jetzt mal von 2 ineinander liegenden Divs aus.
1. Möglichkeit: das äußere hidden und das innere visible (das muss man dann explizit bestimmen, da es sonst den Wert des äußeren übernehmen würde) bewirkt scrollbalken für das innere Div bei entsprechender Fenstergröße die dann auch wieder "nicht verwendbar" werden.
2. Möglichkeit: das äußere visible (d.h. ggf keine Angabe von Overflow) bewirkt einen ggf. scrollbaren Inhalt, zu dem dann natürlich auch das innere Div gehört.
Wenn du möchtest, dass sich das äußere Div unter dem inneren wegbewegt, könnte position: fixed;
helfen.
Vielleicht ist dieses Tutorial für dich hilfreich
Matthias
moin!
Ich gehe jetzt mal von 2 ineinander liegenden Divs aus.
eigentlich sinds ja gewissermaßen drei...
<div id="uno">
<div id="dos">
Hintergrund
</div>
<div id="top"></div> /* zum zentrieren */
<div id="container">
Inhalt
</div>
</div>
- Möglichkeit: das äußere hidden und das innere visible
bedeutet auch dass dass der container mit scrollt sobald der body überläuft <-schlecht, brrrrr!
- Möglichkeit: das äußere visible (d.h. ggf keine Angabe von Overflow) bewirkt einen ggf. scrollbaren Inhalt, zu dem dann natürlich auch das innere Div gehört.
bewikrkt, dass sich das "container" div ganz unten am ende anreiht incl div "top"
Wenn du möchtest, dass sich das äußere Div unter dem inneren wegbewegt
jaaaaaaaaaaaaa :)
könnte
position: fixed;
helfen.
nein :( weil der container dann nicht mehr erscrollbar ist wenn browserfenster klein... er verschwindet unwiederrufbar
... :(
mein zu fixierendes fenster ist aber min 600x600px groß, das ist unmöglich als klein zu bezeichnen (?!) deswegen suche ich eine lösung ohne fixed...
tutorial les ich heute abend... danke für den link