Tabellen variabel darstellen

[paddler]

Guten Tag liebe Community.

Vorweg erstmal: Ich finde selfhtml.org ein exzellentes Nachschlagewerk, dass mir schon viel geholfen hat. Danke dafür.

So zu meinem Thema:

Ich plane eine Layout, dass in diesem entspricht:

+---------Head--------+
+-------Wrapper-------+
+--Navi--++--Content--+
+------/Wrapper-------+
+-------Footer1-------+
+-------Footer2-------+

Soweit ist alles fein. Jedes Element ist ein div-Element.

Die Navi- und Content-Div's habe ich mit einem Wrapper zusammengepackt und sind jeweils mit float:left versehen.

So jetzt mein Problem: Auf einer Seite soll zum Beispiel eine Tabelle stehen.
Diese Tabelle hat 5 Spalten mit beliebig vielen Reihen.
Die Spalten sollen folgende Breiten haben:
Spalte 1: 4%
Spalte 2: 8%
Spalte 3: 25%
Spalte 4: 30%
Spalte 5: 35%

Insgesamt habe ich der Tabelle eine Breite von 64em gegeben.

So, im normalen Ansichtsfaktor von 100% sieht alles TipTop aus, wenn ich jetzt aber hineinscrolle, sprich vergrößere, verschiebt sich die Tabelle unter das navi-Div.

+---------Head--------+
+-------Wrapper-------+
+---------Navi--------+
+-------Content-------+
+------/Wrapper-------+
+-------Footer1-------+
+-------Footer2-------+

Mir ist klar, dass diese Problematik von den 64em her rührt, aber auch ohne dieser Angabe kommt es zu obiger Darstellung.

Wie kann man dies vermeiden, sprich die Tabelle soll sich der Seite anpassen und nicht einfach unters Navi rutschen.

Ach ja, XHTML 1.0 Transitional und CSS wird verwendet, falls es nicht klar gewordn sein sollte.

Gruß, der
Paddler

[Gernot Back]

Hallo paddler,

Die Navi- und Content-Div's habe ich mit einem Wrapper zusammengepackt und sind jeweils mit float:left versehen.

Wie kann man dies vermeiden, sprich die Tabelle soll sich der Seite anpassen und nicht einfach unters Navi rutschen.

Du solltest dein Content-DIV gar nicht floaten lassen, sondern ihm stattdessen einen Margin-Left in der Breite des Navi-Divs verpassen.

Dem TABLE-Element in dem Content-DIV würde ich eine Breite von 100% geben und dafür der letzten Spalte, die du sicher mit COL-Elementen definierst, keine festen 35% sondern sie stattdessen über das Attribut width="*" als Puffer nutzen, sodass sie die restliche zur Verfügung stehende Breite einnimmt.

Gruß Gernot

[paddler]

Du solltest dein Content-DIV gar nicht floaten lassen, sondern ihm stattdessen einen Margin-Left in der Breite des Navi-Divs verpassen.

Mh, so einfach und doch so kompliziert. Danke dir. :)

Dem TABLE-Element in dem Content-DIV würde ich eine Breite von 100% geben und dafür der letzten Spalte, die du sicher mit COL-Elementen definierst, keine festen 35% sondern sie stattdessen über das Attribut width="*" als Puffer nutzen, sodass sie die restliche zur Verfügung stehende Breite einnimmt.

Nein, ich habe keine COL-Elemente verwendet.

  
<table>  
<tr>  
<th>Spalte 1</th>  
<th>Spalte 2</th>  
<th>Spalte 3</th>  
<th>Spalte 4</th>  
<th>Spalte 5</th>  
</tr>  
  
<tr>  
<td>Spalte 1</td>  
<td>Spalte 2</td>  
<td>Spalte 3</td>  
<td>Spalte 4</td>  
<td>Spalte 5</td>  
</tr>  
  
</table>  

Aber durch die Angabe width: "*" wirkt sich das so aus wie gewünscht, also alles perfekt. Danke auch dafür. :)

Nachfolgefrage (^^): Dass der rechte Rahmen des Navi-Divs bis zum Footer reicht kriege ich wohl nur durch Faux-Columns hin, oder?

[Gernot Back]

Hallo paddler,

Nachfolgefrage (^^): Dass der rechte Rahmen des Navi-Divs bis zum Footer reicht kriege ich wohl nur durch Faux-Columns hin, oder?

Du könntest auch beiden Elementen, dem Navi-DIV und dem Content-DIV einen Rahmen nach rechts bzw. nach links verpassen und dann dem links-floatenden Navi-DIV zusätzlich einen negativen Margin-Right in der Breite des Rahmens geben, sodass sich die jeweiligen Rahmen der beiden aneinander grenzenden Rahmen in voller Breite überlappen.

Die Trennlinie würde sich dann immer nach dem durch mehr Inhalt größeren von beiden richten.

Gruß Gernot

[paddler]

Du könntest auch beiden Elementen, dem Navi-DIV und dem Content-DIV einen Rahmen nach rechts bzw. nach links verpassen und dann dem links-floatenden Navi-DIV zusätzlich einen negativen Margin-Right in der Breite des Rahmens geben, sodass sich die jeweiligen Rahmen der beiden aneinander grenzenden Rahmen in voller Breite überlappen.

Die Trennlinie würde sich dann immer nach dem durch mehr Inhalt größeren von beiden richten.

Gruß Gernot

Vielen Dank, es hat funktioniert. Zwar kapiere ich nicht, warum der Rahmen vom Content bis zum Footer geht (Ohne Heihgt:100%), aber so soll es ja sein.

[paddler]

Edit: (Diese Funktion fehlt hier. O.o)

Ich meine, der Rahmen geht bis zum Footer, obwohl gar nicht so viel Inhalt im Content oder im Navi ist.