CSS ... ich werd noch irre

AxlF

Aktives Mitglied
Thread Starter
Dabei seit
04.04.2004
Beiträge
623
Reaktionspunkte
14
Hallo,

Ich möchte folgendes Layout realisieren. Mit Tabellen, wärs easy. Aber ich will einfach weg von den Tabellen, und mit CSS Layouten...


Hier mein CSS:

Code:
div {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#box1 {

	width: 700px;
	height: 100px;
	border: 1px solid #000000;
	background-color: #EEEEEE;
}

#box2 {
	width: 700px;
	height: 20px;
	border: 1px solid #000000;
	background-color: #EEEEEE;
}
#box3 {
	float: left;
	margin: 0px;
	padding: 0px;

	width: 50px;
	height: 100%;

	border: 1px solid #000000;
	background-color: #EEEEEE;
	
	
	
}
#box4 {
	width: 700px;
	border: 1px solid #000000;
	background-color: #EEEEEE;
	height: 100px;
}
#box5 {
	float: right;

	margin: 0px;
	padding: 0px;

	width: 50px;
	height: 100%;

	border: 1px solid #000000;
	background-color: #EEEEEE;
}
#box6 {
	clear: both;
	width: 700px;
	height: 20px;
	border: 1px solid #000000;
	background-color: #EEEEEE;
}

hier meine HTML (ein ausschnitt):

Code:
<div id="box1">BOX 1</div>
<div id="box2">BOX 2</div>
<div id="box4">
	<div id="box3">BOX 3</div>
	<div id="box5">BOX 5</div>
	BOX 4<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	Viel Inhalt...
</div>
<div id="box6">BOX 6</div>

Mein problem:

Ich möchte die Höhe von box 3, 4 und 5 rel voneinander abstimmen.
Da der Inhalt Dynamisch aus der Datenbank kommt kann ich keine feste Höhe verwenden.
Ich möchte dass box 3 und 5 immer genausolang wie box 4 ist.
Auch wenn jetzt z.B. in box 3 massig viel Inhalt ist, soll sich box 4 und 5 anpassen.
Ebenso wenn nur in box 6 massig viel Inhalt ist, soll sich box 3 und 4 anpassen.
Das gleiche mit box 5 mit viel inhalt...

Das ganze soll natürlich auch mit IE UND Firefox gleich aussehen. Und da ist der Punkt. Bei einem gehts immer wunderbar, dann schauts aber beim anderen blöd aus...

Hoffe ihr könnt mir helfen!

Viele Grüße,
Alex
 

Anhänge

  • mybox.gif
    mybox.gif
    2,4 KB · Aufrufe: 98
Da hast Du Dir gleich eine recht schwere Einstiegsaufgabe zum Thema CSS-Layout ausgesucht. :)

Schau Dir mal dieses Beispiel an. Meiner Meinung nach die ultimative Lösung für dieses Problem.
 
Schau dir mal die Brasserie Zeitlos an, das habe ich ähnlich wie du es willst realisiert.
 
Also och bin ja der Meinung das ma wenn ma mit Datenbanken arbeitet ohne Probleme auf Tabellen zurück greifen kann, denn schließlich sind sie ja dafür da: Zum Darstellen von Daten
 
hm...
klar...

aber ich layoute ja mit verschachtelten tabellen... Dafür sind sie nicht da ....


Gruß,
Alex
 
@janpi3 Genau, Tabellen sind zum Darstellen von tabellarischen Inhalten gedacht. Damit ist aber keineswegs gemeint ob die Daten aus einer Datenbank kommen. ;) Hier geht es um Layout und dafür sind Tabellen in korrekter Anwendung nicht geeignet.
 
dms schrieb:
Hier geht es um Layout und dafür sind Tabellen in korrekter Anwendung nicht geeignet.
Naja aber er hat ja geschrieben das seine Inhalte aus Datenbanken generiert werden. Aber falls diese Datenbanken den Inhalt einer Website generieren und nicht eine Tabelarische aufführung von daten ist natürlich CSS zu empfehlen wobei ich dafür ein Programm wie Adobe GoLive CS empfehlen würde.
 
Jo, der Inhalt kommt aus der DB, weswegen er keine fixen Höhenangaben machen kann. Dass das Design aus der DB kommt hat er nicht geschrieben. Aber selbst wenn...dadurch wird es nicht zu einem tabellarischen Inhalt. Wurscht... ;)
 
Egal wie er jetzt macht per Hand wird dat sowieso nischts

jan
 
@Der Graf Hab mir die Lösung mal angeschaut. Dabei gibt es jedoch das Problem dass die einzelnen "Spalten" sich eben nicht der längsten Spalte anpassen. Unterschiedliche Hintergrundfarben fallen also flach. Die Hintergrundfarbe kann nur über das Element #container gesteuert werden. Rahmen für die einzelnen Elemente sind auch nicht möglich.

@janpi Öhm...genau! :confused:
 
Zuletzt bearbeitet von einem Moderator:
@janpi Öhm...genau! :confused:[/QUOTE]
nunja ich meine das es einfacher wird wenn du mit einem Prog arbeitest, hier gibt es auch meist Optionenfelder die dir die Arbeit abnehmen
 
Sorry, aber ich bezweifle mal ganz stark dass irgendein Programm solch ein Layout ohne Tabellen hinbekommt. Die Schlussfolgerung dass Er es nicht ohne solch ein Programm schafft, nur weil Du es nicht schaffst, ist anzweifelbar. Per Hand erstellter Code ist und wird qualitativ immer besser sein.
 
nunja aber der Fred ersteller ist eigentlich das typische Beispiel für einen Programm benutzer.
Davon mal abgesehen sollte es kein allzu großes Problem mit GoLive solch ein Layout mit CSS zu erzeugen.
 
Zurück
Oben Unten