dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Neben den bekannteren Formen von Listen in HTML, der ungeordneten <ul> und der geordneten oder nummerierten Liste <ol>, gibt es einen weiteren vielseitigen Listentyp: die Definitionsliste <dl>. Die Definitionsliste stellt zwei Listenelemente zur Verfügung: den Definitionsausdruck (definition term) <dt> und die Definition (definition data) <dd>.

Das W3C hat sich bei der Elementdefinition nicht nur sehr flexibel gezeigt^*, was die vielseitige Verwendbarkeit von Definitionslisten angeht, es hat uns Webdesignern darüber hinaus auch keine Beschränkung auferlegt, wie viele Definitionsausdrücke <dt> und Definitionen <dd> wir in einem Zusammenhang verwenden. Wir verfügen mit der Definitionsliste also über ein semantisch vielseitiges Element.
(more…)

Eben stelle ich endgültig fest, dass mich die Darstellung von Listen (Aufzählungslisten wie nummerierte Listen) in meinem Theme nicht so recht zufriedenstellt. So geht es mir schon seit einiger Zeit, jetzt aber will ich mir das einmal genauer anschauen und einige Varianten ausprobieren.

Hierzu werde ich nun etwas Listen-Inhalte schreiben und diese jeweils in ›normale‹ Textabsätze einbetten, um mir – und euch – einen konzentrierten Überblick zu verschaffen. Anschließend werde ich mir (hoffentlich komme ich in den nächsten Tagen wirklich dazu) die entsprechenden Bereiche in meinem Stylesheet vornehmen, um Korrekturen an der Darstellung der Listen durchzuführen.
(more…)

Beim Layouten eines kleinen Webauftrittes bin ich heute wieder einmal auf eine gestalterische Frage gestoßen, die mir schon häufiger begegnete und mir gegenüber bisher einer eindeutigen Klärung widerstand:

Wie behandle ich Absatzeinrückungen bei typografisch mit Aufzählungszeichen (»Bullets«) ausgezeichneten Aufzählungen bzw. bei Listen?

Prinzipiell bieten sich mir drei Möglichkeiten:

1. Bündigkeit des Aufzählungszeichens mit dem linken Textrand (Rand der Textspalte)
2. Bündigkeit des Aufzählungstextes mit dem linken Textrand, das Aufzählungszeichen rückt nach links heraus in die sogenannte Marginalspalte
3. Der gesamte Aufzählungsabsatz samt Aufzählungszeichen wird etwas nach rechts eingerückt

Eine übersichtliche Darstellung aller drei Fälle in HTML/CSS kann der geneigte Webworker gerne für eigene Experimente nutzen. Im Folgenden bespreche ich die drei Fälle anhand kurzer Beschreibungen nebst grafischer Abbildungen.
(more…)