Tables -> mittiges Layout

[turkan]

Hallo,

ich möchte ein Layout kreieren was aus praktisch 3 Teilen besteht:

• links ein 100px breites menue
• in der mitte ein 455px breiter mainframe
• rechts wieder ein 100px breites menue

das Ganze soll sich -je nach Auflösung des Besuchers- genau mittig an das Browserfenster anpassen.

Wie funktioniert das mit Tabellen?
Ich habe zwar schon Google gequält und einiges ausprobiert, aber irgendwie funktioniert Alles nicht.

MfG,
Turkan

[Eternius]

Hallo,

nicht verkehrt wäre mal hier http://de.selfhtml.org/css/layouts/index.htm reinzuschauen.

gruss

[turkan]

Hallo Eternius,

danke erstmal!
Ich glaube, ich habe mich etwas unklar ausgedrückt.

Ich möchte in der Mitte einen mainframe (445px) haben und links bzw. rechts (je 100px) eine weitere Spalte anlegen.

So das ich im Enddeffekt ein 655px breites Layout habe, was sich je nach Auflösung immer mittig platziert. Also das rechts und links von den beiden menues auch noch platz befindet.

ich hoffe das ist verständlich?

MfG,
Turkan

[Ingo Turski]

Hi,

Ich glaube, ich habe mich etwas unklar ausgedrückt.

Nein.

Ich möchte in der Mitte einen mainframe (445px) haben und links bzw. rechts (je 100px) eine weitere Spalte anlegen.

Die verlinkten Seiten zeigen Dir, wie so etwas auch ohne eine sinnentfremdete Tabelle möglich ist.

freundliche Grüße
Ingo

[turkan]

Danke nochmal für die Posts!

Ich habe mich jetzt mal eingelesen und es soweit geschafft, dass ich links und rechts ein 100px breites Feld habe, was sich immer 20% von links/rechts aufhält. Nur wie fixiere ich nun das Feld in der Mitte?

Bin leider ein totaler CSS-Newbie!

MfG,
Turkan

[Cyx23]

Hallo Turkan,

Ich habe mich jetzt mal eingelesen und es soweit geschafft, dass ich links und rechts ein 100px breites Feld habe, was sich immer 20% von links/rechts aufhält. Nur wie fixiere ich nun das Feld in der Mitte?

Also eine Lösung ohne float? Vielleicht über margin:auto?
Ist aber u.U. nicht bei allen Browsern ausreichend, poste doch mal deinen Code.

Grüsse

Cyx23

[Cyx23]

Hallo Turkan,

ich hoffe das ist verständlich?

geht so.

Mit den von dir gewünschten Tabellen kann es z.B. bereits so klappen:

<center><table border=1 width=655><tr><td width=100>l<td width=455><td width=100>r</table>

Allerdings gibts wohl auch etwas modernere Methoden mit CSS, und das HTML ist auch etwas
knapp geraten;-)

Grüsse

Cyx23

[Cheatah]

Hi,

Mit den von dir gewünschten Tabellen kann es z.B. bereits so klappen:

Himmel! Warum postest Du derart grauenbehafteten Code? Hat turkan Dir irgend was getan, dass Du ihn mit sowas strafst?

Cheatah

[Cyx23]

Hallo,

Himmel! Warum postest Du derart grauenbehafteten Code? Hat turkan Dir irgend was getan, dass Du ihn mit sowas strafst?

ich bin davon ausgegegagen dass der verkürzte Code ausreicht um ihn auf den angefragten Weg zu
bringen, und er sich ggf. noch in SelfHTML umschaut.
Ansonsten wenn du die Defizite so genau überblickst und firm bist in den Specs und ggf. zu
schließende Tags von HTML 2 oder 3 oder was als Anforderung unverzichtbar sein mag, warum postest
du nicht weniger grauenbehafteten Code oder benennst die Probleme?

<center>
  <table width=655>
    <tr>
      <td width=100>l</td>
      <td width=455>m</td>
      <td width=100>r</td>
    </tr>
  </table>
</center>

Grüsse

Cyx23

[Cheatah]

Hi,

ich bin davon ausgegegagen dass der verkürzte Code ausreicht um ihn auf den angefragten Weg zu
bringen,

meine Kritik betrifft nicht die Präsentation des Codes, sondern den Versuch, ihn auf den angefragten Weg zu bringen. Du weißt genau, dass er durch Dornenbüsche verläuft und an einem Abgrund endet.

warum postest du nicht weniger grauenbehafteten Code

Weil ich es für das Schlimmste halte, was man einem Fragesteller antun kann. Das habe ich in diesem Forum auch schon oft genug ausgeführt.

oder benennst die Probleme?

Ich bin mir sicher, Du selbst kannst mindestens ein halbes Dutzend der Probleme aufzeigen, die Dein Code mit sich führt.

Cheatah

[Hopsel]

Hi Cyx23!

Du hilfst niemandem weiter, in dem du Dinge empfiehlst, die schlichtweg von schlechtem Stil zeugen. Ich möchte dich damit nicht provozieren.

Du musst einsehen, dass Tabellen eindeutig dafür gedacht sind, tabellarische Daten auszuzeichnen. Um ein Dreispaltenlayout zu erstellen, gibt es wesentlich effizientere Möglichkeiten, die Eternius schon genannt hat.

MfG Hopsel

[Cyx23]

Hallo Hopsel,

Du hilfst niemandem weiter, in dem du Dinge empfiehlst, die schlichtweg von schlechtem Stil zeugen. Ich möchte dich damit nicht provozieren.

es sollte keine Empfehlung sein, meine Einschränkungen waren vielleicht etwas zu dezent
formuliert ("Allerdings gibts wohl auch etwas modernere Methoden mit CSS, und das HTML ist
auch etwas knapp geraten;-)".

Mal abgesehen von der Möglichkeit dass der Fragesteller in Wirklichkeit gar keine HTML-Lösung
gesucht hat, ist mir aber nicht klar wie schlecht solch ein Stil wirklich sein mag wenn etwa in
einem Doctype HTML 2.0 o.ä. ein center-Tag (der im Beispiel eine unschöne Verschachtelung von
Tabellen erübrigt) steht, der erst in späteren Versionen als deprecated, also immer noch
zulässig, eingestuft wird.

Du musst einsehen, dass Tabellen eindeutig dafür gedacht sind, tabellarische Daten auszuzeichnen. Um ein Dreispaltenlayout zu erstellen, gibt es wesentlich effizientere Möglichkeiten, die Eternius schon genannt hat.

Zunächst bin ich einfach dagegen die Fähigkeiten des Mediums oder üblicher Browser ohne wirkliche
Not einzuschränken und dann anschliessend zu äussern das Medium wäre für dieses oder jenes eben
nicht geeignet.
Effizienz kann und muß angesichts der real existierenden Browserlandschaft sowieso verschieden
beurteilt werden, und die Einschränkung auf Daten geht mir auch etwas weit, Inhalte wäre mir
als Formulierung lieber. Das soll immer noch keine Empfehlung für Tabellen sein, aber etwas
entspannter kann mit den verfügbaren Möglichkeiten schon umgegangen werden.

Die übliche Tabellendiskussion zielt zudem überwiegend auf Aspekte, meist Barrierfreiheit bzw.
Einschränkungen derselben, ab, die bei einer einzigen dreispaltigen Tabelle wohl nicht
zutreffen. Das W3C schreibt z.B. "the difficulty to parse or render a table in some context
(disabilities, view port restrictions, ...).", da gehe ich aber davon aus dass ein Screenreader
eine Spalte nach der anderen vorliest, also bei zwei oder drei Spalten ohne Verschachtelung vmtl.
keine Beeinträchtigung, und bei den view port restrictions kann in weiten Bereichen eine Tabelle
bei den derzeit noch gebräuchlichsten Browsern sogar Vorteile haben.

Grüsse

Cyx23

[Cheatah]

Hi,

es sollte keine Empfehlung sein,

"Du kannst Folgendes machen:" _ist_ eine Empfehlung.

meine Einschränkungen waren vielleicht etwas zu dezent formuliert

Die Formulierungen hätten noch so scharf sein können, Deine Empfehlung wäre weiterhin eine solche.

Mal abgesehen von der Möglichkeit dass der Fragesteller in Wirklichkeit gar keine HTML-Lösung
gesucht hat, ist mir aber nicht klar wie schlecht solch ein Stil wirklich sein mag wenn etwa in
einem Doctype HTML 2.0 o.ä. ein center-Tag (der im Beispiel eine unschöne Verschachtelung von
Tabellen erübrigt) steht, der erst in späteren Versionen als deprecated, also immer noch
zulässig, eingestuft wird.

Wir schreiben das Jahr 2005. Wenn jemand einen Grund hat, HTML/2.0 oder 3.2 einzusetzen, dann wird er dies sagen. Sagt er es nicht, hat er keinen solchen Grund. Diese esoterische Hypothese ist also nicht wirklich zielführend.

Zunächst bin ich einfach dagegen die Fähigkeiten des Mediums oder üblicher Browser ohne wirkliche
Not einzuschränken

Fein, dann lehnst Du Tabellenlayout also ab.

und dann anschliessend zu äussern das Medium wäre für dieses oder jenes eben
nicht geeignet.

Warum soll man keine Tatsachen äußern, die zudem das Verständnis der Thematik erhöhen?

Effizienz kann und muß angesichts der real existierenden Browserlandschaft sowieso verschieden
beurteilt werden,

Du suchst nach Ausreden.

und die Einschränkung auf Daten geht mir auch etwas weit, Inhalte wäre mir
als Formulierung lieber.

Sei's drum.

Das soll immer noch keine Empfehlung für Tabellen sein,

Keine erneute, meinst Du sicher.

aber etwas
entspannter kann mit den verfügbaren Möglichkeiten schon umgegangen werden.

Findest Du? Ich kann mich einer "Scheiß egal!"-Einstellung nicht anschließen, zumal mir an dem Medium, in dem wir uns bewegen, etwas liegt. Dir mag es egal sein, aber mit dem, was Du da verzapft hast, *hast* Du Schaden angerichtet. Es geht nunmehr nur noch darum, diesen Schaden so weit wie möglich zu reduzieren, und ich verstehe nicht, weshalb Du das mit aller Kraft boykottierst.

Die übliche Tabellendiskussion zielt zudem überwiegend auf Aspekte, meist Barrierfreiheit bzw.
Einschränkungen derselben, ab,

Der Einsatz semantischen Markups hat weit mehr Vorteile als nur eine scheinbare Barrierefreiheit. Und eine "Tabellendiskussion" gibt es nicht mehr, sondern höchstens Leute, deren Verständnis im letzten halben Jahrzehnt nicht weiter gereift ist.

die bei einer einzigen dreispaltigen Tabelle wohl nicht
zutreffen.

Sie treffen bei *jedem* Missbrauch von Tabellen für nicht-tabellarische Daten zu, genau wie bei jedem Einsatz von <div>-Elementen für Informationen, die semantisch von vorhandenen HTML-Elementen getragen werden können.

Das W3C schreibt z.B. "the difficulty to parse or render a table in some context
(disabilities, view port restrictions, ...).", da gehe ich aber davon aus dass ein Screenreader
eine Spalte nach der anderen vorliest, also bei zwei oder drei Spalten ohne Verschachtelung vmtl.
keine Beeinträchtigung, und bei den view port restrictions kann in weiten Bereichen eine Tabelle
bei den derzeit noch gebräuchlichsten Browsern sogar Vorteile haben.

Das hat nichts mit dem o.g. Missbrauch zu tun.

Cheatah

[Cyx23]

Hallo,

Empfehlungen sehen m.E. anders aus, zumal ja Turkan offenbar dabei ist ein
CSS-Layout zu entwickeln.

Und ein Boykott sähe auch anders aus, und vielleicht wird ja der IE 7 doch noch so
passabel dass sich _dann_ einige Fragen so gar nicht mehr stellen.

Das W3C schreibt z.B. "the difficulty to parse or render a table in some context
(disabilities, view port restrictions, ...).", da gehe ich aber davon aus dass ein Screenreader
eine Spalte nach der anderen vorliest, also bei zwei oder drei Spalten ohne Verschachtelung vmtl.
keine Beeinträchtigung, und bei den view port restrictions kann in weiten Bereichen eine Tabelle
bei den derzeit noch gebräuchlichsten Browsern sogar Vorteile haben.

Das hat nichts mit dem o.g. Missbrauch zu tun.

Was meinst du hier? Tabellen vs. Maschinenlesbarkeit /semantic Web?

Grüsse

Cyx23

[Gunnar Bittersmann]

Hi Cyx23,

Was meinst du hier? Tabellen vs. Maschinenlesbarkeit /semantic Web?

Was hat HTML mit dem Semantic Web zu tun? Gar nichts.

Und auch wenn Cheatah sich nicht davon abhalten lässt, von „semantischem Markup“ zu sprechen, hat die Bezeichnung nichts mit dem Semantic Web zu tun.

Deshalb vermeide ich die Bezeichnung ja gerade.

Live long and prosper,
Gunnar

[Cyx23]

Hallo Gunnar,

Und auch wenn Cheatah sich nicht davon abhalten lässt, von „semantischem Markup“ zu sprechen, hat die Bezeichnung nichts mit dem Semantic Web zu tun.

das ist schon klar, aber totzdem weiß ich nicht worauf sich der beklagte Missbrauch bzw.
dessen Folgen beziehen sollen, zumal bei der geringen Semantik im HTML selbst.

Das W3C zielt im mir vorliegenden Text zu tableless layout ab auf disabilities sowie view port.
Dann gibts m.E. vielleicht noch Fragen der maschinellen Lesbarkeit, Archivierung, Auswertung
oder Aufbereitung für Suchmaschinen. Vielleicht noch Eignung der Struktur für ein CMS.

Grüsse

Cyx23

[Gunnar Bittersmann]

• links ein 100px breites menue
• in der mitte ein 455px breiter mainframe
• rechts wieder ein 100px breites menue
  das Ganze soll sich -je nach Auflösung des Besuchers- genau mittig an das Browserfenster anpassen.

turkan,
Das ist schon mal unmöglich. Wenn der Viewport (das Fenster(innere) des Browsers abzüglich Sidebars) schmaler ist als 655px, passt da gar nichts. Und horizontales Scrollen ist unbeliebt.

Und die Größe des Viewports hat auch nichts mit der Auflösung des Monitors zu tun. Von der „Auflösung des Besuchers“ ganz zu schweigen.

Du hast auch bedacht, dass deine Menüs in 100px gezwängt ziemlich blöd aussehen, wenn der Nutzer eine größere Schrift eingestellt hat als du dachtest?

Die Breite gibst du besser entweder relativ zur Schriftgröße in em an oder relativ zur Viewport-Breite in %, und max-width lässt sich da auch vorteilhaft einsetzen.

Wie funktioniert das mit Tabellen?

Wenn dein erster Gedanke bei der Aufteilung einer Seite „Tabelle“ ist, verwerfe ihn und denk nochmal.

Die CSS-Eigenschaft float ermöglicht es, Blöcke nebeneinander zu setzen. Und wenn sie bei manchem Nutzer aufgrund seiner Einstellungen nicht nebeneinander passen, sind sie bei ihm halt untereinander, besser vertikal scrollen als horizontal.

Das sollte erstmal genug food for thought sein.

Live long and prosper,
Gunnar