HTML Kleine Grundsatzfrage zu komplexen Layouts in XHTML

[sverebom]

Hallo,

ich schreibe gerade meinen eigenen Style für ein phpBB-Forum. Mein Ehrgefühl gebietet es mir, dass Layout mit Div-Containern und Listen zu bewerkstelligen und nicht mit Tabellen (vor allem aber möchte ich von der Simplizität und Flexibilität eines Div-Layouts profitieren). Nun stoße ich aber auf eine grundsätzliche Frage, auf die ich gerne eines Antwort aus fundiertem Munde hätte (Google liefert mir nur simple Code-Beispiele, die meine Frage nicht behandeln): Ist es zulässig, Tabellen schlichtweg durch verschachtelte Listen zu ersetzen oder sollte man mit verschachtelten Blockelementen (ja, ich weiß, dass <li> auch ein Blockelement ist) arbeiten?

Zwar sehe ich viele Forenstyles, die mit verschachtelten Listen arbeiten, was dann in etwa so aussieht:

<div id="box_content">
    <ul class="list_content">
        <li class="row_content">
            <dl>
                <dt class="col_author"></dt>
                <dd class="col_subject"></dd>
                <dd class="col_clicks"></dd>
            </dl>
        </li>
    </ul>
</div>

Mit diesem Code lässt sich natürlich sehr einfach eine Tabellenstruktur nachbilden (<dt> und <dd> nach links "floaten" lassen und mit "row_content" anschließenden "clearen">, aber stellenweise kommt genauso viel Code zusammen wie bei einem Tabellenlayout. Vor allem bin ich mir aber nicht sicher, ob Listen diese verwendet werden dürfen (nur weil es funktioniert und viele Layouts auf diese Weise funktionieren, muss es ja nicht im Sinne des Erfinders sein), oder ob man mit verschachtelten Blockelementen arbeiten sollte, etwa so:

<div id="box_content">
    <div class="row_content">
        <div class="col_author"></div>
        <div class="col_subject"></div>
        <div class="col_clicks"></div>
    </div>
</div>

Oder ist diese oder eine ähnliche Lösung erst Recht unzulässig, vielleicht weil Div-container auf diese Weise nicht verwendet werden dürfen?

Vielen Dank

 

[methical]

Hmm, imho ists ein Missbrauch von Definitionslisten.
Ich würde lieber mit verschachtelten Divs arbeiten, hält auch den Code kleiner

Bei so einer Frage hilft immer die Überlegung, was drückt der Tag aus, quasi die logische Auszeichnung des Textes. Wenn man sich mal von dem CSS loslöst und die reine unformatierte Seite betrachtet, hat man nur noch den Content und die Tags die den Content auszeichnen. Eine Definitionsliste würde ich halt nur für eine Definition nutzen.

Bei deinem Beispiel würde ich die einzelnen Columns also so notieren (spaltentyp -> tag):
author -> cite
subject -> h?
clicks -> p vielleicht?

Wenn man sich nicht allzusehr den Kopf über logische Auszeichnungen zerbrechen will folgende Faustregeln:

- Ist der Inhalt in einer Tabelle darstellbar kommt er in eine Tabelle
- Ist der Inhalt eine Liste (Navi zB) kommt er in eine Liste
- Bereich eines Dokuments, ab in ein Div
- Überschrift, h1 bis h6, wobei es nur _eine_ h1 pro Seite gibt
- Absatz, ab in nen p Tag
- Fettgedrucktes, strong

usw. Hoffe das hilft bei deiner Entscheidung. Man sollte halt beim Rrstellen einfach im Hinterkopf haben wie die Seite logisch, ohne CSS aufgebaut aussieht.

 

[QXARE]

Wieso für die Übersicht <div>s verwenden wenn die Tabelle auch den Zweck erfüllt und semantisch sogar zu bevorzugen ist. Nachdem die Inhalte ja tabellarisch sind und du sie nach Spalten und Zeilen einteilst, bietet sich hier eine Tabelle wunderbar an.

Der Ansatz mit den Listen ist aber auch nicht ganz wegzudenken, weil es ja eine Liste von Threads/Einträgen sind. Auf die Definitionsliste würde ich hier aber verzichten.

Ich müsste mich jetzt mit dem Thema mehr befassen um am Ende dann doch zu dem Ergebnis zu kommen, dass ich keine Lösung bzw. Präferenz habe, ob ich die Übersicht nun mit einer Tabelle oder einer Liste und ein paar <div>s darstellen soll.

 

[sverebom]

Danke für die Anregungen. So ähnlich sehen auch meine Überlegungen aus. Ich habe daher auch angefangen, mit verschachtelten Divs zu arbeiten, immer mit dem Bestreben, so wenig Code wie möglich zu produzieren und so nahe wie möglich am den Standards und den Grundgedanken hinter den Standards zu arbeiten.

An der Stelle habe ich den Eindruck, dass der Sprachumfang von XHTML bei Weitem noch nicht ausreicht, um alle Arten von Webseiten korrekt zu beschreiben. Für Blogs reicht es bspw. vollkommen aus, aber bei einem Forum gibt es viele Elemente, die sich nicht eindeutig in ein Schema pressen lassen. Mir fehlen da einige Elemente, etwa ein <table>-Tag, der sich so flexibel anfühlt wie ein div-Tag, oder Tags, um Zeitangaben und minderwichtige (aber doch notwendige Informationen) sinnvoll bezeichnen zu können. Einziger Ausweg scheint mir der Einsatz von vielen span-Tags, die mit einer Klasse versehen werden, zu sein. Das führt aber wiederum zu unnötig vielen Klassen im Stylesheet führt (von denen viele vielleicht nur zwei Mal im ganzen Forum auftauchen), was ich auch vermeiden möchte.

Momentan arbeite ich wie oben beschrieben mit Div-Elementen, die ich mit viel <span>-Tags fülle, wenn sich die Inhalte nicht eindeutig als Überschrift, Zitat, Absatz etc. zu erkennen geben. Das geht auch ganz gut voran, aber immer wieder stoße ich auf Inhalte, bei denen ich mir nicht sicher bin, ob nun bspw. p-Tag angebracht ist oder doch wieder ein span-Tag.

Ach, eine Frage noch zum Schluss: Ist es wirklich so schlimm, Tags wie <small> oder <big> zu verwenden, wie man überall hört? Diese Tags wären durchaus hilfreich für mich, um Inhalte, die ich ein wenig in den Hinter- oder Vordergrund stellen möchte, auszuzeichnen.

 

[QXARE]

Wenn der Validator dir bei <small> oder <big> keine Fehler ausspuckt kannst du sie ja verwenden, habe noch nicht gehört dass das irgendwie schlecht sein soll, wobei ich hier auch <span>s verwenden würde - frag mich nicht warum.

Die Elemente die du dir wünscht, um eine Seite noch besser gliedern zu können und Zeiten als Zeiten auszeichnen zu können findest du aber in (X)HTML5 wieder.

 

[sverebom]

@QXARE
Gäbe es Tabellen, die ganze ohne cellpadding, cellspacing, usw. auskommen und so einfach zu manipulieren wären wie Listenelemente, wären Tabellen meine erste Wahl. Da Tabellen aber so furchtbar sperrig sind und auch meine Kreativität einschränken, mache ich einen großen Bogen um Tabellen (außerdem produzieren sie zuviel unnützen Code).

Listen eignen sich natürlich auch hervorragend, um Tabellen abzubilden (wie ich finde sogar deutlich besser als Tabellen in deren derzeitigen Verfassung). Aber ich möchte mir eben angewöhnen, die vorhandenen Elemente so einzusetzen, wie es vorgesehen ist. Natürlich kann man die Definitionen sehr frei auslegen und behaupten, dass eine Forum auch nur eine Auflistung von Inhalten ist, aber ich bin in der Hinsicht sehr strikt, was den Interpretationsspielraum angeht. Ich tue mich sogar schwer, Menü-Listen zu akzeptieren. Wenn Menü-Listen akzeptiert sind, warum gibt es dann kein entsprechendes Element (dass meinetwegen wie eine Liste arbeitet, jedoch entsprechend bezeichnet wird)?

Abgesehen davon produzieren verschachtelte Listen kaum weniger Code als Tabellen, und wenn ich beim Schreiben des Quellcodes bis zu vier Listen schließen muss, habe ich stets Gefühl, etwas falsch gemacht zu haben.

@<small> und <big>
Die einhellige Meinung ist offenbar, dass man <small> und <big> aus Gründen der Flexibilität besser durch Klassen ersetzt, was ja auch nicht verkehrt ist. Es ist also keine Frage der Validität sondern des Nutzens. Aber in meinem Forum gibt es viele kleine Elemente, die jetzt und auch in Zukunft kleiner oder größer schreiben werde, und da kämen mir diese Tags sehr gelegen, um einige Klassen zu sparen und bei Bedarf Raum für einen zusätzlichen Selektor zu haben. Schöner wären natürlich Tags, die diese Element exakt bezeichnen (Autor, Zeit, Ergänzung, Hinweis etc.) oder zumindest dessen Bedeutung gewichten, aber die gibt es ja noch nicht.

Anyway, ich habe halt gehört, dass diese Tags nicht gerne gesehen werden, aber bis auf Weiteres bleiben diese Tags aber valide. Von daher werde ich diese Tags wohl ausnahmsweise verwenden.

 

[Eagle-PsyX-]

Eigentlich sind Pseudo-Element nicht so gern gesehen.
Es wäre sinnvoller, anstatt <small> oder <big> lieber die bereits vorhandenen Elemente zu nutzen und definieren.
<em> / <strong> / <q> / <address> / <cite> etc.
Leider werden diese zu selten genutzt:
HTML-Elemente für logische Auszeichnung im Text

So steht <em> für das Wort "emphasis" (dt. Emphase) was soviel bedeutet wie "Hervorhebung" oder "Betonung" in diesem Zusammenhang.

 

[sverebom]

Aber ist <strong> dann nicht auch eine Pseudo-Klasse?
Wie auch immer, wahrscheinlich mache ich mir auch zu viele Gedanken. Ich acker mich nochmal durch Selfhtml und die Referenzen für XHTML und CSS und bastel mir ein Konzept zusammen, dass ich mir als Vorlage an die Pinnwand hänge und auf alle Dokumente anwende. Zwei letzte Fragen habe ich aber noch:

1. Ist es zulässig, ein Element mit mehreren Klassen zu versehen, bspw. <span class="gensmall break"> oder <div class="row_content clear">, um einzelne bei Bedarf mit einem zusätzlichen Attribut zu versehen, ohne eine weitere Variante der jeweiligen Klassen mit einem zusätzlichen Zeilenumbruch, clear oder Hover-Effekt schreiben zu müssen?

2. Ist es zulässig, mehrere Selektoren zu verknüpfen, etwa ".box_forums .row_content .notify", um nur den Selektor ".notify", der in einem Objekt mit den Selektoren ".box_forums" und ".row_content" auftaucht, gezielt beeinflussen zu können?

Ich würde diese Möglichkeiten gerne nutzen und ausreizen, um die Masse an notwendigen Klassen klein und übersichtlich zu halten, und ich weiß auch, dass beide Möglichkeiten funktionieren, aber das trifft ja auch auf <small> und <big> zu. Mich interessiert, ob diese Vorgehensweise auch als "Bad Practice" angesehen werden, und wenn dem so wäre, würde ich dies in meinem Konzept berücksichtigen.

 

[QXARE]

@QXARE
Gäbe es Tabellen, die ganze ohne cellpadding, cellspacing, usw. auskommen und so einfach zu manipulieren wären wie Listenelemente, wären Tabellen meine erste Wahl. Da Tabellen aber so furchtbar sperrig sind und auch meine Kreativität einschränken, mache ich einen großen Bogen um Tabellen (außerdem produzieren sie zuviel unnützen Code).

Die Attribute cellpadding und cellspacing kannst du ganz einfach durch CSS - siehe border-collapse und border-spacing - ersetzen.

Du gehst etwas falsch an das Thema ran. Tabellen sind in ihrer Handhabung wirklich sehr einfach und auch in der Gestaltung gibt es fast keine Grenzen. Sie produzieren auch keinen unnützen Code da jeder Tag seine Berechtigung hat um die Inhalte tabellarisch darzustellen. Mehr Code hast du sicher in der <div> bzw. Listenvariante.

Wie gesagt, in (X)HTML5 finden sich bereits einige neue Definitionen für Navigationen, Seitenaufteilung usw.

Aber ist <strong> dann nicht auch eine Pseudo-Klasse?
Wie auch immer, wahrscheinlich mache ich mir auch zu viele Gedanken. Ich acker mich nochmal durch Selfhtml und die Referenzen für XHTML und CSS und bastel mir ein Konzept zusammen, dass ich mir als Vorlage an die Pinnwand hänge und auf alle Dokumente anwende. Zwei letzte Fragen habe ich aber noch:

1. Ist es zulässig, ein Element mit mehreren Klassen zu versehen, bspw. <span class="gensmall break"> oder <div class="row_content clear">, um einzelne bei Bedarf mit einem zusätzlichen Attribut zu versehen, ohne eine weitere Variante der jeweiligen Klassen mit einem zusätzlichen Zeilenumbruch, clear oder Hover-Effekt schreiben zu müssen?

2. Ist es zulässig, mehrere Selektoren zu verknüpfen, etwa ".box_forums .row_content .notify", um nur den Selektor ".notify", der in einem Objekt mit den Selektoren ".box_forums" und ".row_content" auftaucht, gezielt beeinflussen zu können?

Ich würde diese Möglichkeiten gerne nutzen und ausreizen, um die Masse an notwendigen Klassen klein und übersichtlich zu halten, und ich weiß auch, dass beide Möglichkeiten funktionieren, aber das trifft ja auch auf <small> und <big> zu. Mich interessiert, ob diese Vorgehensweise auch als "Bad Practice" angesehen werden, und wenn dem so wäre, würde ich dies in meinem Konzept berücksichtigen.

Pseudo Klassen sind :hover, :link usw. - <strong> ist ein Tag, vllt. etwas falsch ausgedrückt aber ich wollt nur drauf hinweisen.

1. Du kannst einem Tag mehrere Klassen zuweisen. Wie viele es sind ist eigentlich egal, solang sie sinnvoll vergeben werden.

2. Ich versteh den Punkt nicht so ganz. Du kannst einen Tag auch gezielt durch seine Klassen als Gesamtes ansprechen. Zb.: .row_content.clear . Zu empfehlen ist das allerdings (solang es browserunabhängig sein soll) nicht, da der IE beispielsweise diese Art der Selektion nicht unterstützt.