mit Spaltensatz …
Beim Spaltensatz werden zusammenhängende Fließtexte auf mehrere Spalten verteilt, die einzelne Spalte wird als Kolumne bezeichnet.
Der Mehrspaltensatz ist für großformatige Bücher von Beginn des Buchdrucks an üblich und folgt darin dem Vorbild großformatiger Handschriften in Kodex-Form.
Im Webdesign ist zu berücksichtigen, dass breitere Monitore oder höhere Auflösungen immer breitere Textseiten ermöglichen. Dies ist aber nicht lesefreundlich, da man bei langen Zeilen nur schwer den Anfang der neuen Zeile findet.
Mit entsprechenden CSS-Befehlen lassen sich Fließtexte und lange Listen in mehrere Spalten aufteilen. Dabei bleibt dieses Layout flexibel, da Spaltenumbrüche nur bei Bedarf erfolgen.
Die Anzahl der Spalten kann in Abhängigkeit von der Breite des Browserfensters variabel sein. Beste Voraussetzungen also für die Anwendung im responsiven Webdesign.
| Art:
| CSS-Code:
|
| Textspalten im Blocksatz
| .textspalten { column-count:auto; column-gap:2.5em; column-width:15em; column-fill:balance; text-align:justify; }
|
| Textpalten überspannen
| h1, h2, h3 { column-span:all; }
|
| Spaltenumbruch verhindern
| .nonbreak { break-inside:avoid; }
|
Aufzählungen …
Listen und Aufzählungen kommen laufend vor und sind zur Strukturierung wichtig.
Ein Wunschzettel kann als Liste angesehen werden; genauso natürlich To-do-Listen, Telefonlisten und ähnliches.
In HTML gibt es zwei Arten von Aufzählungslisten, sortierte und unsortierte.
Sie unterscheiden sich nur durch die Nomenklatur im Elternelement.
Sortiere Listen können fortlaufend nummeriert werden. Sortierte und unsortiere Listen können miteinander kombiniert werden.
| Art:
| HTML-/CSS-Code:
|
|
|
<ul style="list-style-type:decimal-leading-zero;">
<li>Zeile 1
<li>Zeile 2
<ul style="list-style-type:lower-alpha;">
<li>Zeile 2 a)
<li>Zeile 2 b)
</ul>
<li>Zeile 3
</ul>
|
zentrierte Inhalte …
Web-Inhalte zentriert auf der Bildmitte darzustellen ist schon immer ein gern genutztes Designelement.
Hierzu musste früher meist ein aufwändiges Tabellen-Design entwickelt werden; diese waren wie auch andere programmierte Lösungen selten responsive und nur schwer zu pflegen.
Der Effekt der mittigen Zentrierung lässt sich heute einfach und mit wenigen CSS-Befehlen erreichen.
| Beschreibung:
| CSS-Code:
|
| zentrierter Bereich
| .bildmitte { margin-left:auto; margin-right:auto; max-width:50%; }
|