Tabellenlayout in CSS umsetzen

(hier klicken, um zum Original Thread zu gelangen)

BillieJoe90

Hallo,
ich würde gerne das Design von www.greendaynet.de in CSS umsetzen. Es hat einen Header-Bild und dann drei Spalten mit jeweils drei Zeilen. Ich bekomme es einfach nicht ohne Tabelle hin. Ich n habe total viel herumprobiert. Hier mal eine Skizze, wie es sein sollte:

Das ganze soll eben auch noch mittig sein...

Hat jemand eine Idee, wie ich das ohne Tabelle lösen kann?

Vielen Dank schonmal, bin am Verzweifeln!

der_nic

Entweder direkt in den body oder du machst ein wrapper-div um die ganze Webseite und dann folgendes CSS:

code:

1:
2:
3:
4:
5:
6:

body { /* oder halt div#wrap etc
width:800px; /* irgend eine Breite, kann auch zb 80% sein */
margin:0 auto; /* das auto sorgt für dein gleichen Abstand links und rechts, das 0 für keinen Abstand oben/unten */
}

BillieJoe90

Danke, aber das habe ich schon so gemacht. Problem sind die einzelnen Spalten. Ich bekomme es hin, eine Zeile mit drei Spalten zu platzieren, nicht aber drei Zeilen mit jeweils drei Spalten...

der_nic

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:

CSS:
div.links, div.rechts {
width:20%;
}
div.mitte {
width:60%;
}
div.links, div.mitte {
float:left;
}

HTML:

<div id="erste_zeile">
     <div class="links"></div>
     <div class="mitte"></div>
     <div class="rechts"></div>
</div>
<div id="zweite_zeile">
     <div class="links"></div>
     <div class="mitte"></div>
     <div class="rechts"></div>
</div>
<div id="dritte_zeile">
     <div class="links"></div>
     <div class="mitte"></div>
     <div class="rechts"></div>
</div>

BillieJoe90

Danke!
Im Internet Explorer funktioniert das prima! Nur im Firefox nicht... böse

edit: es klappt doch nicht... sobald ich text in das mittlre feld schribe, ist das ganze laypout zerstört...

der_nic

naja ein bischen hättest du auch selbst ausprobiere können... Augenzwinkern

voilà:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
width:90%;
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
div {
border:1px solid #000;
}
div.zeile {
clear:left;
}
div.links {
width:20%;
}
div.mitte {
width:60%;
}
div.links, div.rechts, div.mitte {
background-color:#999999;
}
div.links, div.mitte {
float:left;
}
</style>
</head>

<body>


<h1>Titel</h1>

<div class="zeile">
	<div class="links">links</div>
	<div class="mitte">mitte</div>
	<div class="rechts">rechts</div>
</div>

<div class="zeile">
	<div class="links">links</div>
	<div class="mitte">mitte<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
	<div class="rechts">rechts</div>
</div>

<div class="zeile">
	<div class="links">links</div>
	<div class="mitte">mitte</div>
	<div class="rechts">rechts</div>
</div>


</body>
</html>

BillieJoe90

Vielen, vielen Dank!
Aber dass die linken und rechten Spalten sich an die Höhe der mittleren anpassen ist nur mit JavaScript zu erreichen, richtig?

(hier klicken, um zum Original Thread zu gelangen)