Hallo zusammen!
Ich möchte gerne ein Layout erstellen, welches vom Prinzip her so aussieht wie eine Frameset-Site mit Header oben, Navi links, Content rechts und Footer unten. Problematisch wird es dabei, wenn es gilt, dass der Header und der Footer immer
an ihren Positionen bleiben sollen (soll sich also bei anderen Auflösungen und beim Resizing flexibel verhalten) und jeweils nur der Inhaltsbereich gescrollt werden soll; wie ein Frameset eben
So sollte es aussehen... (Skizze) [klick]
Ich bin auf folgende interessante Website gestoßen: "Frames" mit CSS [klick]. Dieses Beispiel habe ich gekürzt und angepasst:
Dies funktioniert auch wunderbar, nur leider muss ich links, neben dem Content DIV noch einen weiteren DIV-Container hinbekommen... Nur stecke ich grad vollkommen fest und hoffe, dass ihr mir weiterhelfen könnt
Gruß und Dank!
Ich möchte gerne ein Layout erstellen, welches vom Prinzip her so aussieht wie eine Frameset-Site mit Header oben, Navi links, Content rechts und Footer unten. Problematisch wird es dabei, wenn es gilt, dass der Header und der Footer immer
an ihren Positionen bleiben sollen (soll sich also bei anderen Auflösungen und beim Resizing flexibel verhalten) und jeweils nur der Inhaltsbereich gescrollt werden soll; wie ein Frameset eben So sollte es aussehen... (Skizze) [klick]
Ich bin auf folgende interessante Website gestoßen: "Frames" mit CSS [klick]. Dieses Beispiel habe ich gekürzt und angepasst:
HTML:
<?xml version="1.0"?>
<!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>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
border-top: 100px solid #fff;
border-bottom: 50px solid #fff;
z-index: 1;
}
body > #content {
top: 100px;
bottom: 50px;
height: auto;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 2;
}
#footer {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 50px;
margin: -50px 0 0 0;
z-index: 2;
}
</style>
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="content">
<p>Content</p>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>Dies funktioniert auch wunderbar, nur leider muss ich links, neben dem Content DIV noch einen weiteren DIV-Container hinbekommen... Nur stecke ich grad vollkommen fest und hoffe, dass ihr mir weiterhelfen könnt
Gruß und Dank!
