Tabellenloses Basislayout

LeH · 28. März 2005

Guten Tag,
ich habe Probleme mit der Erstellung eines Tabellenlosen Basislayoutes.
Ich habe mir das Tutorial

http://www.tutorials.de/tutorials187137.html

durchgelesen und größtenteils verstanden. Doch will ich meine Aufteilung ein wenig verändern. Meine Aufteilung soll so aussehen wie im Anhang angegeben.

Änderungen:

Die Webseite soll scrollbar sein, der Scrollbalken sollte im Hauptfenster erscheinen (ganz rechts am Rand).

Mainframe und linke Navi sollten auch kein Scrollbalken haben (das ist zwar ein Problem was ich selber bewältigen kann, aber ich will halt, dass die Datei im Mainframe nach unten hin vollständig verlängert wird und dann die gesamte Seite gescrollt wird. Kann ich vielleicht mit php include machen, wenn das so funktioniert.)

Ganz unten kommt noch ein Footer hin auf der Zeichnung nicht zu sehen.

Außerdem soll um die Seite halt ein Rand sein, also nicht bei beiden Längenangaben 100%.

Wie muss ich das alles angehen? Ich habe da gestern gesessen aber ich komme da einfach nicht klar. ^^

Vielleicht fehlen mir die richtigen Gedanken oder so etwas. Wie mache ich das alles?

Vielen Dank

Leon

simonef · 30. März 2005

Hallo Leon,

meinst du das vielleicht so:

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS-Beispiel 1: position_fixed</title>
  
  <style type="text/css">
  <!--
  html, body {
  	margin: 50;
  	border: 50;
  	padding: 50;
  }
  body {
  	background-color: #fff;

  }
  #mitte {
  	position: absolute;
  	top: 150px;		/* Abstand zum oberen Fensterrand */
  	left: 250px;		/* Abstand zum linken Fensterrand */
  	bottom: 50px;		/* Abstand zum unteren Fensterrand */
  	right: 100px;		/* Abstand zum rechten Fensterrand */

  /* nur für IE: */
  	width: expression((document.body.clientWidth - 400) + "px");
 				/* left-Wert + right-Wert = 300 */
  	height:1800;
  }
  #mitte .inhaltDiv {
  	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
  }
  #oben {
  	position: absolute;
 	top: 10;			/* Abstand zum oberen Fensterrand */
  	left: 50;		/* Abstand zum linken Fensterrand */
  	right: 0;		/* Abstand zum rechten Fensterrand */
  	height: 150px;		/* Blockhöhe */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #cfc;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression(document.body.clientWidth-100 + "px");
 				/* left-Wert + right-Wert = 0 */
  }
  #oben .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #links {
  	position: absolute;
  	top: 160px;		/* Abstand zum oberen Fensterrand */
  	left: 50;		/* Abstand zum linken Fensterrand */
  	bottom: 0;		/* Abstand zum unteren Fensterrand */
  	width: 200px;		/* Blockbreite */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #ffc;

  /* nur für IE: */
  		height:1800;
  }
  #links .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #unten {
  	position: absolute;
  	left: 200px;		/* Abstand zum linken Fensterrand */
  	bottom: 0 !important;	/* Abstand zum unteren Fensterrand */
  	bottom: -1px;		/* nur für IE */
  	right: 0;		/* Abstand zum rechten Fensterrand */
  	height: 50px;		/* Blockhöhe */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #fcf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 200) + "px");
 				/* left-Wert + right-Wert = 200 */
  }
  #unten .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #rechts {
  	position: absolute;
  	top: 160px;		/* Abstand zum oberen Fensterrand */
  	bottom: 50px;		/* Abstand zum unteren Fensterrand */
  	right: 50;		/* Abstand zum rechten Fensterrand */
  	width: 100px;		/* Blockbreite */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #ccf;
  	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  		height:1800;
  }
  #rechts .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #aussen{
  position: absolute;
  background: blue;
  
  }
  -->
  </style>
  </head>
  
  <body>

  <div id="mitte"><div class="inhaltDiv">
  <h1>#mitte:</h1>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
 </p>
  </div></div>
  
  <div id="oben"><div class="inhaltDiv">
  <h2>#oben</h2>
  </div></div>
  
  <div id="links"><div class="inhaltDiv">
  <h2>#links:</h2>
  <p>
  Lorem ipsum dolor sit amet, conset
  </p>
  </div></div>
  
  <div id="rechts"><div class="inhaltDiv">
  <h2>#rechts:</h2>
  <p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...
  </p>
  </div></div>

  </body>
  
  </html>

(Bei mir im IE müsste es so stimmen...)

Das ist das Beispiel 1 aus dem genannten Tutorial und einfach nur ein paar Werte "verschoben" und Scrollbalkeneinstellungen geändert....bin mir aber nicht wirklich sicher, ob du das so meinst.

cu
Simone

Tabellenloses Basislayout

LeH

Anhänge

simonef

Mitglied

Neue Beiträge