Geplagter

[Layouts mit CSS/Tabellen und die Semantik]

Ich möchte hier mal meine schlechte Laune mit euch teilen :)

Mich nerven in Bezug auf CSS ein paar Dinge. Man kann nämlich nicht alle möglichen Layouts erstellen, die ich gerne erstellen würde. Das ist nur mit einem Mix aus Tabellen und CSS möglich.

Einfach Beispiele:
"Echte Faux Coulumns" (oder wie immer man das schreibt)
oder aber nur ein flexibeles zweispaltiges Layout[1], bei dem sich beide Teile dem Content anpassen. Das ist _ohne Trickserei_ nicht möglich. Trickserei zerstört Semantik. Ich höre in diesem Moment auf zu schreiben, was ich denke und schreibe irgendetwas, was im Grunde nichts mit meinem Grundgedanken zu tun hat.
Und das ist falsch.
Insofern verstehe ich nicht, warum ich mit Browserhacks, anderen Codeschnippseln und komischen optischen Tricks ein Layout nachbauen soll, was mir im Grunde nur mehr Arbeit beschert und sehr wenige Vorteile bringt. Ich bekomme dadurch nämlich _keinen_ besseren Code (es sei denn "verwirrend" == "besser"). Auch auf einem kleinen Handy oder PDA ist das ganze genau wie mit CSS immernoch lesbar. Man hat im Quelltext dann eine Tabelle, die zweckentfremdet ist, aber was soll man tun, wenn man ein flexibles Layout möchte, das aber nicht möglich ist?

Und das schlimmste: selbst in CSS3 wird so etwas nicht möglich sein. Das bedeutet ungefähr: es wird _nie_ ohne Tabellen oder andere dubiose Techniken möglich sein.

So eine Sch****...

[1] Ein Layout, dessen linke Spalte sich an die längste Zeile anpasst, sodass ich keine Breite zuteilen muss. Weder px oder em noch %. Das geht afaik nur mit Tabellen.

[Steel]

Hi!

Deine merkwuerdigen Anschauungen zu Semantik lass ich mal aussen vor. aber das hier ist interessant:

[1] Ein Layout, dessen linke Spalte sich an die längste Zeile anpasst, sodass ich keine Breite zuteilen muss. Weder px oder em noch %. Das geht afaik nur mit Tabellen.

Hm. Wirklich? Du hast das nicht spezifiziert. Also:

<div id='spalte'>tolle spalte</div>
<div>wichtiger inhalt<div>

#spalte
{
 float:left;
}

Keine Ahnung wo sich die spalte da nciht nach ihrem Inhalt richtet...

<div id='inhalt'>
 <div id='spalte'>tolle spalte</div>
 wichtiger inhalt
</div>

#inhalt
{
 width:400px;
 position:relative
}

#spalte
{
 position:absolute;
 right:400px;
}

Sieht bei mir auch aus, wie eine linke Spalte deren breite verdaechtig aehnlich dem Inhalt ist.

Mal so zwei Beispiele in den Raum geworfen. Vielleicht hast du nur Logikprobleme? So wie beim Ausfuellen von Name und Thema? ;P

[Glory]

Mal so zwei Beispiele in den Raum geworfen. Vielleicht hast du nur Logikprobleme? So wie beim Ausfuellen von Name und Thema? ;P

Das war ein Versehen. Gut, ich werde es dir detailliert erklären, wie ich mir das vorstellen.

Man hat zwei Spalten. Links Menü, rechts Inhalt (als Beispiel).
Diese beiden Spalten sollen direkt nebeneinander stehen. Und zwar immer. Sie sollen nicht aufeinmal untereinander stehen. Außerdem sollen sie immer die komplette Breite (oder 50% oder 3.14159em) ausfüllen.

Tja, leider ist es nicht möglich so ein Layout ohne Tabellen zu erstellen. Wenn ich nämlich in deinem Beispiel (das erste Beispiel) einen gaaaanz langen Text in die Navigation schreibe, wird das ganze umgebrochen und die <div> Elemente stehen untereinander. Tja, wie verhinder ich das? Wie bekomme ich es hin, dass innerhalb des <div> Elements umgebrochen wird? Kann ich einen Mindestgröße und eine maximale Größe angeben? (max-width und die anderen, sind dafür ja nicht da)

Fragen über Fragen.

[Steel]

Maxwidth = width
minwidth = eben das.
IE = eventuell Tricks erforderlich.

Dann kann man noch geplante Umbrueche einbauen. Da gibts aber Standard- und Kompatibilitaetsprobleme.

Natuerlich kann man verhindern, dass Floats plotzlich untereinander stehen - und wenn man einen Container drumbaut, der das Ganze, quasi als Korsett, in Form haelt.

[ChrisB]

Hi,

Man hat zwei Spalten. Links Menü, rechts Inhalt (als Beispiel).
Diese beiden Spalten sollen direkt nebeneinander stehen. Und zwar immer. Sie sollen nicht aufeinmal untereinander stehen. Außerdem sollen sie immer die komplette Breite (oder 50% oder 3.14159em) ausfüllen.

Tja, leider ist es nicht möglich so ein Layout ohne Tabellen zu erstellen. Wenn ich nämlich in deinem Beispiel (das erste Beispiel) einen gaaaanz langen Text in die Navigation schreibe, wird das ganze umgebrochen und die <div> Elemente stehen untereinander. Tja, wie verhinder ich das?

Unabhaengig davon, dass das nicht ganz trivial ist - auch die hochgelobte Tabelle erfuellt hier deine definierte *Anforderung* an das Layout nicht, weil sie sich im Zweifelsfalle einfach verbreitert, so dass

Außerdem sollen sie immer die komplette Breite (oder 50% oder 3.14159em) ausfüllen

nicht mehr zutrifft, weil die beiden Spalten dann naemlich u.U. *mehr* als die verfuegbare Breite einnehmen, sprich Querscrolling erforderlich wird.

MfG ChrisB

[Cyx23]

Hallo,

Und das schlimmste: selbst in CSS3 wird so etwas nicht möglich sein. Das bedeutet ungefähr: es wird _nie_ ohne Tabellen oder andere dubiose Techniken möglich sein.

CSS überzeugt in einigen Punkten nicht. Aber es gibt ja immer noch Tabellen
und wird sie wohl auch noch lange Zeit geben ;)
Und dazu für moderne Browser -wohl auch ab 8 beim IE- die Möglichkeit,
Tabellen mit recht überzeugenden Ergebnissen per CSS zu simulieren.

Grüsse

Cyx23

[Mike]

Um ehrlich zu sein, verstehe ich dein Problem nicht. Ich habe Webdesigning mit CSS/XHTML gerlernt und noch nie Tabellen verwendet, okay außer in den ersten Versuchen mit Frontpage vor einigen Jahren.

Ich kann alles ohne wirklich große Schwierigkeiten umsetzen. Tricks braucht man eigentlich nur für dumme Browser. Okay, dann braucht man manchmal Zeit aber...

Ich persönlich kann mit einem Tabellencode einer Seite wenig anfangen. Da bevorzuge ich paar Divs, die leicht zu überschauen sind.

Wenn man die CSS Datei gut kommentiert oder nur sortiert, ist das Überschauen auch ein Kinderspiel. Tatsächlich durchschaue ich Quellcode mit CSS und Divs wesentlich schneller als Tabellensalat.

Außerdem kann man ein Design ohne Tabellen total umkrempeln ohne einmal den HTML Code angerührt zu haben.

Tabellen sind meiner Meinung nach gut für kleine Seiten, die man mal eben mit Dreamweaver für einen bestimmten Zweck erstellt, der keine hohe Priorität hat.

Jedem das seine, aber ich hasse Tabellenquellcode. Einfach nur eklig, vor allem bei großen Seiten.

[Geplagter]

Um ehrlich zu sein, verstehe ich dein Problem nicht. Ich habe Webdesigning mit CSS/XHTML gerlernt und noch nie Tabellen verwendet, okay außer in den ersten Versuchen mit Frontpage vor einigen Jahren.

Ich kann alles ohne wirklich große Schwierigkeiten umsetzen. Tricks braucht man eigentlich nur für dumme Browser. Okay, dann braucht man manchmal Zeit aber...

Gut, ich möchte z.B. ein Layout haben, bei dem ich zwei <div> Elemente nebeneinander habe, eines für das Menü, das andere für den Inhalt. Bei solle gleich lang sein. Am Ende der Seite soll ein Footer sein. (Immer ganz am Boden, außer die anderen beiden <div> Elemente werden zu lang). Sind die <div> Elemente nicht lang genug (weil zu wenig Inhalt), um den Platz bis zum Footer auszufüllen, sollen sie den Platz auch ohne Inhalt ausfüllen.
Wichtig: Sie sollen den Platz ausfüllen, es soll _nicht_ nur so aussehen as täten sie das.

Wenn du es schaffst, mir so ein Layout wirklich einfach zu basteln, was funktioniert und semantisch ist (jede Anweisung für einen Gedankengang), bin ich überzeugt, dass es geht. Wirst du aber nicht hinbekommen (zumindest nicht ohne Tabellen und somit die Semantik zu zerstören).

Jedem das seine, aber ich hasse Tabellenquellcode. Einfach nur eklig, vor allem bei großen Seiten.

Ja! Ich auch! Es ist schrecklich! Aber es geht ja leider nicht anders...

[Struppi]

Gut, ich möchte z.B. ein Layout haben, bei dem ich zwei <div> Elemente nebeneinander habe, eines für das Menü, das andere für den Inhalt. Bei solle gleich lang sein. Am Ende der Seite soll ein Footer sein. (Immer ganz am Boden, außer die anderen beiden <div> Elemente werden zu lang). Sind die <div> Elemente nicht lang genug (weil zu wenig Inhalt), um den Platz bis zum Footer auszufüllen, sollen sie den Platz auch ohne Inhalt ausfüllen.
Wichtig: Sie sollen den Platz ausfüllen, es soll _nicht_ nur so aussehen as täten sie das.

Du beschreibst ein Tabellenlayout, also setzte Tabellen ein. Es sind zwar keine tabellarische Daten, aber trotz allem solte das sematisch korrekt sein.  Besser wäre es natürlich du versuchst ein Layout was nicht auf eine Tabellenstruktur basiert.

Wenn du es schaffst, mir so ein Layout wirklich einfach zu basteln,

Naja, sollte kein Problem sein, aber warum soll man sowas machen?
Dein Ansatz berücksichtigt nicht das ein Browserfenster immer eine andere Größe hat und HTML/CSS sich wunderbar an den Inhalt anpaßt - du willst das sich der Inhalt an das Fenster anpaßt. Dann wirst du mit Flickschusterei leben müssen.

Struppi.

[Struppi]

Mich nerven in Bezug auf CSS ein paar Dinge. Man kann nämlich nicht alle möglichen Layouts erstellen, die ich gerne erstellen würde.

Hast du mal versucht deine Designvorstellungen an die Möglichkeiten anzupassen?

Einfach Beispiele:

...

Insofern verstehe ich nicht, warum ich mit Browserhacks, anderen Codeschnippseln und komischen optischen Tricks ein Layout nachbauen soll, was mir im Grunde nur mehr Arbeit beschert und sehr wenige Vorteile bringt.

Genau!
Versuch ein Layout zu entwickeln, dass ohne Browserhacks und anderen Tricks auskommt.

Struppi.

[Elya]

Hallo Struppi,

Mich nerven in Bezug auf CSS ein paar Dinge. Man kann nämlich nicht alle möglichen Layouts erstellen, die ich gerne erstellen würde.

Hast du mal versucht deine Designvorstellungen an die Möglichkeiten anzupassen?

nene, so geht's ja nicht! Schon beim Designen die CSS-Schere im Kopf zu haben, da kommt doch nix raus...

Gruß aus Köln-Ehrenfeld,

Elya

[Struppi]

Mich nerven in Bezug auf CSS ein paar Dinge. Man kann nämlich nicht alle möglichen Layouts erstellen, die ich gerne erstellen würde.

Hast du mal versucht deine Designvorstellungen an die Möglichkeiten anzupassen?

nene, so geht's ja nicht! Schon beim Designen die CSS-Schere im Kopf zu haben, da kommt doch nix raus...

und wenn du für andere Medien gestaltest, machst du dir dann auch keine Gedanken über die Möglichkeiten und Einschränkungen?

Struppi.

[Elya]

Hallo Struppi,

und wenn du für andere Medien gestaltest, machst du dir dann auch keine Gedanken über die Möglichkeiten und Einschränkungen?

Im ersten, kreativen Schritt? Idealerweise nein. Frag mal Chräcker ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[Struppi]

Hallo Struppi,

und wenn du für andere Medien gestaltest, machst du dir dann auch keine Gedanken über die Möglichkeiten und Einschränkungen?

Im ersten, kreativen Schritt? Idealerweise nein. Frag mal Chräcker ;-)

Also wenn du z.b. ein Design für einen Kronkorken entwerfen müßtest, nimmst du ein eckiges DIN A4 Blatt und malst da den Entwurf drauf?
Du würdest keine runde Vorlage zu benutzen? Stell ich mir schwierig in der Umsetzung vor, aber genau darum geht es ja in dem Thread, wenn der Entwurf nicht paßt, wird's schwierig.

Struppi.

[Elya]

Hallo Struppi,

Also wenn du z.b. ein Design für einen Kronkorken entwerfen müßtest, nimmst du ein eckiges DIN A4 Blatt und malst da den Entwurf drauf?

okok, you got me ,-) - nichtsdestotrotz bin ich der Ansicht, daß man viel zu vielen Websites die CSS-Schere im Kopf ansieht ("boxy") und wir uns oftmals aus Denkfaulheit viel zu früh in unseren kreativen Möglichkeiten einschränken.

Gruß aus Köln-Ehrenfeld,

Elya

[Struppi]

Also wenn du z.b. ein Design für einen Kronkorken entwerfen müßtest, nimmst du ein eckiges DIN A4 Blatt und malst da den Entwurf drauf?

okok, you got me ,-) - nichtsdestotrotz bin ich der Ansicht, daß man viel zu vielen Websites die CSS-Schere im Kopf ansieht ("boxy") und wir uns oftmals aus Denkfaulheit viel zu früh in unseren kreativen Möglichkeiten einschränken.

Die hab ich nicht ;-)
Insofern kann ich die Einschränkungen verkraften.

Aber ich hab bei "kreativen" Webseiten oft den Eindruck, das wäre wie wenn man bei einem Papierentwurf mit Uhu ein bisschen hierhin klebt, damit das Blatt ein bisschen größer ist und an anderer Stelle den Text mit einer wunderschönen Falttechnik versteckt, der Nutzen wird geringer, sieht aber bestimmt kreativ aus. Da ist mir ein an das Medium und die Technik angepaßtes Layout, auch wenn es langweilig erscheint, lieber.

Struppi.

[ChrisB]

Hi,

nichtsdestotrotz bin ich der Ansicht, daß man viel zu vielen Websites die CSS-Schere im Kopf ansieht ("boxy")

Wenn irgendetwas mich zu "boxy" Layouts foermlich zwingt - dann sind das Tabellen.

und wir uns oftmals aus Denkfaulheit viel zu früh in unseren kreativen Möglichkeiten einschränken.

Tabellen mit ihrem Raster schraenken mich doch viel mehr ein, als CSS es koennte.

MfG ChrisB

[Elya]

Hallo ChrisB,

Wenn irgendetwas mich zu "boxy" Layouts foermlich zwingt - dann sind das Tabellen.
Tabellen mit ihrem Raster schraenken mich doch viel mehr ein, als CSS es koennte.

ich hab nicht gesagt, daß ich mit Tabellen kreativer sein könnte ,-) Ich finde nur, daß wir uns vom Werkzeug nicht in der Ideenvielfalt einschränken lassen dürfen (und zwar nicht, weil das Werkzeug ungeeignet ist, sondern weil wir es womöglich nicht perfekt beherrschen).

Gruß aus Köln-Ehrenfeld,

Elya

[Steel]

Hi!

("boxy")

Du hast nen runden Monitor? Ich nicht. Also ist es doch normal. Ausser ich hab zuviel Platz meine Informationen darzustellen. Dann kann ich den auch mit runden Geschichten einschraenken. Oder man hat schlicht keine Informationen.

Ich finde 'boxy' auf nem Monitor ganz normal. Ich biete euf einer Webseite Informationen an. Wenn ich was stylisches will, haelt mich keiner davon ab, aber Style nur um des Styles willen ist purer Zelbstzweck und von daher (fuer mich) ueberfluessig und uninteressant. Poser gibts schon genug. Womit ich nichts gegen ein nettes Design sagen will.

[Harlequin]

Yerf!

Und das schlimmste: selbst in CSS3 wird so etwas nicht möglich sein. Das bedeutet ungefähr: es wird _nie_ ohne Tabellen oder andere dubiose Techniken möglich sein.

Was ist an display:table-* dubios? Es soll aussehen wie eine Tabelle und das wird natürlich über CSS geregelt. Und das geht sogar mit CSS2!

Dich stört, dass das der IE nicht kann? Dann mecker aber über Microsoft und nicht über CSS...

Gruß,

Harlequin