Containerbasiertes Layout: Bei zu kleiner Auflösung Scrollbalken

[Ste]

Hallo zusammen,

ich bin momentan an einem containerbasiertem Layout dran und würde gerne einen Scrollbalken anzeigen lassen, falls der Inhalt über den sichtbaren Bereich hinausgeht. Da ich alle Elemente mit position:relative positioniert habe, werden diese momentan bei einer zu kleinen Anzeigefläche nach unten verschoben.

Ich habe es schon mit overflow:scroll probiert, aber das bewirkt in diesem Fall nichts, die Elemente werden weiterhin nach unten verschoben. Hier der Link zum Ausprobieren: http://www.der-ste.de/stuff/ilvers/index.html

Für Antworten und Ideen danke ich schonmal im Voraus,

viele Grüße

Ste

[Jonathan]

Hallo Ste,

http://www.der-ste.de/stuff/ilvers/index.html

Also, ich sehe da einen Scrollbalken und kann auch scrollen. Ich benutze Firefox 2.

Jonathan

[Stefan]

Hallo Ste,

Hallo Jonathan,

Also, ich sehe da einen Scrollbalken und kann auch scrollen. Ich benutze Firefox 2.

danke für die Antwort. Ich meine nicht den normalen vertikalen Scrollbalken, sondern die Anordnung der Container im oberen Bereich der Website: Wenn zB. die Browserfenstergröße verkleinert wird, rutschen diese durch position:relative nach unten, falls sie sich nicht mehr im Anzeigebereich befinden. Ich würde stattdessen aber gerne einen (horizontalen) Scrollbalken anzeigen lassen, wie dies bei einem tabellenbasiertem Layout der Fall wäre. Die Container sollten also ihren Platz behalten und sich nicht an die Fenstergröße anpassen.

Viele Grüße

Ste

[Kai345]

[latex]Mae  govannen![/latex]

danke für die Antwort. Ich meine nicht den normalen vertikalen Scrollbalken, sondern die Anordnung der Container im oberen Bereich der Website: Wenn zB. die Browserfenstergröße verkleinert wird, rutschen diese durch position:relative nach unten, falls sie sich nicht mehr im Anzeigebereich befinden. Ich würde stattdessen aber gerne einen (horizontalen) Scrollbalken anzeigen lassen, wie dies bei einem tabellenbasiertem Layout der Fall wäre. Die Container sollten also ihren Platz behalten und sich nicht an die Fenstergröße anpassen.

Du gibst dem body eine entsprechende Breite als Vorgabe

Cü,

Kai

[Stefan]

Du gibst dem body eine entsprechende Breite als Vorgabe

Mit einer festen Breite funktioniert das - immerhin! :) Aber mein Layout sollte mit der Fensterbreite skalieren, von daher kann ich da keine feste Breite nehmen... :(

[Stefan]

Mit einer festen Breite funktioniert das - immerhin! :) Aber mein Layout sollte mit der Fensterbreite skalieren, von daher kann ich da keine feste Breite nehmen... :(

Mit min-width:...px; funktioniert das Skalieren zumindest - das muss ich dann eben eine Mindestauflösung festlegen.

Danke!

[Kai345]

[latex]Mae  govannen![/latex]

Mit einer festen Breite funktioniert das - immerhin! :) Aber mein Layout sollte mit der Fensterbreite skalieren, von daher kann ich da keine feste Breite nehmen... :(
Mit min-width:...px; funktioniert das Skalieren zumindest - das muss ich dann eben eine Mindestauflösung festlegen.

Leider ist der obere Bereich deiner Site schon vom Konzept extrem breit. Ich sehe da als Bilder die Box, das Logo und die Event-Area, alleine das sind (ohne Abstände) schon über 530px. Und dann noch eine Navi 5 * Bildbreite 83px also 415px .. da sind wir dann schon auf ~950px, selbst wenn alles dicht an dicht kleben würde.

Da ist nicht mehr viel Raum zum Skalieren, ohne daß die Elemente in den Text verrutschen. Das heißt, du müßtetst hier als min-width schon 1024px ansetzen.Und für diverse IE mußt auch noch basteln, weil der min-width einfach nicht kennt.

Insgesamt bei diesen Maßen bleibt wohl nur Verzicht auf Skalieren bzw. stark eingeschränkt oder eine Änderung des Konzepts (vielleicht die Navi links vertikal einbauen und vom Text umfließen lassen (Prinzipiell ähnlich wie dieses Beispiel) .. Oder auch ganz anders, falls du selber eine gute Idee hast ;)

Cü,

Kai

[Stefan]

Danke für deine Hinweise. Ich habe das Design bewusst so breit gewählt, weil ich eine 1024er Auflösung voraussetzen will und der Inhaltsbereich schön breit sein soll (für Bildergalerien, etc.). Daher ist auf der Header in der Breite hart am Limit. Mehr als 5 Navipunkte gibts dann halt nicht ;)

Die diversen IEs werd ich mal aussen vor lassen - ich denke mal, dass der Prozentsatz der Nutzer, die eine Auflösung <1024 UND ein IE < 6 haben in heutigen Zeiten recht klein ist. Hoff ich zumindest.

Also danke nochmal und schönen Abend noch,

Ste

[Kai345]

[latex]Mae  govannen![/latex]

Die diversen IEs werd ich mal aussen vor lassen - ich denke mal, dass der Prozentsatz der Nutzer, die eine Auflösung <1024 UND ein IE < 6 haben in heutigen Zeiten recht klein ist. Hoff ich zumindest.

Du hoffst wohl vergebens. Zum Einen betrifft es nicht IE < 6 sondern IE < 7 und somit mit IE6 immer noch einen der verbreitesten Browser, zum Anderen hat die Auflösung nichts mit der verfügbaren Anzeigefläche des Browsers zu tun. Nicht jeder hat den Briwser auf volle Breite gesetzt, teilweise sind Side- und Toolbars aktiv etc. Ich halte den Anteil der Leute, die somit weniger als 1024px effektiv zur Verfügung haben, für sehr groß.

Aber wenn du es unbedingt so willst:

body {  
  min-width: 1024px;  
}  
  
* html body {  
  width: 1024px;  
}

dann bekommen alte IE eine feste Breite und vernünftige Browser können nach oben skalieren. Zwar kann man auch für IE5/6 min-width similieren, aber den Aufwand würde ich auch nicht unbedingt treiben, weil sich neuere Browser zunehmend durchsetzen.

Hat "Der Martin" halt Pech gehabt ;)

Cü,

Kai

[Kai345]

[latex]Mae  govannen![/latex]

Du gibst dem body eine entsprechende Breite als Vorgabe
Mit einer festen Breite funktioniert das - immerhin! :) Aber mein Layout sollte mit der Fensterbreite skalieren, von daher kann ich da keine feste Breite nehmen... :(

Skalieren _und_ Positionierung ist üblicherweise immer eine heikle Sache, die Effekte, die dabei auftreten können, bekommst du ja gerade schon zu spüren. ;)

Tja, mit min-width kann man es im dem Fall auch nicht lösen, weil deine Elemente schon springen, wenn ich unter 1024px gehe. Wäre also nur für Großbildschirme eine Lösung ;)

Ohne jetzt tiefer in dein CSS einsteigen zu wollen (bin müde), würde ich versuchen, soweit es geht über entsprechende margin/padding-Angaben zu positionieren (evtl an manchen Stellen auch prozentuale Maßangaben)

Cü,

Kai

[Jonathan]

Hallo Stefan,

rutschen diese durch position:relative nach unten

position:relative hat damit nichts zu tun. Nur float:right. Das heißt entweder du nutzt nur position z.B. in verbindung mit left und top ohne float zur Ausrichtung, oder du gibst dem body eine entsprechende min-width (was im IE zu Umsetzungsschwierigkeiten führen könnte)

Jonathan