Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.10.2008, 23:02
JohnnyBoy JohnnyBoy ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 33
JohnnyBoy befindet sich auf einem aufstrebenden Ast
Standard Seitenlayout mit DIV's in variabler Höhe

Guten Abend,

bin ein bisschen am verzweifeln... Ich möchte ein Seitenlayout mit DIV's gestalten. Dabei soll es eine Kopf- und eine Fußzeile geben. Diese sollen immer sichtbar sein. Dazwischen soll ein viewport sein, der sich der Größe des Browserfensters anpasst. In diesen Viewport kommt der Content, den ich mit margin-left:250px; von der Navigation (im Viewport)in Abstand bringen möchte. Die Navigation selbst soll auch gefixed sein.

Hoffe ich habe nicht wirrr geschrieben.

Ohne die Fixpositionen klappt es. Das ist auch der Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Home</title>
	<style type="text/css" media="all">
		html, body {
			height: 100%;
		}
		body {
		   margin:  0;
		   padding: 0;
                   background-color:blue;
		   min-height:100%;
		   }
		
		#head {
		   height:50px;
		   background-color:pink;
		   }

                   
		#viewport {
		  height: 100%;
		  background-color:red;
		  }
		
		#foot {
		   position: relative;
		   height:20px;
		   margin-top: -20px;
		   background-color:white;
		   }

               #content {
                   display:block; 
	           overflow:auto; 
	           position:absolute;  
	           top:50px; 
	           bottom:20px; 
	           width:2600px; 
	           margin-left:251px; 
                   border:none;
                   background-color:yellow;
                   }

	</style>
</head>

<body>

	<div id="viewport">
          <div id="head">header</div>
          <div id="content"> </div>
        </div>
        
        <div id="foot">footer</div>
	   
</body>
</html>
Der Content ist 2600px breit, die Kopf- und Fußzeile geht aber nur auf Bildschirmgröße mit. Damit muss ich leben, wenn ich divs nehme, oder?

Vielleicht kann mir jemand ein Tip geben, was ich lesen muss. Oder wie ich an die sache hern gehen muss, oder geht dieser Fall besser mit Tabellen (die habe ich schon fertig )

Liebe Grüße

JohnnyBoy
Mit Zitat antworten
Sponsored Links