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
layout.css
Es würde mich freuen, wenn ich ein paar Anregungen zu weiteren Möglichkeiten oder zu den div-boxen bekomme.
Viele Grüße,
Fabi
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