Linklisten in Posts

Links brauchen, besonders in kleinen Anzeigegeräten, vor allem vertikalen Abstand und klickbare Fläche. Da ich die Zeilenhöhe reduziert habe, werde ich meine normalen Listen nicht ohne zusätzliche CSS-Regeln für Linklisten benutzen können. Um zu sehen, welche Kommandos und Werte wie genau wirken, habe ich bei meinen Tests die Listen grün, die einzelnen Listenpunkte blau und die Links rot umrahmt. So sieht man genau, wieviel Klickfäche und/oder Abstand jeweils zur Verfügung stehen.

Test

(Sämtliche Links in den folgenden Beispielen führen zum hiesigen Post.)

Liste 1: 26px Zeilenhöhe, kein Abstand zwischen den Listenpunkten, kein padding in den Links

• Farbe und Einzeiligkeit
• Gewicht und Mehrzeiligkeit auf kleinen Anzeigegeräten

Liste 2: 33px Zeilenhöhe, kein Abstand zwischen den Listenpunkten, kein padding in den Links

• Farbe und Einzeiligkeit
• Gewicht und Mehrzeiligkeit auf kleinen Anzeigegeräten

Liste 3: 26px Zeilenhöhe, 5px Link-padding oben und 4px Link-padding unten, 14px Außenabstand der Listenpunkte nach oben, außer beim ersten, der 0px hat

• Farbe und Einzeiligkeit
• Gewicht und Mehrzeiligkeit auf kleinen Anzeigegeräten

Fazit

Als Ergebnis dieses Tests habe ich nun sowohl für ungeordnete als auch für geordnete Listen, in die ich Links setze und deshalb im HTML-Modus der Posts/Seiten die Klasse "linkliste" hinzufüge, die CSS-Kommandos für die hiesige Liste 3 im CSS eingetragen. Denn der Abstand der Listenpunkte und die Nutzung der gesamten Listenpunkthöhe für den Link ist hier eindeutig der Sieger. Die Links selbst mache ich innerhalb einer Linkliste fett, dafür ohne Rahmen, wie im Fließtext. Dass es Links sind, weiß man, weil ich es drüber schreibe.

So sieht die Sieger-Linkliste ohne veranschaulichende Rahmen aus:

• Listenpunkt in ul "linkliste"
• Listenpunkt in ul "linkliste" mit etwas mehr Text zum Test

Ich persönlich nutze für Linklisten üblicherweise ul, mit ol sähe das aber genauso aus, nur dass die Vorzeichen andere wären und im Code ol statt ul stehen müsste.

So sieht sie im HTML des Posts aus:

HTML

<ul class="linkliste">
<li><a href="Linkadresse">Linktext</a></li>
<li><a href="Linkadresse">Linktext</a></li>
</ul>

So sehen die Kommandos im CSS aus:

CSS

/* ul-Linklisten */
.post-body ul.linkliste li:first-child {
margin-top: 0px;
}
.post-body ul.linkliste li {
margin-top: 14px;
}
.post-body ul.linkliste li a {
border: none;
padding: 5px 0 4px;
font-weight:bold;
}
.post-body ul.linkliste li a:hover {
border: none;
padding: 5px 0 4px;
color: #668fff;
font-weight:bold;
}

Begleitinfo

Frage: Wofür stehen eigentlich die einzelnen Werte für padding, wenn es drei sind?
Antwort: Der erste Wert für oben, der zweite Wert für beidseitlich, der dritte Wert für unten.

Ute Ziemes, 13021961.blogspot.de

,  31.03.2019