Man trägt unter Vorlage > Anpassen > Erweitert > CSS hinzufügen den folgenden Code ein:
/* Seiten-Tabs zentriert */
#PageList1 {
text-align:center;
}
#PageList1 li {
float:none;
display:inline;
}
Falls man mehrere Seiten-Gadgets im Einsatz hat oder hatte, muss man im Quelltext nachsehen, welche ID das Seiten-Gadget im Tab-Bereich hat und die Ziffer innerhalb "PageList1" entsprechend ändern, wenn nötig.
Die Kommandos kann man auch für andere Gadgets nutzen, mit denen man Link-Listen erstellt hat, bei denen die Listenpunkte zentriert ausgerichtet nebeneinander stehen sollen. Auch für Gadgets im Footer ist das brauchbar. Die ID "Pagelist1" ist in einem solchen Fall gegen die ID des jeweiligen Gadgets zu tauschen, für das die Kommandos gelten sollen. Man findet die ID im Quelltext. Gegebenenfalls muss man bei anderen Gadgets, die an anderen Stellen eingefügt sind, aber noch den seitlichen Abstand zwischen den Listenpunkten definieren. Im zweiten Kommandoblock müsste dann also beispielsweise noch ein margin-right:15px; ergänzt werden. Für das Seiten-Gadget, das im Tabbereich einsortiert ist, ist das nicht nötig.
Erläuterung der Kommandos:
Zunächst werden die Inhalte des Gadget mit der ID "PageList1" per text-align:center zentriert.Damit die einzelnen Listenpunkte (li), die sich innerhalb des Gadgets befinden, der Zentrierung folgen können, müssen sie auf andere Weise als im Standard nebeneinander gestellt werden.
Das ist der Standard:
Standardmäßig gilt für ein li-Tag display:block, wenn man nichts anderes dafür angegeben hat. Jeder einzelne Listenpunkt bildet deshalb einen eigenen Block, neben dem nichts anderes stehen kann. Deshalb werden Listenpunkte in einer Liste normalerweise automatisch untereinander gestellt. Um Blockelemente nebeneinaner zu stellen, muss man ein Float-Kommando für sie geben. In den Blogger-Vorlagen ist deshalb standardmäßig float:left für die li-Tags im Tab-Bereich vorgegeben. Die li-Tags ordnen sich daraufhin links ein und lassen zu, dass rechts neben ihnen das folgende li-Tag fließt. Auf diese Weise werden die Tabs nebeneinander gestellt. Dadurch ist letztlich jedoch auch die ganze Tabzeile links ausgerichtet.
Dadurch wird er nun ersetzt:
Mit float:none deaktiviert man float:left und somit die Linksausrichtung. Mit display:inline ändert man den li-Tag von einem Blockelement in ein Element, das sich im Textfluss einordnen darf. Somit können die Listenpunkte trotz float:none nebeneinander stehen.
Weiterführende Links
Ute Ziemes, sg.utez.de,
0 Kommentare:
Kommentar veröffentlichen