Guten Tag,
ich bin ein Fan von Frames und muss mich jetzt mit dem Aufbau von div-Layer beschäftigen und bin folglich darin noch nicht so bewandert…
Da ich Webseiten baue wo man nicht alles mit Scrollt, wie z.B. den Kopf der Seite die Navi-Leiste usw., möchte ich dem div-Layer mit dem textlichen Inhalten nen Scroll-Balken verpassen der sich der Browsergröße anpasst bzw. flexibel ist. Kopf und Fuß der Seite sollen fest an Browser Ober- und Unterkante stehen mit einer festen Größe. Also wie drei waagerechte Frames wovon sich nur der in der Mitte scrollen lässt und flexibel ist.
Aufbau anhand meines Codes: Der schwarze Kopf soll da stehen wo er ist, der grüne Fuß muss an die Unterkante des Browserfensters und der Rote „Inhalt links“ Layer soll sich zwischen Kopf und Fuß in der Höhe ausbreiten und bei Textüberfluss nen Scrollbalken erzeugen.
Natürlich funktioniert das bei mir nicht, sonst würd ich ja nicht fragen.
Gruß, doh
ich bin ein Fan von Frames und muss mich jetzt mit dem Aufbau von div-Layer beschäftigen und bin folglich darin noch nicht so bewandert…
Da ich Webseiten baue wo man nicht alles mit Scrollt, wie z.B. den Kopf der Seite die Navi-Leiste usw., möchte ich dem div-Layer mit dem textlichen Inhalten nen Scroll-Balken verpassen der sich der Browsergröße anpasst bzw. flexibel ist. Kopf und Fuß der Seite sollen fest an Browser Ober- und Unterkante stehen mit einer festen Größe. Also wie drei waagerechte Frames wovon sich nur der in der Mitte scrollen lässt und flexibel ist.
Aufbau anhand meines Codes: Der schwarze Kopf soll da stehen wo er ist, der grüne Fuß muss an die Unterkante des Browserfensters und der Rote „Inhalt links“ Layer soll sich zwischen Kopf und Fuß in der Höhe ausbreiten und bei Textüberfluss nen Scrollbalken erzeugen.
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div-Layer Test</title>
<style type="text/css">
@charset "utf-8";
.clearer {
clear:both;
}
html, body {
font-family:Calibri, Tahoma, Verdana, Arial, Helvetica, times;
text-align: center;
font-size: 11px;
margin:0;
min-height:100%;
height:auto !important; /* Für normale Browser */
height:100%; /* Für IE */
}
#root
{
width:100%;
min-height:100%;
height:auto !important; /* Für normale Browser */
height:100%; /* Für IE */
margin: 0px auto;
text-align: left;
color: #000000;
background-color: #BBBBBB;
}
#head
{
border: 1px solid #000000;
height:100px;
margin: 0px;
margin-bottom: 10px;
}
.navi_left
{
width: 180px;
float: left;
border: 1px solid #FF0000;
padding: 5px;
}
.content_left
{
width: 60%;
height:40em;
float: left;
overflow:auto;
border: 1px solid #FF0000;
padding: 10px;
margin-left: 10px;
}
.content_right
{
width: 160px;
float: left;
border: 1px solid #FF0000;
padding: 10px;
margin-left: 10px;
}
#footer
{
border: 1px solid #009900;
height: 100px;
margin:0;
margin-top:10px;
}
</style>
</head>
<body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation
</div>
<div class="content_left">
Inhalt links
</div>
<div class="content_right">
Inhalt rechts
</div>
</div>
<div class="clearer"></div>
<div id="footer">
</div>
</div>
</body>
</html>Natürlich funktioniert das bei mir nicht, sonst würd ich ja nicht fragen.
Gruß, doh
