Elemente im zentrierten Layout anordnen

Ich bin leider noch nicht so wirklich fit, was CSS- Programmierung betrifft, jetzt drückt der Schuh & ich komme nicht weiter.

Folgendes Problem: Ich habe eine Seite erstellt, deren Inhalt unabhängig von der Auflösung zentriert dargestellt wird. Der verwendete Container nimmt den gesamten Seiteninhalt auf.

#container {

width: 920px;
height: 604px;
margin: 0 auto;

}

Der Layoutbereich soll variabel gestaltet werden, den unteren Abschluß bildet die über der Fußzeile angeordnete Navigationsleiste. Die Fußleiste selbst enthält ein Banner und eine variable Grafik am rechten Seitenrand des Containers (rahmenlos verbunden). Das Layout enthält Textelemente, die teilweise in den Eckbereich hineinfließen bzw. diesen überlappen.

/* ----------------Layoutbereich------------------ */

#layout {

float: left;
width: 920px;
height: 450px;

}

/* ----------------Navigation---------------------- */

#navbar {

float: left;
width: 739px;
height: 100px;
padding-left: 0px;
padding-top: 450px;
}

/* ----------------Banner---------------------- */

#banner {

float: left;
width: 739px;
height: 54px;
padding-left: 0px;
padding-top: 550px;
}

/* ----------------Eckbild---------------------- */

#corner {

float: left;
width: 181px;
height: 258px;
padding-right: 0px;
padding-top: 345px;
}

1. Problem: Eine Staffelung der CSS- Elemente im Containerrahmen wie: 1. Layoutbereich, 2. Navigation, 3. Banner & 4. Ecke führt zu einem Zeilenumbruch und zerreißt die Struktur.

2.Problem: Inhalte lassen sich nur als Ebenen in den Layoutbereich einfügen. Diese werden aber als "Layer" absolut positioniert, somit werden alle Inhalte nach links verschoben.

+++ Ich komme nicht weiter, bitte um kurzfristige Hilfe +++

Danke für die schnelle Antwort. Vielleicht stelle ich mich einfach zu ungeschickt an. Mein Problem ist die Positionierung aller Elemente im fixierten Grundgerüst (Container). Der Seitenaufbau ist wie folgt (von oben nach unten):

1. Seitenrahmen (Container)
1.1. Layout
1.2. Navi (horizontal)
1.3. Fußzeile (Banner) mit
1.4. Sidebar (variable Grafik)

Ich war der Meinung, das sich die DIV-Bereiche, vom Containerrand ausgehend, frei positionieren lassen. Da es sich aber bei allen Bereichen um Block-Level-Elemente handelt, die einen Zeilenumbruch erzeugen, funktioniert die Bindung im zentralen Seitenrahmen nicht.

Verhindert die Auffüllung vom Rand (padding) bei #banner & #corner eine korrekte Abfolge der Elemente im Rahmen?

Ach ja ... ich arbeite mit Dreamweaver, dieser positioniert Layer als absolute Bereiche. Um den Einsatz von Ebenen werde ich wohl nicht herumkommen, denn Textpassagen & Bilder nehmen Teilbereiche der Grafik im Eckbereich mit ein.

Noch ein Nachtrag:

Ach ja ... ich arbeite mit Dreamweaver, dieser positioniert Layer als absolute Bereiche. Um den Einsatz von Ebenen werde ich wohl nicht herumkommen, denn Textpassagen & Bilder nehmen Teilbereiche der Grafik im Eckbereich mit ein.

Du meinst absolut positionierte Ebenen? dies wird wohl nicht so funktionieren, wenn der äußere Container zentriert wird, denn der Eckpunkt wird sich dann wohl je nach Auflösung verschieben. Besser wäre es, die Ecke als Hintergrundbild von #container einzubinden (im folgenden Fall unten rechts):

#container {

background-image:url(ecke.gif);
background-repeat:no-repeat;
background-position:bottom right;

/* sonstige Angaben */

}

Die Ecke würde ich so positionieren, wie in Beitrag 5 bereits beschrieben.

1. Die Definitionen von #container erweiterst du entsprechend um Angaben für ein Hintergrundbild und erhöhst auch die Angabe für height in der Höhe des Bildes:

#container {

width: 924px;
height: 664px;
margin: 0 auto;
background-image:url(Grafik/Banner%20Willkommen%20-%20Rechts.gif);
background-repeat:no-repeat;
background-position:bottom right;

}

2. Dafür schmeißt du das Eckbild im HTML-Code raus:

	<div id="banner"><!-- Banner -->
	  <a href="Index.html"><img src="Grafik/Banner Willkommen - Links.gif" width="739" height="54" border="none"/>
	</div>



</div> <!-- Ende Seitenrahmen -->

So, ich glaub jetzt passt es. Die Positionierung der Layoutelemente erfolgt entsprechend Deinen Tips aus Beitrag 4. Falls Dir nochwas einfällt, wie man den Wechsel des Hintergrundbildes galant lösen könnte bin ich natürlich für jeden Tip dankbar.