Seiteneinteilung mit Layern

Status
Nicht offen für weitere Antworten.
Cyberbird

Cyberbird

Mitglied
Moinsen!

Ich bin gerade dabei, folgendes Seitenlayout umzusetzen:
www.cyberbird-design.com/layout.htm

Mein Problem dabei: die Layer in der Mitte sollen immer bis auf den Boden ragen und der untere Layer soll quasi als footer immer unten auf der Seite "aufliegen". Wie ihr seht, werden die Layer in der Mitte ab einer bestimmten Internet-Explorer-Fenstergröße zu groß und lassen den ungeliebten Scrollbalken rechts erscheinen, während sich der Footer-Layer auch in undefinierbare Gefilde schiebt.

Hier schnell das Stylesheet im Quelltext:
<div id="oben" style="position:absolute; left:10px; top:10px; width:900px; height:161px; z-index:1; background-color: #00CCCC; layer-background-color: #00CCCC; border: 0px none #000000;"></div>

<div id="mitte-links" style="position:absolute; left:9px; top:172; width:158px; height:80%; z-index:2; background-color: #CCFFCC; layer-background-color: #CCFFCC; border: 0px none #000000;"></div>

<div id="mitte-mitte" style="position:absolute; left:168px; top:172px; width:564px; height:80%; z-index:3; background-color: #FFCCFF; layer-background-color: #FFCCFF; border: 0px none #000000;"></div>

<div id="mitte-rechts" style="position:absolute; left:732px; top:172px; width:178px; height:80%; z-index:4; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 0px none #000000;"></div>

<div id="unten" style="position:absolute; left:10px; bottom:0%; width:900px; height:45px; z-index:5; background-color: #CCCCFF; layer-background-color: #CCCCFF; border: 0px none #000000;"></div>


Weiß jemand, wie ich dieses Problem löse?
 
Meintest du, dass das so angezeigt werden soll?
(Hier mal ein Link)
http://www.nasicunion.de/tutor/layout.html

Quellcode:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<DIV ID="gesamt" style="position:absolute; top: 0px; left: 0px; width: 900px; height: 95%; overflow: hidden">
<div id="oben" style="position:absolute; left:10px; top:10px; width:900px; height:161px; z-index:1; background-color: #00CCCC; layer-background-color: #00CCCC; border: 0px none #000000;"></div>
<div id="mitte-links" style="position:absolute; left:9px; bottom:56px; width:158px; top: 172px; height: 100%;z-index:2; background-color: #CCFFCC; layer-background-color: #CCFFCC; border: 0px none #000000;"></div>
<div id="mitte-mitte" style="position:absolute; left:168px; top:172px; bottom:56px; width:564px; height: 100%; z-index:3; background-color: #FFCCFF; layer-background-color: #FFCCFF; border: 0px none #000000;"></div>
<div id="mitte-rechts" style="position:absolute; left:732px; top:172px; bottom:56px; width:178px; height: 100%; z-index:4; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 0px none #000000;"></div>
<div id="unten" style="position:absolute; left:10px; bottom:0px; width:900px; height:45px; z-index:5; background-color: #CCCCFF; layer-background-color: #CCCCFF; border: 0px none #000000;"></div>
</div>
</body>
</html>
 
Okay, nächster Tag, nächstes Problem:

http://www.cyberbird-design.com/layer-test/layout.htm
Stylesheet: http://www.cyberbird-design.com/layer-test/style/stadt-winsen-stylesheet.css

Die Seite soll wie folgt funktionieren: der Kopfbereich bleibt immer dort, wo er gerade ist. Wenn man das Browserfenster verkleinert, ändert sich die Höhe von "Navigation", "Inhalt" und "Werbung" so, dass sie immer unterhalb des Kopfes beginnen und bis zum Boden der Seite reichen, der Layer "Inhalt" jedoch NUR bis auf den Fußlayer. Die aufwendig gestaltete, genau passende Welle am Boden soll immer am Boden sein, als Abschluss der Seite.
Wie ihr seht, gibt es folgende Probleme:
1.) Der Layer mit der Welle sitzt nicht genau auf dem Ende der Seite, sondern lässt noch die 3 Inhaltslayer unter ihm hervorblitzen.
2.) Wenn ich viel Inhalt im Inhaltslayer habe, erscheint der Scrollbalken - allerdings sitzt der Inhalts-Layer mal hinter, mal auf und mal weit über dem Wellen-Layer. Er soll IMMER genau auf dem Wellen-Layer sitzen.
3.) Komischer Weise erscheint der Scrollbalken des Inhalts-Layers erst sehr spät (ihr müsst mal das Browserfenster kleiner machen), was an der 100%igen Höhe liegen mag.

Wenn jemand einen oder ein paar mehr Lösungsvorschläge hat, wäre ich echt happy, mein Chef macht mir hier schon die Hölle heiß... ("Du bist doch sonst so der Freak, nu mach das mal bis Freitag fertig!" :( ).
Andernfalls nehme ich auch gerne Vorschläge für einen komplett anderen Lösungsweg an...

Danke im Voraus!
 
Zuletzt bearbeitet:
Ich hab' mir das mal grad angeschaut und dabei kammen mir folgende Fragen:

Sollen die 3 Layer in der Mitte (Navigation, Inhalt und Werbung) sich wirklich an die größe des Browser-Fensters anpassen?
Ich meine, es sieht ein wenig sch... oder lustig aus, wenn man das Browserfenster um einiges kleiner macht. Die Layer sind dann so kurz, dass man damit bestimmt nicht mehr vernünftig arbeiten kann. Selbst wenn dann Scrollbalken kämmen.

Außerdem, ich hab' 'ne Auflösung von 1024x768 auf meinem Computer und der Scrollbalken bei "Inhalt" ist auch im maximierten Zustand (also immer) zu sehen.
Der geht erst bei einer höheren Auflösung weg.

Zudem nehme ich mal an, dass die "aufwendig" :rolleyes: ;) gestaltete Welle genauso breit sein soll, wie der Rest der Seite?
Das ist jedoch nicht der Fall, sondern die Welle ist ein ganzes Stück zu kurz.

Ich für meinen Teil hätte es doch so gemacht, dass die Seite eine feste (absolute) Größe hat und sich nicht dem Browser-Fenster anpasst.
Dass ist bei der Seite in der Breite ja auch schon der Fall, aber in der Höhe nicht.

Und übrigens:
Soll die Seite so etwa mit allen Browsern laufen?!
Schau dir die Seite mal mit Opera an!
Denn Opera unterstützt keine Scrollbalken in DIVs.
Dort wird der DIV-Bereich einfach soweit nach unten fortgesetzt, bis der Inhalt seine volle Größe hat (also bis weit, weit unter die Wellen).

Vielleicht solltest du die ganze Sache (oder zumindest den Inhalt) in Frames packen?!
Da hättest du das Problem mit den Scrollbalken nicht.
 
Zu deinen Fragen:

1.) Ja, die 3 Layer sollen sich an die Seite anpassen, Befehl vom Chef.
2.) Ich hab ne Auflösung von 1600x1200 und wenn ich das Fenster kleiner mache, kommt der "Inhalt"-Scrollbalken erst, wenn bestimmt 30% schon längst außerhalb des Fensters liegen.
3.) Die aufwendig gestaltete Welle soll am Ende in der Tat so breit sein wie die Seite, das vorliegende Exemplar ist nur ein Dummy (es geht ja um's Prinzip).
4.) Feste Größe ist quasi der letze Ausweg, aber damit wär's natürlich um einiges einfacher. Das oberabsolutgeile an der jetzigen Planung ist ja, dass die Welle immer unten auf dem Browserfenster aufsitzt. Chefsache halt :rolleyes:
5.) Dass Opera keine Scrollbalken in div's darstellt, halt ich für ein Gerücht, ich hab's ja selber schon gebaut: http://www.agroovement.de/
6.)iiiiihh... Frames.... ;) Wir leben im CSS-Zeitalter, Frames sind einfach nicht mehr zeitgemäß.
 
Das hällst du für ein Gerücht?!
Dann lass' ich die Gerüchte-Küche doch mal brodeln!
opera.jpg

:eek: / :eek: - :eek: . :eek: : :eek: _ :eek:
Siehst du da Scrollbalken?
Ich seh' nur, dass das Gästebuch, dass mit dem IE wunderbar angezeigt wird hier weit, weit und noch viel weiter unter den unteren Seitenrand hinaus geht.
Zu dem anderen, da werd ich gleich mal schaun.
 
Zuletzt bearbeitet:
Sooo, nun bin ich endlich fertig (und das meine ich wörtlich ;) ).
Mit DIV-CSS-Methoden alleine konnte ich es nicht hinbiegen.
Dazu müsste man es irgendwie schaffen, die Eigenschaften eines absoluten & eines relativen DIVs zusammen zu bringen.
So weit ich das hier feststellen konnte, ist das nicht möglich (ich lass' micht aber gern' vom besseren belehren, falls jemand das hinkriegt).
Deswegen musste ich mir eine Tabelle zur Hilfe nehmen!
Mit dem MS IE funktioniert es mit Auflösungen von 640x480 bis 1280x1024 funktioniert es (mehr wollte ich meinem Monitor lieber nicht antun).
Die Welle muss natürlich noch deutlich vergrößert werden, damit man die Scroll-Leisten nicht sieht.
Ich hab' das auch mal mit Opera probiert. Und, siehe da keine Scrollleiste, sondern der Inhalt der Mitte wurde stattdessen einfach unter der Welle fortgesetzt (übrigens: ich hab' Opera 5.12 und CSS im vollen Umfang aktiviert).
Und ich denke an Netscape müsste es auch noch angepasst werden (da dürfte es wahrscheinlich Probleme damit geben, dass die Spalten zu weit nach unten gehen). Das konnte ich leider nicht mehr testen, da ich Netscape dieses Wochenende wieder deinstalliert hab'.
Wenn du aber im vollen Umfang und mit einfachen Mitteln alle Browser unterstützen willst, MUSST du wohl auf Frames und ein IFrame zurückgreifen.
Auch, wenn diese deiner Meinung nach veraltet sind (<Font> wäre dann ja auch schon veraltet, aber es greifen ja nicht alle immer auf Style="Font..." zurück ;) .
Also, zum angucken kannst du ja mal volgenden Link benutzen:

http://www.nasicunion.de/tutor/layer-test/layout.htm

Ich pack' das Ganze auch noch als zip in den Anhang.
 

Anhänge

Das mit den Tabellen ist mir auch schon in den Sinn gekommen, danke für die prompte Beispiellieferung. Schade, dass man doch immer wieder Grenzen von Stylesheets entdecken muss.
Übrigens hast du die Frage auf das "Warum" deines Opera-Problems schon beantwortet: Opera stellt Scrollbalken in div's erst ab Version 6 dar...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück