HTML-Listen mit CSS in Tabellenform bringen

[Turok]

Hallo,

ich habe eine Liste von Links, die als ungeordnete HTML-Liste ausgegeben werden, also mit < ul >. Ich würde diese Liste nun gerne mit CSS optisch in eine Tabellenform bringen.

Ich habe für < li > jeweils display:inline; gesetzt. Korrekterweise werden nun auch alle Einträge im Fließtext angezeigt und wie solcher auch umbrochen. Leider kann man bei der inline-Anzeige von Listenelementen offenbar keine Breite angeben, width bleibt jedenfalls ohne Effekt. Das bräuchte ich aber, damit in jeder Zeile die gleiche Anzahl von Elementen bzw. Links stehen, das ganze würde somit wie eine Tabelle wirken. HTML-Tabellen fallen aus, da ich verschiedene CSS-Stile verwende und ich diesen Effekt nur in einem davon brauche.

Danke
Turok

[KD-one]

Hi Turok,

Anstatt mit display rumzuspielen, solltest du es mal mit float versuchen:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

Gruß

Kurt

[Axel Richter]

Hallo,

ich habe eine Liste von Links, die als ungeordnete HTML-Liste ausgegeben werden, also mit < ul >. Ich würde diese Liste nun gerne mit CSS optisch in eine Tabellenform bringen.

Eine Liste ist eine Liste und eine Tabelle ist eine Tabelle. Eine Liste, die optisch wie eine Tabelle aussieht, ist nicht existent.

Eine Tabelle ist _auch_ deswegen eine Tabelle, _weil_ sie wie eine Tabelle aussieht, selbst wenn die darin enthaltenen Daten nicht explizit der üblichen Tabellendatenstruktur von Feld und Datensatz entsprechen. Wenn Du also eine Tabelle sehen willst, dann erzeuge eine Tabelle.

Solltest Du mehrere Linklisten nur mehrspaltig nebeneinander anordnen wollen, dann mache genau das. Erzeuge mehrere Listen in Bereichen (DIVs), die Du mit float nebeneinander positionieren kannst.

viele Grüße

Axel

[NaeZnaL]

Hallo,

Eine Liste ist eine Liste und eine Tabelle ist eine Tabelle. Eine Liste, die optisch wie eine Tabelle aussieht, ist nicht existent.

Eine Liste ist es nur noch vom HTML-Quellcode her und da er keine Liste haben will, versucht es sie ja mit CSS in eine Tabellenform zu bringen.

Eine Tabelle ist _auch_ deswegen eine Tabelle, _weil_ sie wie eine Tabelle aussieht, selbst wenn die darin enthaltenen Daten nicht explizit der üblichen Tabellendatenstruktur von Feld und Datensatz entsprechen. Wenn Du also eine Tabelle sehen willst, dann erzeuge eine Tabelle.

Genau das will er ja mit CSS erreichen.

Solltest Du mehrere Linklisten nur mehrspaltig nebeneinander anordnen wollen, dann mache genau das. Erzeuge mehrere Listen in Bereichen (DIVs), die Du mit float nebeneinander positionieren kannst.

Er hat ausdrücklich geschrieben, das er verschiedene Designs verwendet, die anhand unterschiedlicher CSS-Dateien definiert werden und es somit nicht möglich ist den HTML-Code zu verändern.

Mit freudlichen Grüßen, NaeZnaL

[Axel Richter]

Hallo,

Eine Liste ist eine Liste und eine Tabelle ist eine Tabelle. Eine Liste, die optisch wie eine Tabelle aussieht, ist nicht existent.

Eine Liste ist es nur noch vom HTML-Quellcode her und da er keine Liste haben will, versucht es sie ja mit CSS in eine Tabellenform zu bringen.

Was aber nicht funktionieren wird, jedenfalls nicht mit _einer_ Liste. Auch innerhalb einer Zeile fließende LI-Elemente, wie von Dir vorgeschlagen, sind für mich keine Lösung. Ein LI-Element hat folgenden Aufbau: ein Aufzählungselement, gefolgt von einem Einzug, gefolgt vom Text, welcher, wenn er mehrzeilig ist, immer auf Höhe des Einzuges beginnt. Wie stellst Du Dir das als innerhalb einer Text-Zeile fließendes Element vor?

Außerdem sind innerhalb einer Zeile fließende Elemente _keine_ Tabelle, auch, wenn sie die gleiche Breite haben und es deshalb über mehrere Zeilen so aussehen mag.

Eine Tabelle ist _auch_ deswegen eine Tabelle, _weil_ sie wie eine Tabelle aussieht, selbst wenn die darin enthaltenen Daten nicht explizit der üblichen Tabellendatenstruktur von Feld und Datensatz entsprechen. Wenn Du also eine Tabelle sehen willst, dann erzeuge eine Tabelle.

Genau das will er ja mit CSS erreichen.

Man kann aber mit CSS keine Tabellen erstellen.

viele Grüße

Axel

[Turok]

Hi

Was aber nicht funktionieren wird, jedenfalls nicht mit _einer_ Liste. Auch innerhalb einer Zeile fließende LI-Elemente, wie von Dir vorgeschlagen, sind für mich keine Lösung. Ein LI-Element hat folgenden Aufbau: ein Aufzählungselement, gefolgt von einem Einzug, gefolgt vom Text, welcher, wenn er mehrzeilig ist, immer auf Höhe des Einzuges beginnt. Wie stellst Du Dir das als innerhalb einer Text-Zeile fließendes Element vor?

Die Inhalt sind jeweils so kurz, so dass bei einer Breite von z.B. 200px auf keinen Fall Umbrüche entstehen.

Man kann aber mit CSS keine Tabellen erstellen.

Ich will auch keine Tabelle im Sinne von HTML-Tabellen haben. Ich möchte nur die Links, die sonst alle untereinander stehen, der Übersicht halber nebeneinandern und untereinander haben, was mit float und einer festen Länge der LI auch klappt. Ansonsten hätte ich natürlich keine Liste, sondern Table verwendet.

Turok

[NaeZnaL]

Hallo,

Auch innerhalb einer Zeile fließende LI-Elemente, wie von Dir vorgeschlagen, sind für mich keine Lösung.

Soll ja auch keine Lsung für dich sein, sondern für Turok.

Ein LI-Element hat folgenden Aufbau: ein Aufzählungselement

läst sich durch "list-style-type:none;" entfernen.

gefolgt von einem Einzug

ul{margin-left: 0px;} und auch dieser ist verschwunden

Wie stellst Du Dir das als innerhalb einer Text-Zeile fließendes Element vor?

Das es nach der änderung aussieht wie eine Tabellenzelle.

Außerdem sind innerhalb einer Zeile fließende Elemente _keine_ Tabelle, auch, wenn sie die gleiche Breite haben und es deshalb über mehrere Zeilen so aussehen mag.

Mehr wollte er ja auch gar nicht. Es soll nur so aussehen. Welcher Code dahinter steckt ist vollkommen egal.

Man kann aber mit CSS keine Tabellen erstellen.

Das ist so nicht ganz richtig. Es lassen sich mit hilfe von display durchaus Tabellen mit CSS erstellen: http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

Mit freudlichen Grüßen, NaeZnaL

[Axel Richter]

Hallo,

Soll ja auch keine Lsung für dich sein, sondern für Turok.

Dies ist ein Forum. In einem solchen werden Probleme diskutiert und Meinungen geäußert. Dies ist _keine_ Lösungs-Lieferungs-Maschine ;-))

Ein LI-Element hat folgenden Aufbau: ein Aufzählungselement
läst sich durch "list-style-type:none;" entfernen.
gefolgt von einem Einzug
ul{margin-left: 0px;} und auch dieser ist verschwunden
Wie stellst Du Dir das als innerhalb einer Text-Zeile fließendes Element vor?
Das es nach der änderung aussieht wie eine Tabellenzelle.

Das hat er ja hinbekommen, wenn die Texte in den LI-Elementen einzeilig bleiben, wenn es _nur_ Texte, keine anderen Objekte in den LI-Elementen gibt, wenn der Browser so gnädig ist, es auch richtig darzustellen, wenn, wenn, wenn...

Das Ansinnen, mittels CSS _mehrere_ _unterschiedliche_ Layouts für _eine_ HTML-Seite zu erzeugen, ist aber, meiner Meinung nach, zum Scheitern verurteilt. Heraus kommen dabei Darstellungen, bei denen sich, in unterschiedlichen Browsern bzw. Browser-Fenstergrößen, Elemente überlappen oder eventuell gar nicht mehr zu erreichen sind, weil sie links oder rechts aus dem Viewport ragen, ohne, dass eine Scrollmöglichkeit besteht. Solche Anti-CSS-Seiten findet man immer häufiger.

Ich bin schon für die Trennung von Inhalt (HTML) und Layout (CSS), glaube aber, dass es trotzdem eine zwingende Verbindung zwischen beidem gibt. Das heißt, dass bestmmte Layouts für bestimmte Inhalte zwingend sind und eben bestimmte Layouts für bestimmte Inhalte unmöglich sind. Ein Tabellen-Layout ohne Tabelle gehört für mich in diese Kategorie.

Man kann aber mit CSS keine Tabellen erstellen.
Das ist so nicht ganz richtig. Es lassen sich mit hilfe von display durchaus Tabellen mit CSS erstellen: http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

Und wie soll der HTML-Kontext dazu aussehen? Diese CSS-Eigenschaften sind, meiner Meinung nach, nicht für HTML, sondern für andere SGML basierte Sprachen gedacht.

viele Grüße

Axel

[Turok]

Hallo,

Das hat er ja hinbekommen, wenn die Texte in den LI-Elementen einzeilig bleiben, wenn es _nur_ Texte, keine anderen Objekte in den LI-Elementen gibt, wenn der Browser so gnädig ist, es auch richtig darzustellen, wenn, wenn, wenn...

Das ganze wird für ein internes CMS gebraucht. Ich weiß daher genau, wie lang die Texte in den Listenelementen sind.Und es sind definitiv nur Texte enthalten.

Das Ansinnen, mittels CSS _mehrere_ _unterschiedliche_ Layouts für _eine_ HTML-Seite zu erzeugen, ist aber, meiner Meinung nach, zum Scheitern verurteilt. Heraus kommen dabei Darstellungen, bei denen sich, in unterschiedlichen Browsern bzw. Browser-Fenstergrößen, Elemente überlappen oder eventuell gar nicht mehr zu erreichen sind, weil sie links oder rechts aus dem Viewport ragen, ohne, dass eine Scrollmöglichkeit besteht. Solche Anti-CSS-Seiten findet man immer häufiger.

Warum soll das zum Scheitern verurteilt sein? Ich kann damit bequem verschiedene CSS-Dateien erstellen, in denen z.B. das Menü an anderen Stellen plaziert wird, unterschiedliche farbliche Hervorhebung usw. Der User kann auswählen, welchen Style er möchte; diese wird in der Benutzerdatenbank festgehalten und in den PHP-Seiten wird entsprechend die gewünschte CSS-Datei eingebunden. Ob da nun eine oder 100 CSS-Dateien existieren, ist belanglos.

Ein Tabellen-Layout ohne Tabelle gehört für mich in diese Kategorie.

Sieh das mit dem Tabellenlayout nicht so streng. Ich habe den Begriff Tabelle verwendet, weil das meinen Wunsch am nächsten kommt. Statt

Link1
Link2
Link3
Link4

will ich einfach

Link1  Link2
Link3  Link4

Der Hintergrund ist auch der, dass ich notfalls auch per Textkonsole mit Lynx zugreifen kann, und da wird nix mit Tabellen. Dort hätte ich ganz normal die HTML-Liste.

Grüße
Turok

[Axel Richter]

Hallo Turok,

Das Ansinnen, mittels CSS _mehrere_ _unterschiedliche_ Layouts für _eine_ HTML-Seite zu erzeugen, ist aber, meiner Meinung nach, zum Scheitern verurteilt.

Warum soll das zum Scheitern verurteilt sein? Ich kann damit bequem verschiedene CSS-Dateien erstellen,
in denen z.B. das Menü an anderen Stellen plaziert wird,

Eben das finde ich nicht sinnvoll. Allgemein stört mich, wenn der Seiteneindruck, also der gesamte Seitenaufbau, von Nutzereinstellungen abhängig ist. Dazu habe ich folgende Meinungen:
1. Information und Layout bilden eine Einheit. Bereits mit der Wahl der HTML-Elemente lege ich teilweise deren Layoutposition fest, weil sie die Logik so gebietet. Eine Überschrift sollte als solche zu erkennen sein. Ein Liste sollte wie eine Liste aussehen... "Freie" Layoutpositionierung kann ich fast immer nur mit DIV-Suppe erreichen.
2. Der Anbieter der Information sollte die günstigste Form für die Information finden.
3. Der Nuzer will zur Information geführt werden. Er will nicht am Layout herumspielen.
4. Anbieter, die trotzdem wählbare "Positions-Layouts" einseten, wollen entwerder zeigen: "Hey, schau mal, ich kann mit CSS umgehen." oder sie können eben die günstigste Form für die Information _nicht_ finden. Das ist unprofessionell.

[1]

unterschiedliche farbliche Hervorhebung usw.

Das ist wiederum durchaus möglich und kann auch sinnvoll sein. In diese Kategorie fallen auch unterschiedliche wählbare Schriftarten, die Wahl, wie man Links hervorgehoben haben möchte, ob man hover-Effekte will, wie besuchte, aktive, fokussierte Links aussehen, welche Elemente welche Hintergrundbilder bzw. -farben haben ...

Der User kann auswählen, welchen Style er möchte; diese wird in der Benutzerdatenbank festgehalten und in den PHP-Seiten wird entsprechend die gewünschte CSS-Datei eingebunden. Ob da nun eine oder 100 CSS-Dateien existieren, ist belanglos.

Das ist richtig und wird auch, mit Wahlmöglichkeiten aus [1], so funktionieren. Bei wahlweise anders positionierten Elementen habe ich da meine Zweifel.

Statt

Link1
Link2
Link3
Link4

will ich einfach

Link1  Link2
Link3  Link4

Ja, wenn Du diese Darstellung als sinnvoll ansiehst, dann setze diese _eine_ Darstellung um. Das funktioniert auch, für diese _eine_ Linkliste, mit Deinem Hintergrundwissen über den Inhalt der Links. Und es ist _keine_ Tabelle ;-)). Ich würde hierfür allerdings einfach jeweils zwei Links in einem Textabsatz nebeneinander schreiben. Mit display:block, float und width kann das Aussehen dann auch erreicht werden. Im Lynx, bzw. ohne CSS, sieht es dann zumindest ähnlich aus.

Was mich stört ist, wenn der Produzent einer Web-Seite, die den Nutzer eigentlich zu einer Information, im weitesten Sinne, führen soll, nicht weiß, in welcher Form er diese Information rüberbringen will, und deshalb den Nutzer in der Verantwortung lässt, sich die Form selbst zusammenzustoppeln. So sieht es jedenfalls für mich aus, wenn ich als Nutzer zwischen unterschiedlichen "Positions-Layouts" wählen kann.

Auch bei einem CMS sollte sich der Ersteller Gedanken über den günstigsten Seitenaufbau gemacht haben und diesen dann auch durchsetzen. Der Nutzer des CMS kann bestimmte Hintergründe nicht kennen, wird also nur schwer entscheiden können, welches Layout für ihn nun das beste ist, es sei denn er probiert alle durch. Das finde ich uneffektiv. Ausnahmen sind Layouteinstellungen der Kategorie [1].

Der Hintergrund ist auch der, dass ich notfalls auch per Textkonsole mit Lynx zugreifen kann, und da wird nix mit Tabellen. Dort hätte ich ganz normal die HTML-Liste.

Ja. Genau das soll die Trennung von Inhalt und Layout auch leisten. Ich rate Dir auch nicht, Deine Linkliste in eine Tabelle zu schreiben. Alledings layoutet auch Lynx Deine Liste nach einem bestimmten Schema. Warum soll das nun so gänzlich anders aussehen, als in Grafik-Browsern?

viele Grüße

Axel

[at]

Hallo.

1. Information und Layout bilden eine Einheit.

Dagegen hilft CSS.

Bereits mit der Wahl der HTML-Elemente lege ich teilweise deren Layoutposition fest, weil sie die Logik so gebietet.

Du machst das so; andere machen es anders: Es gibt sehr unterschiedliche Ansätze, zentrale Navigationselemente im Quellcode unterzubringen. Die einen bevorzugen die layout-gemäße Plazierung vor dem eigentlichen Seiteninhalt; andere ordnen die Navigation dem sonstigen Inhalt des Dokumentes unter und plazieren die sie entsprechend am Ende des Quellcodes.

Eine Überschrift sollte als solche zu erkennen sein. Ein Liste sollte wie eine Liste aussehen...

Eine Liste kann auch etwa komma-separiert sein oder innerhalb eines Satzes mittels "erstens [...] zweitens [...] drittens" etc. getrennt werden.
Nehmen wir das folgende recht simple HTML:
"
<p class="komma">Diese Elemente kennzeichnen Listen:</p>
<ul>
<li><ul></li><li><ol></li><li><dl></li>
</ul>
"
Mittels des folgenden CSS wird daraus in zeitgemäßen Browsern eine komma-separierte Liste:
"
.komma, .komma + ul, .komma + ul li {display:inline; padding: 0; margin: 0; list-style-type: none;}
.komma + ul li + li:before {content:', '}
"

"Freie" Layoutpositionierung kann ich fast immer nur mit DIV-Suppe erreichen.

Lerne CSS, und erkenne, dass der kluge Eisatz von ID viele Verschahtelungen unnötig macht :-)

2. Der Anbieter der Information sollte die günstigste Form für die Information finden.

Eben, und der Anbieter eines CMS ist meist nicht der Anbieter der Information.

3. Der Nuzer will zur Information geführt werden. Er will nicht am Layout herumspielen.

Und wenn er das will, kann man diesen Spieltrieb ja mittels Flash fördern :-)

4. Anbieter, die trotzdem wählbare "Positions-Layouts" einseten, wollen entwerder zeigen: "Hey, schau mal, ich kann mit CSS umgehen." oder sie können eben die günstigste Form für die Information _nicht_ finden. Das ist unprofessionell.

Nein, diese Anbieter respektieren die Gestaltungsfreiheit ihrer Kunden zum Nutzen derer Kunden.

Statt

Link1
Link2
Link3
Link4

will ich einfach

Link1  Link2
Link3  Link4
Ja, wenn Du diese Darstellung als sinnvoll ansiehst, dann setze diese _eine_ Darstellung um. Das funktioniert auch, für diese _eine_ Linkliste, mit Deinem Hintergrundwissen über den Inhalt der Links.

Für ein CMS ist dies sicher keine gangbare Methode.

Was mich stört ist, wenn der Produzent einer Web-Seite, die den Nutzer eigentlich zu einer Information, im weitesten Sinne, führen soll, nicht weiß, in welcher Form er diese Information rüberbringen will, und deshalb den Nutzer in der Verantwortung lässt, sich die Form selbst zusammenzustoppeln. So sieht es jedenfalls für mich aus, wenn ich als Nutzer zwischen unterschiedlichen "Positions-Layouts" wählen kann.

Auch bei einem CMS sollte sich der Ersteller Gedanken über den günstigsten Seitenaufbau gemacht haben und diesen dann auch durchsetzen. Der Nutzer des CMS kann bestimmte Hintergründe nicht kennen, wird also nur schwer entscheiden können, welches Layout für ihn nun das beste ist, es sei denn er probiert alle durch. Das finde ich uneffektiv.

Bei einem Standard-Weblog mag so etwas noch funktionieren, da dort häufig die gleichen Strukturen Verwendung finden. Für eine auch nur ansatzweise komplexe Präsentation, etwa von Unternehmen mit sehr unterschiedlichen Tätigkeitsfeldern und Produktgruppen muss der Anwender des CMS die durch das Unternehmen vorgegebene Struktur in HTML implementieren und mittels CSS für den Nutzer handhabbar aufbereiten. Diese Arbeit kann ihm der Entwickler des CMS nur erleichtern, nicht abnehmen.

Der Hintergrund ist auch der, dass ich notfalls auch per Textkonsole mit Lynx zugreifen kann, und da wird nix mit Tabellen. Dort hätte ich ganz normal die HTML-Liste.
Ja. Genau das soll die Trennung von Inhalt und Layout auch leisten. Ich rate Dir auch nicht, Deine Linkliste in eine Tabelle zu schreiben. Alledings layoutet auch Lynx Deine Liste nach einem bestimmten Schema. Warum soll das nun so gänzlich anders aussehen, als in Grafik-Browsern?

Weil die einen Browser etwas können, was die anderen nicht können. -- Flash lässt grüßen.
MfG, at

[Axel Richter]

Hallo at,

1. Information und Layout bilden eine Einheit.
   Dagegen hilft CSS.

Bitte? Gegen meine Meinung hilft CSS? Nochmals: Ich bin der Meinung, dass es _keine_ _vollständige_ Trennung von Information, Inhalt und Layout geben _kann_. CSS trennt die _Einstellungen_ für das Layout von der Strukturierung des Inhalts. Das ist auch gut so. Trotzdem erzwingen manche Strukturen _ein_ konkretes Aussehen. Es gibt da zwar keine festen Grenzen, aber es gibt Sachen, die _ich_ nicht machen würde. Eine Inline-UL-Liste gehört dazu. Das ist nämlich, meiner Meinung nach, eine simple Aufzählung und kann einfach im Textabsatz, mit Komma getrennt, notiert werden. Ganz schlimm wird es, wenn man per CSS _unterschiedliche_ Positionierung der Inhalte zulässt. Die Position (Reihenfolge, Lesefluss) ist nämlich nun gar nicht mehr vom Inhalt zu trennen. Sie gehört zur Struktur und somit ins HTML.

Bereits mit der Wahl der HTML-Elemente lege ich teilweise deren Layoutposition fest, weil sie die Logik so gebietet.
Du machst das so; andere machen es anders: Es gibt sehr unterschiedliche Ansätze, zentrale Navigationselemente im Quellcode unterzubringen. Die einen bevorzugen die layout-gemäße Plazierung vor dem eigentlichen Seiteninhalt; andere ordnen die Navigation dem sonstigen Inhalt des Dokumentes unter und plazieren die sie entsprechend am Ende des Quellcodes.

Ja, dann aber im HTML.

Eine Überschrift sollte als solche zu erkennen sein. Ein Liste sollte wie eine Liste aussehen...
Eine Liste kann auch etwa komma-separiert sein

... aber keine UL-Liste, eine DL-Liste eventuell. Das würde ich als Grenzfall der Darstellung einer DL-Liste betrachten:
<style type="text/css">
<!--
dl.komma, dl.komma dt, dl.komma dd {display:inline; padding:0; margin:0;}
dl.komma dd+dd:before {content:', ';}
-->
</style>
</head>
<body>
<h1>HTML-Elemente</h1>
<h2>Listen</h2>
<p><dl class="komma">
<dt>Diese Elemente kennzeichnen Listen:</dt>
<dd><ul></dd><dd><ol></dd><dd><dl></dd>
</dl>.</p>
</body>

oder innerhalb eines Satzes mittels "erstens [...] zweitens [...] drittens" etc. getrennt werden.

Ja, das wäre für mich ein Grenzfall der Darstellung einer OL-Liste.

"Freie" Layoutpositionierung kann ich fast immer nur mit DIV-Suppe erreichen.
Lerne CSS, und erkenne, dass der kluge Eisatz von ID viele Verschahtelungen unnötig macht :-)

... aber nicht, wenn man ganze Bereiche der Seite mit CSS mal so und mal so _positionieren_ möchte. Es geht mir um das Positionieren. Gegen unterschiedliche CSS für Farben, Hintergründe, Rahmen, Textformate ... habe ich nichts.

Bei einem Standard-Weblog mag so etwas noch funktionieren, da dort häufig die gleichen Strukturen Verwendung finden. Für eine auch nur ansatzweise komplexe Präsentation, etwa von Unternehmen mit sehr unterschiedlichen Tätigkeitsfeldern und Produktgruppen muss der Anwender des CMS die durch das Unternehmen vorgegebene Struktur in HTML implementieren und mittels CSS für den Nutzer handhabbar aufbereiten. Diese Arbeit kann ihm der Entwickler des CMS nur erleichtern, nicht abnehmen.

Richtig. Dann muss der Nutzer aber auch das HTML ändern können. Mit CSS alleine kann ich mir das eben nicht vorstellen.

viele Grüße

Axel

[Axel Richter]

Hallo nochmal,

Eine Liste kann auch etwa komma-separiert sein
... aber keine UL-Liste, eine DL-Liste eventuell. Das würde ich als Grenzfall der Darstellung einer DL-Liste betrachten:
<style type="text/css">
<!--
dl.komma, dl.komma dt, dl.komma dd {display:inline; padding:0; margin:0;}
dl.komma dd+dd:before {content:', ';}
-->
</style>
</head>
<body>
<h1>HTML-Elemente</h1>
<h2>Listen</h2>
<p><dl class="komma">
<dt>Diese Elemente kennzeichnen Listen:</dt>
<dd><ul></dd><dd><ol></dd><dd><dl></dd>
</dl>.</p>
</body>

Error: Das DL-Element kann natürlich _nicht_ innerhalb von P-Elementen stehen. Bleibt also wieder nur DIV:
<div><dl class="komma">
<dt>Diese Elemente kennzeichnen Listen:</dt>
<dd><ul></dd><dd><ol></dd><dd><dl></dd>
</dl>.</div>

Das ist noch ein Argument gegen Inline-UL, Inline-OL bzw. Inline-DL.

viele Grüße

Axel

[at]

Hallo.

Error: Das DL-Element kann natürlich _nicht_ innerhalb von P-Elementen stehen. Bleibt also wieder nur DIV:
<div><dl class="komma">
<dt>Diese Elemente kennzeichnen Listen:</dt>
<dd><ul></dd><dd><ol></dd><dd><dl></dd>
</dl>.</div>

Aber wozu? Formatiere doch <dl> beziehungsweise das von mir favorisierte <ul>.

Das ist noch ein Argument gegen Inline-UL, Inline-OL bzw. Inline-DL.

Das ist nur der Beweis, das sich die <div>-Soup als Hirngespinst in deinem Kopf verankert hat ;-)
MfG, at

[at]

Hallo.

1. Information und Layout bilden eine Einheit.
   Dagegen hilft CSS.
   Bitte? Gegen meine Meinung hilft CSS? Nochmals: Ich bin der Meinung, dass es _keine_ _vollständige_ Trennung von Information, Inhalt und Layout geben _kann_.

Ja, und? Das ist deine Meinung; die muss man ja auch nicht ändern. Allen anderen sei empfohlen, sich mit den Möglichkeiten von CSS zu befassen, um das zu bewerkstelligen, was andere täglich bewerkstelligen, obwohl du es für unmöglich hältst.

CSS trennt die _Einstellungen_ für das Layout von der Strukturierung des Inhalts. Das ist auch gut so. Trotzdem erzwingen manche Strukturen _ein_ konkretes Aussehen.

Nein, ...

Es gibt da zwar keine festen Grenzen, aber es gibt Sachen, die _ich_ nicht machen würde.

... weil diese Dinge eben nicht objektiv zu fassen sind.

Eine Inline-UL-Liste gehört dazu. Das ist nämlich, meiner Meinung nach, eine simple Aufzählung und kann einfach im Textabsatz, mit Komma getrennt, notiert werden.

Eine kurze Verständnisfrage: Was ist eine "kurze Aufzählung" anderes als eine Liste?

Ganz schlimm wird es, wenn man per CSS _unterschiedliche_ Positionierung der Inhalte zulässt.

Das halte ich für unproblematisch. Schwierig wird es, wenn man eine eindeutig falsche oder zumindest stark unkonventionelle Positionierung _nahelegt_, indem man etwa "p {float: right !important;}" vorgibt.

Die Position (Reihenfolge, Lesefluss) ist nämlich nun gar nicht mehr vom Inhalt zu trennen. Sie gehört zur Struktur und somit ins HTML.

Nur weil ein Layout schlecht sein kann, ist es unsinnig die Trennung von Struktur und Gestaltung mittels HTML und CSS zu negieren, denn eine Struktur kann ebenso unbrauchbar sein.

Du machst das so; andere machen es anders: Es gibt sehr unterschiedliche Ansätze, zentrale Navigationselemente im Quellcode unterzubringen. Die einen bevorzugen die layout-gemäße Plazierung vor dem eigentlichen Seiteninhalt; andere ordnen die Navigation dem sonstigen Inhalt des Dokumentes unter und plazieren die sie entsprechend am Ende des Quellcodes.
Ja, dann aber im HTML.

Eben. Sie ordnen in HTML, plazieren aber mittels CSS.

Eine Liste kann auch etwa komma-separiert sein
... aber keine UL-Liste, eine DL-Liste eventuell.

Unsinn. Ich habe doch ein konkretes Beispiel aufgeführt. Nach deinem folgenden Beispiel wären <ul> ja völlig überflüssig, da jede <ul>, die ja fast zwangsläufig eine Überschrift oder einen einleitenden Text besitzt, als <dl> dargestellt würde.

Das würde ich als Grenzfall der Darstellung einer DL-Liste betrachten:
<style type="text/css">
<!--
dl.komma, dl.komma dt, dl.komma dd {display:inline; padding:0; margin:0;}
dl.komma dd+dd:before {content:', ';}
-->
</style>
</head>
<body>
<h1>HTML-Elemente</h1>
<h2>Listen</h2>
<p><dl class="komma">
<dt>Diese Elemente kennzeichnen Listen:</dt>
<dd><ul></dd><dd><ol></dd><dd><dl></dd>
</dl>.</p>
</body>

• Wozu das <p>?
• Der "." sollte in meinem Beispiel in ".komma + ul:after {content:'. '}" definiert werden.
• Der ":" gehört nicht zum <dt>, da er kein Bestandteil des zu definierenden Begriffes ist.
• Einen vollständigen Satz würde ich in diesem Zusammenhang niemals als "definition term" ansehen. Wenn du stattdessen "Listen-Elemente" geschrieben und die dann natürich etwas unglücklich wirkenden Überschriften angepasst hättest, würde ich dir natürlich zustimmen. Ich selbst verwende Definitionslisten sehr häufig, etwa bei der Angabe von Telefonnummern, eMail-Adressen etc. Du rennst also gewissermaßen offene Türen ein ;-)

"Freie" Layoutpositionierung kann ich fast immer nur mit DIV-Suppe erreichen.
Lerne CSS, und erkenne, dass der kluge Eisatz von ID viele Verschahtelungen unnötig macht :-)
... aber nicht, wenn man ganze Bereiche der Seite mit CSS mal so und mal so _positionieren_ möchte. Es geht mir um das Positionieren.

Ja, und? Kannst du nur <div> Positions- oder Abstandsangaben mitgeben? Eine solche Einschränkung wäre mir jedenfalls nicht bekannt.

Bei einem Standard-Weblog mag so etwas noch funktionieren, da dort häufig die gleichen Strukturen Verwendung finden. Für eine auch nur ansatzweise komplexe Präsentation, etwa von Unternehmen mit sehr unterschiedlichen Tätigkeitsfeldern und Produktgruppen muss der Anwender des CMS die durch das Unternehmen vorgegebene Struktur in HTML implementieren und mittels CSS für den Nutzer handhabbar aufbereiten. Diese Arbeit kann ihm der Entwickler des CMS nur erleichtern, nicht abnehmen.
Richtig. Dann muss der Nutzer aber auch das HTML ändern können. Mit CSS alleine kann ich mir das eben nicht vorstellen.

Darin sind wir uns definitiv einig :-)
MfG, at

[Cybaer]

Hi,

Der Hintergrund ist auch der, dass ich notfalls auch per Textkonsole mit Lynx zugreifen kann, und da wird nix mit Tabellen. Dort hätte ich ganz normal die HTML-Liste.

Wieso das denn?

<table>
<tr><td> Text 1 </td><td> T 2    <br></td></tr>
<tr><td> Text 3 </td><td> T 4    <br></td>
</table>

Bzw. ggf. noch mit PRE klammern oder mit festen Leerzeichen arbeiten ... ;-)

Gruß, Cybaer

[NaeZnaL]

Hallo,

Dies ist ein Forum.

Da muss ich dir ausnahmsweise mal Recht geben :-)

In einem solchen werden Probleme diskutiert und Meinungen geäußert.

Haben wir gemacht.

Dies ist _keine_ Lösungs-Lieferungs-Maschine ;-))

Ist ja nicht so schlimm, wenn man doch mal eine findet ;-)

Das hat er ja hinbekommen, wenn die Texte in den LI-Elementen einzeilig bleiben, wenn es _nur_ Texte, keine anderen Objekte in den LI-Elementen gibt, wenn der Browser so gnädig ist, es auch richtig darzustellen, wenn, wenn, wenn...

Ich denke nicht, dass das ein Problem ist, denn er hat ja beschrieben, wie die LI-Elemente aussehen (nur kurze Texte). Damit sie einzeilig bleiben, passt er die breite dementsprechend an.

Das Ansinnen, mittels CSS _mehrere_ _unterschiedliche_ Layouts für _eine_ HTML-Seite zu erzeugen, ist aber, meiner Meinung nach, zum Scheitern verurteilt.

Das hängt von denn Fähigkeiten des Erstellers und einem für diesen Zweck angepassten HTML-Code ab.

Heraus kommen dabei Darstellungen, bei denen sich, in unterschiedlichen Browsern bzw. Browser-Fenstergrößen, Elemente überlappen oder eventuell gar nicht mehr zu erreichen sind, weil sie links oder rechts aus dem Viewport ragen, ohne, dass eine Scrollmöglichkeit besteht. Solche Anti-CSS-Seiten findet man immer häufiger.

Das muss nicht zwingend so sein. Wie gesagt hängt es vom Ersteller ab. Man kan sein CSS durchaus so schreiben das es in allen CSS-fähigen Browsern gleich aussieht.

Ich bin schon für die Trennung von Inhalt (HTML) und Layout (CSS), glaube aber, dass es trotzdem eine zwingende Verbindung zwischen beidem gibt. Das heißt, dass bestmmte Layouts für bestimmte Inhalte zwingend sind und eben bestimmte Layouts für bestimmte Inhalte unmöglich sind. Ein Tabellen-Layout ohne Tabelle gehört für mich in diese Kategorie.

Wie er selber schon gesagt hat, hat er es nur als Tabelle bezeichnet, weil das seinem Wunsch am nächsten kam. Er hätte genau so gut schreiben können, dass er die Listen-Elemente bündig nebeneinander und untereinander ausrichten möchte.

Und wie soll der HTML-Kontext dazu aussehen?

Die Elemente müssten genauso angeordnet sein wie in einer normalen HTML Tabelle, aber ich habe ja auch nur gesagt das es mit CSS doch möglich wäre.

Diese CSS-Eigenschaften sind, meiner Meinung nach, nicht für HTML, sondern für andere SGML basierte Sprachen gedacht.

Dadurch lässt sich aber nicht aussließen, das man sie auch für HTML benutzen kann. Es macht zwar keinen sinn, da man in HTML sowieso Tabellen zur verfügung hat, aber es funktioniert.

Mit freudlichen Grüßen, NaeZnaL

[Axel Richter]

Hallo,

Wie er selber schon gesagt hat, hat er es nur als Tabelle bezeichnet, weil das seinem Wunsch am nächsten kam. Er hätte genau so gut schreiben können, dass er die Listen-Elemente bündig nebeneinander und untereinander ausrichten möchte.

Wenn er keine Liste sehen will, sollte er keine Liste einsetzen. Siehe meine Antwort an Turok.

Trennung von Inhalt und Layout bedeutet für mich nicht, dass jeglicher Zusammenhang zwischen Inhalt und Layout aufgehoben ist. Das konkrete Beispiel:

Link1  Link2  Link3  Link4
Link5  Link6  Link7  Link8

Das ist _keine_ Liste. Das sind zwei Textabätze.
_________________________________________________________

Link1
  Link1a
  Link1b
Link2
Link3
  Link3a
    Link3a1
  Link3b
Link4

Das ist eine Liste.

viele Grüße

Axel

[at]

Hallo.

Link1  Link2  Link3  Link4
Link5  Link6  Link7  Link8

Das ist _keine_ Liste. Das sind zwei Textabätze.

Und inwiefern sollte dadurch eine Verbesserung erzielt werden?
MfG, at

[NaeZnaL]

Hallo,

so sollte es funktionieren:

li {
 float: left;
 width: 200px;
}

Mit freudlichen Grüßen, NaeZnaL

[Turok]

Hi,

Danke euch! Die Lösung mit float klappt bestens - sieht exakt wie eine Tabelle aus.

Turok