table trick: (scheiss/il)legal

[dey]

Hallo,

hatte unter IE ein Problem.
Zwecks späterer Layoutänderung wollte ich ein als Tabllenlayout vorgeschlagenes Layout mit Divs und CSS so umsetzen, dass es wie eine Tabelle wirkt.
War soweit unter FF kein Problem:
float:left
und für die Zellen (Divs), die eine neue Zeile seien sollen eine ID vergeben und
clear:left
Der IE hat das aber immer sehr gewürfelt, siehe (nur im IE)
http://www.fuji-euro.de/products/050.plc-03.XP 3 Series.e.php
Jetzt habe etwas rumgespielt und folgendes Phänomen gefunden, welches mein Problem unter IE herlich löst:
ich setze an Ende der ersten (Tabellen)Zeile ein <hr> und vergebe visibility:hidden, siehe auch hier (IE)
http://www.fuji-euro.de/products/050.plc-03.XP 3 Series.php

Nun zur Frage:

• ist der Eingriff ein bischen zu schräg und ich muss Probleme erwarten, die ich jetzt noch nicht sehe oder
• ist das so genial, dass ich einen Feature-Artikel schreiben muss

bydey

[Sven Rautenberg]

Moin!

Zwecks späterer Layoutänderung wollte ich ein als Tabllenlayout vorgeschlagenes Layout mit Divs und CSS so umsetzen, dass es wie eine Tabelle wirkt.

Das ist blödsinnig! Entweder hast du ein Tabellendesign - dann sei mutig und setze es als Tabelle um.

Oder du hast KEIN Tabellendesign. Dann setze es NICHT als Tabelle um, sondern nutze CSS und HTML _sinnvoll_. Denn nur damit wirst du bei späteren Layoutänderungen wenig im HTML ändern müssen, und den Rest im CSS.

Es ist ohnehin illusorisch, dass man nur mit CSS und bei konstanter HTML-Struktur jedes beliebige Design formatieren kann. Sowas geht NICHT.

- Sven Rautenberg

[Gunnar Bittersmann]

Hello out there!

Es ist ohnehin illusorisch, dass man nur mit CSS und bei konstanter HTML-Struktur jedes beliebige Design formatieren kann. Sowas geht NICHT.

Ich bin zuversichtlich, dass das mit CSS 3 gehen wird.
Ich bin weniger zuversichtlich, wann das sein wird.

See ya up the road,
Gunnar

[dey]

Hallo,

Es ist ohnehin illusorisch, dass man nur mit CSS und bei konstanter HTML-Struktur jedes beliebige Design formatieren kann. Sowas geht NICHT.

??
http://www.csszengarden.com/
http://deynews.de
Wenn man es von Anfang darauf auslegt geht das schon. Und darauf zielt mein Versuch ja ab. Wenn ich mehrere Seiten im verschachteltem Tabellenlayout ändern muss, kann ich auch von vorne Anfangen. Ich habe gerade (bin noch dabei) etliche Seiten von Tabellenlayout auf CSS umgestellt.

bydey

[Sven Rautenberg]

Moin!

Es ist ohnehin illusorisch, dass man nur mit CSS und bei konstanter HTML-Struktur jedes beliebige Design formatieren kann. Sowas geht NICHT.

??
http://www.csszengarden.com/

Der CSS Zen Garden beweist zwar, dass man bei absolut konstantem HTML, auch inhaltlich, ziemlich viel machen kann, aber gewisse Dinge gehen dort trotzdem nicht.

Punkt 1: CSSZG hat nicht nur eine konstante HTML-Struktur, sondern komplett konstanten HTML-Inhalt. "Normale" Seiten hingegen haben wechselnde Inhalte, z.B. weil sich News ändern, neue Seiten in Listen auftauchen etc.

Punkt 2: Die Abfolge der Elemente im HTML bestimmt ganz entschieden deren Reihenfolge. Wenn du H1, dann P (class:summary) und danach diverse P hast, kannst du diese Reihenfolge mit CSS nicht ändern. Wolltest du den ersten P, der die Zusammenfassung des Textes ist, über die Überschrift stellen, und das so, dass das Konstrukt IMMER, unabhängig von der Länge des P oder der H1 paßt, müßtest du tatsächlich die HTML-Struktur ändern - mit absoluter Positionierung oder Floats dürfte der Effekt nicht für alle denkbaren Textfälle lösbar sein.

Wenn man es von Anfang darauf auslegt geht das schon. Und darauf zielt mein Versuch ja ab. Wenn ich mehrere Seiten im verschachteltem Tabellenlayout ändern muss, kann ich auch von vorne Anfangen. Ich habe gerade (bin noch dabei) etliche Seiten von Tabellenlayout auf CSS umgestellt.

Der CSS Zen Garden beweist, dass es möglich ist, eine feste HTML-Struktur in vielen Varianten optisch darzustellen. Alle veröffentlichten Ergebnisse sind Erfolgsgeschichten. Was du dort nicht siehst, sind die Mißerfolge. Und du siehst dort nur, welche Ergebnisse mit CSS erreichbar sind. Du siehst nicht die Ergebnisse, die mit CSS unerreichbar sind. Dadurch entsteht vielleicht der Eindruck, dass man mit CSS jedes beliebige, darauf ausgelegte HTML in jeglicher Weise formatieren kann.

Aber Fakt ist: HTML und CSS müssen zusammenspielen. Es ist nicht unbedingt sinnvoll, das HTML schon von Anfang an so aufzublähen, dass man irgendwann später mal beliebige Formatierungen anwenden kann.

- Sven Rautenberg

[dey]

Hallo,

Der CSS Zen Garden beweist, dass es möglich ist, eine feste HTML-Struktur in vielen Varianten optisch darzustellen. Alle veröffentlichten Ergebnisse sind Erfolgsgeschichten. Was du dort nicht siehst, sind die Mißerfolge. Und du siehst dort nur, welche Ergebnisse mit CSS erreichbar sind. Du siehst nicht die Ergebnisse, die mit CSS unerreichbar sind. Dadurch entsteht vielleicht der Eindruck, dass man mit CSS jedes beliebige, darauf ausgelegte HTML in jeglicher Weise formatieren kann.

Aber Fakt ist: HTML und CSS müssen zusammenspielen. Es ist nicht unbedingt sinnvoll, das HTML schon von Anfang an so aufzublähen, dass man irgendwann später mal beliebige Formatierungen anwenden kann.

Da habe ich mich wohl mal auf die falsche Fährte locken lassen!?

bydey

[Gunnar Bittersmann]

Hello out there!

Punkt 2: Die Abfolge der Elemente im HTML bestimmt ganz entschieden deren Reihenfolge. Wenn du H1, dann P (class:summary) und danach diverse P hast, kannst du diese Reihenfolge mit CSS nicht ändern.

Mit CSS 2 nicht. Mit CSS 3 sollte das möglich sein, wann auch immer.

See ya up the road,
Gunnar

[Christian Seiler]

Hallo Gunnar,

Punkt 2: Die Abfolge der Elemente im HTML bestimmt ganz entschieden deren Reihenfolge. Wenn du H1, dann P (class:summary) und danach diverse P hast, kannst du diese Reihenfolge mit CSS nicht ändern.

Mit CSS 2 nicht. Mit CSS 3 sollte das möglich sein, wann auch immer.

An welches Modul denkst Du da?

Viele Grüße,
Christian

[Ashura]

Hallo Christian.

Punkt 2: Die Abfolge der Elemente im HTML bestimmt ganz entschieden deren Reihenfolge. Wenn du H1, dann P (class:summary) und danach diverse P hast, kannst du diese Reihenfolge mit CSS nicht ändern.

Mit CSS 2 nicht. Mit CSS 3 sollte das möglich sein, wann auch immer.

An welches Modul denkst Du da?

Vielleicht „Advanced Layout“?

Einen schönen Samstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

An welches Modul denkst Du da?

Vielleicht „Advanced Layout“?

Das war mir neu.

Ich dachte an die 'move-to'-Eigenschaft aus dem Generated and Replaced Content Module.

See ya up the road,
Gunnar

[afra]

Hallo bydey!

Nun zur Frage:

• ist der Eingriff ein bischen zu schräg und ich muss Probleme erwarten, die ich jetzt noch nicht sehe oder
• ist das so genial, dass ich einen Feature-Artikel schreiben muss

Weder noch. Du hast durch das Blockelement hr, welches Du zwischen die einzelnen Zeilen setzt und ob seiner Eigenschaft einfach 100% des Dokumentes einnimmt, einen Ausgleich für die verschiednen Höhen der einzelnen Elemente Deiner Liste gefunden. Hättest Du jedem Deiner Elemente eine gleiche Höhe, oder eine Mindesthöhe, die dann nicht überschritten werden sollte, gegeben, würdest Du ohne hr den selben Effekt erzielen.

Schönen Gruß

Afra

[dey]

Hallo,

Weder noch. Du hast durch das Blockelement hr, welches Du zwischen die einzelnen Zeilen setzt und ob seiner Eigenschaft einfach 100% des Dokumentes einnimmt, einen Ausgleich für die verschiednen Höhen der einzelnen Elemente Deiner Liste gefunden. Hättest Du jedem Deiner Elemente eine gleiche Höhe, oder eine Mindesthöhe, die dann nicht überschritten werden sollte, gegeben, würdest Du ohne hr den selben Effekt erzielen.

Hatte ich versucht, aber IE wollte die Höhe nicht. Dann habe ich ein wenig rumgespielt und bin über den erfreulichen <hr>-Effekt gestolpert.

bydey