nicht angemeldet
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?
Der Martin