Layout mit div umsetzen (Zentriert)

[noise]

Hallo Leute!

Ich bin auf der Suche nach der Erleuchtung
Ich hab mal unten den Grundaufbau für meine site angehängt.
Ich bin momentan soweit das ich das ganze Bild mit einem <div> zentriert hin bekomme (alles nur copy/paste)

body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #000000;
	background-color: #FFFFFF;
	text-align: center;
	}
	
#container {
	padding: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	background: #FFFFFF;
	border: 1px solid #000000;
	text-align:left;
	width: 850px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 820px;
	}

Jetzt steh ich vor dem Problem das ich ja nicht das Bild als ganzes dort hinein setzen will - sondern genau so gesliced wie unten zu sehen.

Also fürs erste hab ich mir gedacht unterteile ich das Layout noch in 3 grobe Teile <div>'s:

- Banner
- Navigation
- Content

<div id="container">
  <div id="banner">
  </div>
  <div id="navigation">
  </div>
  <div id="content">
  </div>
</div>

So weit so gut Nur wie stell ich das jetzt an das ich zB in meinem "banner-div" die 5 Elemente richtig anordne?

Ich hoffe es versteht mich hier irgendwer auch nur so halbwegs und kann mir einen Wink in die richtige Richtung geben!

Danke!

 

[eiisa]

Hallo,

ich würde die Anordnung der 5 Elemente im Banner einfach mit Hilfe einer Tabelle durch Angabe von colspan und rowspan umsetzen.
Also, die Tabelle in den div für deinen Banner setzen.

z. B. so:

 <table width="100%">
<tr>
<td rowspan="3" width="200"> Feld grau </td>
<td colspan="2"> Feld rot </td>
</tr>
<td colspan="2"> Feld türkis </td>
<td width="10"> Feld lila </td>
<td> Feld blau </td>
</tr>
</table>

LG eiisa

 

[noise]

An einen table hatte ich auch schon gedacht - aber ist das nicht unschön !?

 

[eiisa]

Du hast recht.
Man sollte vom designen von Weblayouts mit Tabellen eigentlich schon schön langsam wegkommen und stattdessen CSS zum Einsatz bringen. Aber ich persönlich würd es in deinem Fall einfacher finden das Problem mit Tabellen zu lösen, da du sehr viele kleine Felder hast.
Ansonsten müsstest dur für jedes einzelne Feld einen neuen div-container erstellen und diesen jeweils genau positionieren. Da find ichs einfach praktischer, eine Tabelle in den entsprechenden div-Bereich zu setzen und zu formatieren.

Dies ist jetzt meine persönliche Meinung - also, ich kann mich auch irren.