Listen in Posts

Listen allgemein

Für Listen ist von der Vorlage kein CSS vorgegeben. Deshalb nutzen Browser, ihren persönlichen Standard. In meinem Browser sind das, nach meinem Geschmack, zu große Außen- und Innenabstände. Große horizontale Abstände sind vor allem in kleinen Anzeigegeräten doof. Große vertikale Außenabstände nerven mich prinzipiell. Daher habe ich für Listen zumindest margin- und padding-Kommandos selbst in's CSS eingetragen.

CSS-Code der Listen

So habe ich die Außen- und Innenabstände der Listen definiert:

CSS
/* Listen ohne Außenabstände sowie nur mit linksseitigem und auch verringertem Innenabstand */
.post-body ul,
.post-body ol {
margin: 0;
padding: 0 0 0 20px;
}

Und so fügen sich die Listen jetzt ein:

Die erste Liste ist eine ul (Punkte, Kreise zeigen den nächsten Listenpunkt an). Die zweite Liste ist eine ol (Reihenfolge anzeigende Zahlen).
  • Erster Listenpunkt
  • Zweiter Listenpunkt
    • Erster Unterlisten-Listenpunkt
    • Zweiter Unterlisten-Listenpunkt
  1. Erster Listenpunkt
  2. Zweiter Listenpunkt
    1. Erster Unterlisten-Listenpunkt
    2. Zweiter Unterlisten-Listenpunkt
Wenn ich Abstand zwischen die Listen oder zum umgebenden Text bringen wollte, könnte ich eine Leerzeile (br) dazwischen setzen oder eine meiner leeren klassifizierten div's, mit denen ich kürzere Abstände realisieren kann.

HTML-Code der Listen

ul (unordered list = ungeordnete Liste)

HTML
<ul>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt
<ul>
<li>Erster Unterlisten-Listenpunkt</li>
<li>Zweiter Unterlisten-Listenpunkt</li>
</ul>
</li>
</ul>

ol (ordered list = geordnete Liste)

HTML
<ol>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt
<ol>
<li>Erster Unterlisten-Listenpunkt</li>
<li>Zweiter Unterlisten-Listenpunkt</li>
</ol>
</li>
</ol>
Ute Ziemes, 13021961.blogspot.de
, 

Kommentare

Kommentar veröffentlichen