ich bin gerade dabei, für einen Bekannten eine Website etwas zu redesignen. Nun möchte ich eine Box über die volle Browserhöhe haben, auch wenn nur wenig Inhalt in der Box ist. Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
Hier die Webseite: Testseite /Nicht wundern, im Moment gehen nur die ersten 2 Seiten.
Achja, der IE 5.5 scheint das Box-Modell nicht so richtig zu verstehen, da ist die Box (class=„main“) immer linksbündig. Wie kann ich das denn abstellen?
Du müsstest in html, body und #main die Höhe auf 100% setzen um auch die volle Fensterhöhe auszufüllen.
Also, die Box ist jetzt immerhin größer geworden. Aber leider so schätzungsweise 120% Das ist also nicht die Lösung.
Der IE 5.5 ist extrem alt und wird sehr selten verwendet. Ich würde mir da keine weiteren Gedanken drüber machen.
Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.
Ist es schon. Würde sagen, du hast noch irgendwo einen Abstand nach oben oder unten (sowohl Innen- als auch Außenabstand wäre möglich).
Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.
Der 5.5 ist aus dem Jahr 2000. Der Support (und somit auch alle Sicherheitsupdates) wurden seitens Microsoft bereits eingestellt. Willst Du deinen Besuchern durch eine korrekte Ansicht in diesem alten „Stück“ wirklich empfehlen mit einer riesen Sicherheitslücke herumzusurfen? Übrigens haben seit 2006 nur noch weit weniger als 1% der Internetsurfer einen solchen Browser. Meinst Du die kommen alle zu dir?
So, nachdem ich nun ausgeschlafen bin, auf ein neues. Also, beim ersten Versuch der Änderung habe ich das Semikolon vergessen. Daraufhin war die Box länger als das angezeigte Browserfenster. Nachdem ich die Semikolons eingefügt habe, ist es wieder beim alten, die Box ist zu kurz und nicht browserfüllend.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Ersetze den Doppelpunkt durch ein Semikolon.
Allerdings wird deine Seite dann länger als 100%. Das hängt wie bereits erwähnt damit zusammen, dass du Innen- und Außenabstände verwendest, welche die Gesamthöhe beeinflussen. Das ist richtig und von den CSS-Definitionen her („CSS-Boxmodell“) auch normal so.
Wenn du unbedingt 100% Höhe haben willst, musst du etwas in die Trickkiste greifen. Du bekommst dann allerdings u.U. ein inneres Scrollfenster, was Geschmacksache ist. Vielleicht hilft dir für diese Konstruktion das weiter: Layout mit 100 % Höhe bei fixiertem Header und Footer
erstmal danke für die Antwort. Mit dem Doppelpunkt/Semikolon ist mal wieder bewiesen, dass man ab einem gewissen Müdigkeitslevel nüscht mehr programmieren, auszeichnen, designen, oder wie auch immer, sollte. Ich habe mir mal den Link angeguckt, und die von Dir schon erwähnte Scrollleiste (bei der Demo-Seite) ist auch dort zu sehen.
Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig. Ist das clientabhängig, oder kann ich sagen, wenn es bei mir auf den Browsern nicht da ist, dann ist es auf denselben Browsern bei anderen Leuten (egal welches OS, welche Auflösung) auch nicht zu sehen? Oder verhält sich das eher wie das Wetter: mal regnet es und dann auch wieder nicht? Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box.
Das mit dem Doppelpunkt sind Flüchtigkeitsfehler, die passieren jedem, anfangs mehr, später weniger, oder man such gezielt danach, wenn etwas nicht stimmt.
Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig.
Von der Bildschirmauflösung bzw. -höhe und vom Inhalt der Seite.
Längerer Inhalt erweitert die Höhe und dann passt halt irgendwann nix mehr rein, so dass man scrollen muss.
Ist somit in zweierlei Hinsicht unberechenbar:
a) ist der Inhalt i.d.R. flexibel und veränderbar
b) hast du auf die Bildschirmgrößen deiner Besucher keinerlei Einfluss.
Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box
Bei konstantem Inhalt und fixer Breite ist die Box ja auch immer gleich hoch. Nur eben durch margin- und Padding bedingt nicht immer 100%. Ich sehe darin überhaupt kein Problem. Wenn du nicht zu viel Inhalt auf eine Seite packst, dann erübrigt sich das Scrollen ohnehin. Und ansonsten gibt’s die normale Browser-Scrollbar, das ist bei den meisten Seiten doch gang und gebe.
An deiner Stelle würde ich die 100% height-Werte bei den Div’s rausnehmen. Wenn ohnehin genügend Platz ist, dann passt es, ansonsten muss man eben etwas scrollen - was man bei 100% Höhe und größerem Inhalt ja auch ohnhin müsste.
Naja, da sich die Inhaltsmenge ja von Seite zu Seite ändert, ist auch die Größe der Box unterschiedlich. Aber damit kann ich besser leben, als das da mitten in der Seite eine Scrollbar ist. Ich hab die Höhenangaben überall raus gemacht. Fertig!
Ich glaub Efchen sagt das öfters. Man muss kompromisbereit sein
Gruß thuemmy
P.S. Weißt Du zufällig einen CSS-Hack, damit die Box im IE 5.5 auch zentriert dargestellt wird?
Vom Bildschirm, der Bildschirmauflösung oder auch der Marke des Herstellers ist bei Webseiten gar nichts abhängig.
Es ist abhängig vom Viewport oder auch Browserinnenbereich. Nicht nur, dass Du in einem Browser für gewöhnlich durch Tool- oder Sidebars nicht so viel Platz hast, wie die Bildschirmauflösung hergibt, nein, man kann auch sein Fenster verkleinern. Selbst bei einer Auflösung von 1600x1200 könnte das Browserfenster nur 478x863px groß sein. Der verfügbare Platz wäre dann wahrscheinlich noch geringer. Außerdem kann nur JavaScript die Bildschirmauflösung ermitteln.
Also nochmal kurz, weil das oft falsch gemacht wird: Webseiten - Kein Bezug zur Auflösung.
Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Ich denke den kann man mittlerweile guten Gewissens vernachlässigen, es sei denn, deine Seite wird vorwiegend in unterentwickelten Ländern angesehen, deren Updates nicht in dem Tempo erfolgen wie bei uns.
Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Nö, ich hab den nicht mehr Ich glaube auch, bevor ich mir da Gedanken über so ein Urgestein mache, lass ich den lieber aussen vor, zumal die Seite ja trotzdem zu benutzen ist.
IE5 (Windows) bis IE6 wenden text-align auch auf Blockelemente an:
body {
text-align: center;
}
.main {
text-align: left;
width: 720px;
}
Es ist keine Browserweiche nötig.
mit text-align: left für .main wird der linksbündige Textfluss wieder hergestellt.
Wie das in der 5.5-Mac-Version aussieht weiß ich nicht. Im Schlimmsten Fall bleibt es wohl einfach linksbündig.
Das fehlerhafte Boxmodell (IE5 und IE5.5) ist meist einfach zu umgehen.
Ohne Testumgebung würde ich das aber auch lassen.
Da die Boxen eher kleiner dargestellt werden bleiben die Seiten oft auch so nutzbar. img-Bilder oder Tabellen sprengen das Layout wegen dem knapperen Innenabstand aber schon.
Mann kann das fehlerhafte Boxmodell auch testweise für den IE6 herbeiführen.
Mit einem beliebigen Zeichen vor dem Doktype rutscht der IE6 in den Quirks-Modus und zeigt die Boxen mit dem gleichen Fehler wie der IE5 an.
Für gelegentliche Tests reicht das vielleicht.