Seite verkleinern durch übergreifendes Div

[LeH]

Anordnung der Divs funktioniert nicht

Ich beziehe mich auf folgendes Tutorial:

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

Die Seite füllt ja den ganzen Bildschirm des Explorers aus.

Kann ich den ganzen Seiteninhalt in einen Div hauen und dem dann so 20 Pixel Abstand vom Fensterrand geben und ne Scrollbar? Wird das dann genauso aussehen, wie z.b. http://www.zeit.de ?

Halt mit Rand und Scrollbar?

edit:
Solche Angaben in der CSS Datei wie z.b.

top: 120px; /* Abstand zum oberen Fensterrand */

Sollten sich nun natürlich nicht mehr auf den Fensterrand beziehen, sondern auf die Grenzen zu der umfassenden div. Geht das? wie?


Leon

 

[SilentWarrior]

Sollten sich nun natürlich nicht mehr auf den Fensterrand beziehen, sondern auf die Grenzen zu der umfassenden div. Geht das? wie?

Sollte eigentlich mit position:relative funktionieren.

 

[LeH]

Hab die Idee noch einmal verworfen:
Jetzt habe ich es so gemacht. Im Browser siehts so aus wie im Anhang.

Wie bekomme ich nun die beiden Leisten linksgenau in die Lücken?

Tät gut wenn das wer wüsste.

edit:

hier ist der CSSCode.

body {
	background-color: #256656;
}

#mitte {
	position: absolute;
	top: 100px;		/* Abstand zum oberen Fensterrand */
	left: 120px;		/* Abstand zum linken Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	right: 100px;		/* Abstand zum rechten Fensterrand */
width: 680px;
margin: auto;
        overflow: hidden;	/* Scrollbalken unterbinden */
  border-width: 1px;
  border-style: solid;
  border-color: red;


}
#oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
        margin: auto;
	height: 100px;		/* Blockhöhe */
        width: 900px;           /* Blockbreite*/
	padding: 0;		/* Interpretation Boxmodell! */
	overflow: hidden;	/* Scrollbalken unterbinden */
  border-width: 1px;
  border-style: solid;
  border-color: red;

	
}
#links {
	position: absolute;
	top: 100px;		/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	width: 120px;		/* Blockbreite */
        height: auto;
        margin: auto;
	padding: 0;		/* Interpretation Boxmodell! */
	overflow: hidden;	/* Scrollbalken, falls notwendig */
  border-width: 1px;
  border-style: solid;
  border-color: red;
	

}
#unten {
	position: absolute;
	left: 0;		/* Abstand zum linken Fensterrand */
	bottom: 0;		/* Abstand zum unteren Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 50px;		/* Blockhöhe */
        width: 900px;
        margin: auto;
	padding: 0;		/* Interpretation Boxmodell! */
	overflow: hidden;	/* Scrollbalken unterbinden */
  border-width: 1px;
  border-style: solid;
  border-color: red;
	

}
#rechts {
	position: absolute;
	top: 100px;		/* Abstand zum oberen Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	width: 100px;		/* Blockbreite */
        height: auto;
        margin: auto;
	padding: 0;		/* Interpretation Boxmodell! */
	overflow: hidden;	/* Scrollbalken unterbinden */
  border-width: 1px;
  border-style: solid;
  border-color: red;

}

Also mit FIREFOX sieht es aus wie oben. Mit IE noc völlig falsch. Ich versuche ersteinmal alles mit Firefox hinzubekommen. Vielleicht muss ich, damit es im IE klappt auch noch diese Quirksmode sache richtig einstellen.

Im Anhang ist jetzt außerdem noch die Ansicht im IE. Könnt ihr mir sagen, wie ich jetzt weiter vorgehen soll ? Weil dieser Status is noch sehr wirr und halt net perfekt.
Leon