/*Drei Kommandos für leicht verbesserte Antippbarkeit von Links in Posts bzw. auf Seiten der Mobilversion. Das dritte Kommando wird nur dann wirksam, wenn man eine Liste mit der Klasse "linkliste" markiert.*/
.mobile .post-body {
line-height:1.6;
}
.mobile a {
margin:1px;
padding:2px;
}
.mobile .linkliste li {
margin-bottom:10px;
}
Die Kommandos stehen im b:skin-Bereich des HTML unter
/* Mobil Anfang - utez - statt nichts - utez - */.
Standard
Standard-Zeilenhöhe und Linkabstände
Hier im Blog ist die Standardzeilenhöhe 1.3 und die Standardschriftgröße 14px. Innen- und Außenabstände für Links gibt es standardmäßig keine. Das ist bei der niedrigen Zeilenhöhe und vergleichsweise großen Schrift auch nicht möglich.Fließtext - Standard
Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Link im Fließtext: blogger.com. Ein zweiter Link im Fließtext: blogger.com und ein dritter Link im Fließtext: blogger.com und ein vierter Link im Fließtext: blogger.com. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Link im Fließtext: blogger.com. Ein zweiter Link im Fließtext: blogger.com und ein dritter Link im Fließtext: blogger.com und ein vierter Link im Fließtext: blogger.com. Ein Link im Fließtext: blogger.com. Ein zweiter, dritter und vierter Link im Fließtext: blogger.com, blogger.com, blogger.com.
Ungeordnete Listen - Standard
Geordnete Listen - Standard
Zeilenhöhe und Linkabstände minimal vergrößert
Damit Links mehr antippbare Fläche haben und (falls sie untereinander stehen) nicht direkt aneinander stoßen, habe ich deshalb die Zeilenhöhe des Post-Body in der Mobilversion auf 1.6 erhöht und als Außenabstand für Links 1px und als Innenabstand 2px festgelegt. Für Listen, die man mit der Klasse "linkliste" markiert hat, gilt außerdem, dass unter jedem Listenpunkt 10px Außenabstand sind. Dadurch stehen die Links nicht so dicht untereinander.Fließtext - Zeilenhöhe und Linkabstände minimal vergrößert
Normaler Fließtext - Zeilenhöhe und Abstände für Links in der Mobilversion vergößert
Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Link im Fließtext: blogger.com. Ein zweiter Link im Fließtext: blogger.com und ein dritter Link im Fließtext: blogger.com und ein vierter Link im Fließtext: blogger.com. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Satz ohne Link. Ein Link im Fließtext: blogger.com. Ein zweiter Link im Fließtext: blogger.com und ein dritter Link im Fließtext: blogger.com und ein vierter Link im Fließtext: blogger.com. Ein Link im Fließtext: blogger.com. Ein zweiter, dritter und vierter Link im Fließtext: blogger.com, blogger.com, blogger.com.Ungeordnete Liste ohne Klasse - Zeilenhöhe und Abstände der Links minimal vergrößert
Geordnete Liste Liste ohne Klasse - Zeilenhöhe und Abstände der Links minimal vergrößert
Ungeordnete Liste der Klasse "linkliste" - Zeilenhöhe und vertikale Linkinnenabstände deutlicher vergrößert
Geordnete Liste der Klasse "linkliste" - Zeilenhöhe und vertikale Linkinnenabstände deutlicher vergrößert
Ute Ziemes, , vorlagetekka.blogspot.com
0 Kommentare:
Kommentar veröffentlichen