nicht angemeldet
100% breites Div wird beim seitwärts scrollen "weggescrollt"
Hallo,
ich habe ein Problem und dazu ein Testcase erstellt:
< http://www.janus-wa.de/test/>
Mein Hauptproblem ist in erster Linie mein Container-Div (blauer Rahmen)
Dieses hat eine 100% Breite, genauso wie der Header (rot)
Der Content-Bereich (grüner Rahmen) hat hingegen eine feste Breite.
Mein Problem hängt nun mit dem seitwärts scrollen zusammen (ein Kunde hat mich auf das Problem bei seiner Website aufmerksam gemacht):
Wenn man das Browserfenster nun so weit in der Breite verkleinert, bis der Container kleiner wird als der Content-Bereich, so erscheint der vertikale Scrollbalken. Scrollt man diesen nun nach rechts, so werden der Container und der Header "zur seite gescrollt".
Jetzt ist es auf der eigentlichen Website ja so, dass der Container keinen Rahmen besitzt. Das ganze macht sich aber - ähnlich wie hier beim Header - bei einer Breadcrumbs-Leiste bemerkbar, die unter dem Header sitzt, eine gekachelte Hintergrundgrafik besitzt und immer rechts und links mit dem Viewport abschließen soll. Beim Scrollen "dockt" diese rechts nicht mehr an.
Ich brauche hier natürlich einen Lösungsansatz der auch im IE6 funktioniert.. :/
Was kann ich hier tun? Kennt jemand evtl. eine Referenzseite?
Vielen Dank für die Hilfe und viele Grüße
Ralf
-
Lass das width:100% einfach weg. Sollte dann funktionieren, da beim default-value "auto" sich der container sowohl dem browserfenster, als auch dem content anpasst. Ist das width:100% unerlässlich, musst du ein min-width in der breite des content-divs setzen. der IE6 sollte das sowieso wie gewünscht anzeigen (auch wenn es nach W3C falsch ist)
Gruß,
Niklas-
Der Container hat ohnehin schon keine "width: 100%"; und passt sich trotzdem nicht dem Inhalt an.. Danke, aber das hilft mir leide rnicht weiter :(
Gruß
Ralf-
Hallo,
tut mir leid, du hast recht. Dann setz container { min-width:40em; overflow:visible; }
Das erste für alle normalen Browser, das zweite für den IE (overflow:visible kannst du weglassen, ist eh standard, ich hab das nur zu verdeutlichungszwecken hingeschrieben). Ich meine, das auch schon in meinem letzten Post gesagt zu haben...
Gruß,
Niklas-
oh, du musst natürlich noch den rest der box (also das padding und border) von #site mit dazurechnen, damit du die gesamtbreite (die du dann für #container als min-width definierst) erhälst, also 40em + 2*3em + 2*5px. Wird in dem Fall problematisch :D
Gruß,
Niklas-
Servus Niklas,
alles schonmal probiert - nur das Problem bleibt immernoch der IE,
ich habe den Testcase nun nochmal so aufbereitet, wie ich es schonmal hatte (und du nun auch vorgeschlagen hast) Auf die em-Angaben habe ich nun verzichtet und zur Vereinfachung Pixelangaben genommen.
Der Content ist nun zentriert, um der eigentlichen Website nahe zu kommen.
Der Content passt sich durch die min-width dem Content an. Schonmal ein Problem weniger. Doch im IE will der Header einfach nicht die Breite seines Elternelements beim scrollen annehmen. Der rote Bereich wird beim Verkleinern des Browsers beim Scrollen wieder zur Seite geschoben, wodurch daneben wieder die weiße Hintergrund erscheint .. :(
< http://www.janus-wa.de/test/>
Allerdings will mir nicht so recht einleuchten, warum das mit dem Header passiert.
Übrigens, das gleiche "Problem" ist auch hier in dem Forum vorhanden:
Wenn das Browserfenster soweit verkleinert wird bis der rechte Browserrand auf die Textarea "Nachricht beantworten" trifft, erscheint der Scrollbalken. Scrollt man dann nach links, so wird der graue Header oben zur Seite geschoben und daneben erscheint weißer Hintergrund...-
im IE will der Header einfach nicht die Breite seines Elternelements beim scrollen annehmen. Der rote Bereich wird beim Verkleinern des Browsers beim Scrollen wieder zur Seite geschoben, wodurch daneben wieder die weiße Hintergrund erscheint .. :(
okay das ist mir entgangen. IE verhält sich hier sogar einigermaßen richtig. eventuell musst du dem header ein width:100% geben. dann stoßt du aber wieder auf das problem des paddings. also
#header { padding:0; width:100%; }
das padding musst du also irgendwie anders realisieren, notfalls mit einem zusätzlichen <h1> oder ähnlichem im header.
Beispiel:
<div id="header" style="width:100%; padding:0">
<h1 style="display:block; padding:1em">HEADER</h1>
</div>nicht schön aber selten.
Gruß,
Niklas
-
-
-
-
-