Probleme mit DIV & height: 100%

[Christopher]

Moin moin,

also ich habe eine Homepage gebastelt bei der ich auf die Verwendung von  Frames verzichtet habe und statt dessen das Layout mit CSS gestalltet habe.

Die Einteilung der Seite ist:

• links, über die ganze Seitenhöhe ein Navigations-DIV
• oben bis zum rechten Seitenrand der Titel-DIV
• darunter bis zum rechten/unteren Seitenrand der Inhalts-DIV

Die Seite ist erreichbar unter www.brauhaus-gutshof.de

Das "Inhalts-DIV" ist scrollbar (overflow: auto) und der body (overflow: hidden) nicht.

Achja, bevor sich jemand über die vielen DIV's in der Navigation beschwert, das wird demnächst in eine Aufzählung umgewandelt und die Tabelle verschwindet auch noch aus der Startseite.

Nagut, am besten ist, Ihr schaut euch per der obigen Seite mal das "Gutshof-Team" an, da fällt der Fehler gleich auf.
Startet Ihr diese Seite www.brauhaus-gutshof.de/mitarbeiter/index.php

Im Firefox & Co sieht man gleich das nicht der ganze Inhalt auf eine Seite passt. Also blendet Firefox/Opera rechts neben dem "Inhalts-DIV" ein Scrollbalken ein mit dem man den Inhalt über den Hintergrund scrollen kann.

Beim IE wirds jetzt lustig, für den IE musste ich ein Extra-Tag einführen, da er ja auf nix reagiert. Okay, schaut ihr euch jetzt jedenfalls die Seite "Gutshof-Team" mal mit dem InternetExplorer an seht ihr das ganze Theater. DerIE merkt zwar auch das nicht alles auf eine Seite passt und blendet auch einen Scrollbalken ein, das Problem ist nur das der Scrollbalken "aus dem Bildschirm läuft", d.h. das Ende des Scrollbars ist nicht ersehbar.

Warum das so ist weiß ich. Mein Problem war und ist das der IE folgendes DIV:
#inhalt {
 visibility: visible;
 position: absolute;
 top: 170px;
 right: 5px;
 bottom: 5px;
 left: 210px;
 overflow: auto;
 }
nicht richtig lesen kann. D.h. er erstellt das DIV zwar, aber die Höhe des DIV's geht über den Seitenrand hinaus und es erscheint kein Scrollbalken. Deswegen habe ich folgendes eingefügt:
@media all {
 * html #inhalt {
  visibility: visible;
  margin-top: 180px;
  padding-bottom: 190px;
  padding-left: 210px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  }
 }
Aber auch das geht nicht ohne Probleme. Wegen "height: 100%" gibt es Probleme, der IE nimmt dann immer die gesamte(!) Höhe des Fensters, auch wenn das DIV erst bei "top: 200px" starten würde.
Das ist der Grund warum der Scrollbalken unten aus dem Fenster läuft. Der IE zeichnet ein DIV mit 100% Höhe. Wenn das DIV jetzt bei "top: 180px" startet, dann zeichnet der IE das DIV auch 180Pixel weit aus dem Bildschirm.
Damit der Nutzer jetzt jedoch trotzdem alles scrollen kann, habe ich unten einen Rand von 180Pixel eingefügt.
Naja, das Ergebnis sehr ihr ja. Man kann jetzt zwar alles sehen und scrollen, aber irgendwie sieht es dumm aus und der Benutzer könnte auch denken das die Seite noch nicht fertig ist.

Meine Fragen jetzt:

Hat jemand ne Idee wie ich das Problem in den Griff bekommen kann?
Wie schaffe ich es das die Seite im IE wie im FF/Opera aussieht?
Wie kann ich dem IE sagen das das DIV nur von Pos X -> Seitenende geht?
Wie kann ich den Scrollbalken normal bekommen?

[Ingo Turski]

Hi,

Die Einteilung der Seite ist:

• links, über die ganze Seitenhöhe ein Navigations-DIV

das leider nicht scrollbar ist, so daß je nach Fensterhöhe das Impressum als erstes unerreichbar ist. :-(

• oben bis zum rechten Seitenrand der Titel-DIV

das in meinem Fenster fast 1/3 der (für's Scrollen) nutzbaren Höhe in Anspruch nimmt, wodurch der Inhalt sehr chlecht präsentiert wird.
Hier fände ich eine Framelösung sogar nch besser, da ich dann zumindest die Möglichkeit hätte, das Inhaltsframe alleine aufzurufen. So aber ist diese Seite für mich so schlecht nutzbar (zumal in meinem Firefox das Scrollrad funktionslos ist), daß ich schon sehr an den Inhalten interessiert sein müßte, um mich weiter umzusehen.

Hat jemand ne Idee wie ich das Problem in den Griff bekommen kann?

Schaffe den wirklich unpraktischen overscroll-Bereich ab.

freundliche Grüße
Ingo

[Christopher]

Okay, Navi ist nicht scrollbar, soll es auch nicht sein, normalerweise müsste bei ner 1024x768er Auflösung aber alle Punkte zu sehen sein und kleinere Auflösung sind zu vernachlässigen.

Wenn ich mir die Seite auf meinem 17" Monitor anschaue ist das verhältnis Titel <-> Inhalt in Ordnung, weiß nicht mit welcher Auflösung du arbeitest oder wieviel Toolsbars du hast. Ich gehe vom "Otto-Normal-Verbraucher" aus, und der sie beim 17" alle Einträge.
Das Scrollen funktioniert seltsamerweise im IE gleich von Anfang an (aber da habe ich ja mein Hauptproblem mit dem Balken) und komischerweise mit dem 1.5er Firefox & Opera auch gleich. Nur beim 1.0er Firefox geht das Scrollrad nicht automatisch, warum auch immer.

Warum soll der unpraktisch sein? Im Prinzip ist das doch eine sehr praktische Sache, auch wenn es bei mir noch hier und da hakt? Aber ne, wie gesagt, im neuen Firefox funktioniert alles prima, scrollen auch und  der Code ist defintiv valid, sowohl HTML als auch CSS.
Hatte gehofft ne Idee,Antwort oder Anregung für mein IE Problem zu bekommen, den dieser Fehler sieht wirklich beschissen aus, das gebe ich zu.

[Ingo Turski]

Hi,

Wenn ich mir die Seite auf meinem 17" Monitor anschaue ist das verhältnis Titel <-> Inhalt in Ordnung, weiß nicht mit welcher Auflösung du arbeitest oder wieviel Toolsbars du hast.

Ich habe einen 19"-Monitor, aber das ist ja irrelevant. Meine Auflösung ist 1024*768 und mein Browserfenster enthält nur die nötigsten Leisten. Trotzdem sehe ich keine Deiner Seiten komplett und wenn ein Untermenü sichtbar wird, ist mindestens das Impressum weg. Übrigens finde ich es verwirrend und unpraktisch, daß das Unternenü in Unterseiten wieder zuklappt.

Ich gehe vom "Otto-Normal-Verbraucher" aus, und der sie beim 17" alle Einträge.

Aber muß trotzdem scrollen...

Warum soll der unpraktisch sein? Im Prinzip ist das doch eine sehr praktische Sache, auch wenn es bei mir noch hier und da hakt?

Das sehe ich anders. Wenn Du soviel Anzeigeplatz festzementierst, wünsche ich mir regelrecht einen Frame, den ich Fensterfüllend anzeigen kann.

freundliche Grüße
Ingo

[Christopher]

Tatsache ist, das die das so groß wollen.
naja, außerdem hat das ja mit dem Problem ansich nicht wirklich viel zu tun oder?

[Ingo Turski]

Hi,

Tatsache ist, das die das so groß wollen.

Ist ja ok - nur sollte ein so großer Header dann nicht fixiert sein.

naja, außerdem hat das ja mit dem Problem ansich nicht wirklich viel zu tun oder?

Kommt drauf an - wenn Du die Fixierung bzw. den overscroll-Bereich rausnimmst, hat sich dieses Problem auch gelöst.

freundliche Grüße
Ingo

[Der Martin]

Hallo,

Okay, Navi ist nicht scrollbar, soll es auch nicht sein, normalerweise müsste bei ner 1024x768er Auflösung aber alle Punkte zu sehen sein ...

auch wenn ich wiederhole, was hier schon hundertfach gepredigt wurde: Die Bildschirmauflösung hat *überhaupt nichts* damit zu tun, wieviel Platz im Browserfenster für die Anzeige zur Verfügung steht. Ich habe auch eine Auflösung von 1024x768, aber mein Browserfenster ist selten größer als ungefähr 800x600. Im Gegenteil, je größer die Bildschirmauflösung, desto kleiner ist oft das Browserfenster im Verhältnis zum gesamten Bildschirm.
Übrigens: Selbst wenn ich das Browserfenster maximiere, sehe ich bei 1024x768 den Link zum Impressum nicht - und ich habe schon sämtliche Symbolleisten ausgeblendet! Der letzte Navi-Eintrag, den ich unten noch sehe, ist "Bildergalerie". Wenigstens mal richtig geschrieben, wie wohltuend!

und kleinere Auflösung sind zu vernachlässigen.

Nein, auf keinen Fall. Du bearbeitest da eine gewerbliche Webseite. Die ist eine Art Aushängeschild für das Unternehmen. Einen Teil der Nutzer aus technischen Gründen auszuschließen und dann zu sagen, das sei vernachlässigbnar, ist schlechter Stil. Das ist genauso, als hättest du noch eine kleine Baugrube vor dem Eingang und sagst, ach, so groß ist die ja nicht, und wer da nicht drübersteigen kann, hat eben Pech.

Wenn ich mir die Seite auf meinem 17" Monitor anschaue ist das verhältnis Titel <-> Inhalt in Ordnung, weiß nicht mit welcher Auflösung du arbeitest oder wieviel Toolsbars du hast. Ich gehe vom "Otto-Normal-Verbraucher" aus, und der sie beim 17" alle Einträge.

Der Otto-Normal-Verbraucher ist als Idee ganz gut - aber was *ist* wirklich normal? Ich empfinde es zum Beispiel nicht als normal, dass man das Browserfenster im Vollbild betreibt. Ich kenne ein paar Leute, die das tun, aber es sind nur wenige. Du scheinst das aber stillschweigend vorauszusetzen.

Das Scrollen funktioniert seltsamerweise im IE gleich von Anfang an (aber da habe ich ja mein Hauptproblem mit dem Balken) und komischerweise mit dem 1.5er Firefox & Opera auch gleich. Nur beim 1.0er Firefox geht das Scrollrad nicht automatisch, warum auch immer.

Das ist ein Bug von Firefox 1.x, der bei den neuen Versionen behoben wurde.

Übrigens finde ich die Seite insgesamt, trotz der technischen Feinheiten, optisch sehr ansprechend!

Schönes Wochenende noch,
 Martin

[at]

Hallo.

Die Bildschirmauflösung hat *überhaupt nichts* damit zu tun, wieviel Platz im Browserfenster für die Anzeige zur Verfügung steht. Ich habe auch eine Auflösung von 1024x768, aber mein Browserfenster ist selten größer als ungefähr 800x600. Im Gegenteil, je größer die Bildschirmauflösung, desto kleiner ist oft das Browserfenster im Verhältnis zum gesamten Bildschirm.

Und ein weiterer Punkt: Je größer die Auflösung bei gleichzeitig geringer Bildfläche, desto größer die Wahrscheinlichkeit, dass der Nutzer einen höheren Schriftgrad vorgibt.
MfG, at

[Ashura]

Hallo Christopher.

Nichts zu deinem eigentlichen Problem, aber ein anderes: die Navigation ist etwas verwirrend.

Wähle ich „Räumlichkeiten“ an, so erhalte ich in der Navigation eine Auflistung der Unterseiten. Wähle ich aber eine davon aus, so ist diese Auflistung im Folgenden nicht mehr zu sehen, ich verliere den Faden.

Merkwürdig ist ebenfalls, dass die aktuelle Inhaltsseite unverändert bleibt, wenn ein Verweis mit einer solchen Auflistung der Unterseiten aufgerufen wird, konkret also bei „Räumlichkeiten“ und „Angebote“.

Insgesamt wäre es der Übersichtlichkeit auch sehr zuträglich, wenn die aktuelle Seite in der Navigation hervorgehoben und im besten Fall auch nicht verlinkt wird. Bei letzterem kann man sich natürlich streiten; ich zumindest vertrete die Auffassung, dass eine Seite nicht auf sich selbst verlinken sollte.

Einen schönen Samstag noch.

Gruß, Ashura