Aufteilung in drei Fenster

Status
Nicht offen für weitere Antworten.

Fabian Frank

Erfahrenes Mitglied
Grüß euch,

ich bin gerade an einem Projekt, bei dem es sich empfehlen würde, links eine Navigation, oben eine Info-Bar und den Content in einem Fenster Rechts unten anzeigen zu lassen (siehe Anhang).

Soweit, so gut. Spontan fallen mir drei Möglichkeiten ein:
- Frames
- Tabellen (bzw. Tabelle mit width: 100% und height: 100%)
- div-boxen

Zu Frames: Keine Chance. Ich habe bisher einmal mit Frames gearbeitet, fünfte Klasse. Nie wieder, zudem einfach veraltet...

Tabellen: Ja, wieder ein Fall für sich...Vorteile, Nachteile halt...

div-boxen: Das wär das, was ich mir erwartet habe. Das Layout steht bereits, da tummeln sich die ersten Fehler auf. Da ja die Info-Bar und das Content-Fenster width: 100% haben müssen, um auch größeren Auflösungen das Design nicht zu vermiesen, wird bei größerem Inhalt im Content Fenster eine Scrollbar angezeigt, bzw., sie ist vorhanden, wird eben nicht angezeigt, da ja das Fenster mit width: 100% bereits das komplette Browserfenster beherscht...

Um zu demonstrieren, was ich meine, hier der Code:
main.htm
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
<title>...</title>
</head>

<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<div id="nav_bar">Demo-Text<br /><br /></div>
<div id="info_bar">Demo-Text<br /><br /></div>
<div id="main">Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br />Demo-Text<br /><br /></div>
</body>
</html>


layout.css
PHP:
body {
	overflow: hidden;
	}

#nav_bar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 180px;
	height: 100%;
	background-color: #3291cf;
	z-index: 2;
	}

#info_bar {
	position: absolute;
	top: 0px;
	left: 180px;
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	z-index: 2;
	}
	
#main {
	position: absolute;
	top: 50px;
	left: 180px;
	width: 100%;
	height: 100%;
	background-color: #ebf2f5;
	overflow: auto;
	z-index: 1;
	}


Es würde mich freuen, wenn ich ein paar Anregungen zu weiteren Möglichkeiten oder zu den div-boxen bekomme.

Viele Grüße,
Fabi
 

Anhänge

  • grafik.gif
    grafik.gif
    718 Bytes · Aufrufe: 11
Hi,

da Mark ja schon die Favoriten in punkto CSS-Layouts genannt hat, empfehle ich dir als Zugabe das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken, das dir bei deinem Vorhaben ebenfalls eine große Hilfe sein dürfte, was die Ausrichtung / Positionierung der drei Seitenbereiche betrifft - insbesondere des Contentbereichs, der den restlichen Viewport in horizontaler und vertikaler Richtung "ausfüllen" soll.

Da es hier um die CSS-Positionierung eines Layouts geht, schiebe ich das Thema dann mal entsprechend ins CSS-Forum.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück