Problem mit komplexer Tabellenerstellung

[Tronjer]

Hallo zusammen,

ich habe hier ein Problem und hoffe, dass Ihr mir behilflich sein könnt. Es geht darum, eine HTML-Seite, analog zu obigem Screenshot, zu erstellen, die mehrere Tabellen unterschiedlicher Breite und Höhe enthält, welche pro Reihe links und oben bündig beginnen. Mit ap-div's würde ich das wahrscheinlich sogar hinbekommen, aber da die Seite mit dem Browser-Fenster skalieren soll, muss ich wohl mit position:relative, float:left und dynamischen Werten arbeiten, anstatt die einzelnen Spalten mit absoluten Pixelwerten zu positionieren. Hintergrund und Frame sind soweit erstellt, aber bei den Tabellen lege ich mir gerade die Karten.

Wäre schön, wenn mir hier jemand beim logischen Ansatz helfen und sagen könnte, wie ich das nun am sinnvollsten realisiere. Den Code schreibe ich mir dann schon selber.

 

[Elroy]

Hallo.

Ich hoffe du arbeitest nicht wirklich mit Frames.

Ich würde das so angehen: Drei divs und in jedem div vier Tabellen.
Die Tabellen kannst du dann floaten wie du ja schon geschrieben hast.
Die Tabbellen richten sich an der Oberkante des div aus und somit auf gleicher Höhe.

Gruss
Elroy

 

[Tronjer]

Nein, ich arbeite nicht mit Frames. Der Begriff war unglücklich gewählt. :razz:

Also nochmal,

der äussere container ist gelb, darin liegt ein oranger und nun muss ich die Tabellen positionieren. Jede Tabelle besteht aus zwei Spalten, die durch die Hintergrundfarbe optisch unterbrochen werden.

1. Frage: erstelle ich pro Tabelle zwei unterschiedlich breite Spalten, oder statt dessen zwei einzelne Tabellen mit jeweils einer Spalte? Je nachdem wären das ja 12 oder 24 divs.
2. Frage: kann ich, da die Größe dynamisch mit dem Browserfenster skalieren soll,die margins überhaupt in Pixeln angeben, oder muss ich Prozentwerte verwenden?

Wenn ich soweit schon mal wäre, dann könnte ich mit float:left zumindest die erste Tabellenreihe erstellen.

 

[threadi]

Hab dir im anderen Forum schon eine komplexe Antwort geschrieben.

 

[Tronjer]

Ich bekomme es aber trotzdem noch nicht hin.

Um das Beispiel zu vereinfachen:

Ich möchte 3 Reihen mit jeweils 4 Blöcken positionieren. Die erste Reihe habe ich mit float:left auch positioniert - aber wenn ich mit clear:left den Umbruch erzwingen will, dann sieht es so aus, wie auf dem Screenshot hier.:




Was muss ich anders machen?

 

[threadi]

An welcher Stelle clearst Du denn? Nach der 4. oder nach der 5. Box? Für mich sieht das so aus als würden entweder Außenabstände nicht passen oder die Gesamtbreite ein paar Pixel zu klein sein.

Ohne Quellcode oder Link kann man das schwer sagen, nur vermuten.

 

[Tronjer]

Der Screenshot ist lediglich eine einfache Skizze zur Veranschaulichung.

Im CSS sieht das bei mir so aus:

 .tmain {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FC0;
    border: thin double #F90;
    background-color: #000;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    margin-left: 20px;
    padding: 5px;
    float:left;
    position: static;
}

.tend {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FC0;
    border: thin double #F90;
    background-color: #000;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    margin-left: 20px;
    padding: 5px;
    clear:left;
    position: static;
}

Die 4 Boxen in der ersten Reihe haben die Klasse .tmain
Die einzelne Box in der zweiten Reihe hat die Klasse .tend
Die 3 Boxen in der dritten Reihe haben die Klasse .tmain

Mit float:left und position:static kann ich die oberen 4 Boxen in eine Reihe bringen, ohne dass sie sich beim Skalieren des Browserfenster verschieben würden. Soweit funktioniert es schon mal.

Mit clear:left erzwinge ich bei der fünften Box den Umbruch in die zweite Reihe. Das ist auch so gewollt. Allerdings sollen die Boxen 6-8 nun hinter der fünften beginnen und nicht erst in der dritten Reihe.

Das clear:left bringt mir einen Umbruch sowohl zur vorangegangenen als auch zur nachfolgenden Box und an diesem Problem hänge ich mich auf.

 

[threadi]

Wozu brauchst Du da überhaupt ein clear? Meintest Du nicht Du willst die Boxen immer nebeneinander haben egal wie breit der Viewport ist? Wenn das Viewport-Ende erreicht ist sollte die nächste Box automatisch auf die neue Zeile? Wenn ja, brauchst Du kein clear.

Wenn nein fehlt in deinem .tend noch ein "float: left;". Sicherer empfinde ich es jedoch wenn man zwischen die Boxen an den jeweiligen Stellen ein clear-div setzt, ohne Inhalt (was zwar nicht ganz sauber ist aber für die meisten Browser unproblematisch).

 

[Tronjer]

Wenn nein fehlt in deinem .tend noch ein "float: left;". Sicherer empfinde ich es jedoch wenn man zwischen die Boxen an den jeweiligen Stellen ein clear-div setzt, ohne Inhalt (was zwar nicht ganz sauber ist aber für die meisten Browser unproblematisch).

Da lag mein Denkfehler. Wusste nicht, dass man innerhalb einer Klasse auf ein clear:left noch ein float:left folgen lassen kann. Dachte, die zwei Anweisungen würden sich gegenseitig ausschließen.

Vielen Dank, das hilft mir schon mal ein schönes Stück weiter.