5202

ein Blog über technische Fragen zu Blogger

Wie zentriere ich das Blogger Seiten-Gadget? Teil II

von
Ich wurde nach dem ersten Teil meiner Mini-Serie gefragt, ob es wirklich so kompliziert sei, ein simples Seiten-Gadget mittig zu positionieren - die Antwort darauf lautet "Ja"!
Das Seiten-Gadget ist eine links gefloatete Liste und wenn eine solche Liste keine feste Breite hat, ist es sehr schwer eine allgemeine Regel zu formulieren, um besagte Liste zu zentrieren. Der erste, der - meines Wissens - eine solche CSS gefunden hat, ist der malaiische Blogger Greenlava. Seine Lösung für das Seiten-Gadget sah so aus:
.PageList {
  text-align:center !important;
}
.PageList li {
  display:inline !important; 
  float:none !important;
}
Das war eine sehr clevere Idee von ihm und ich gebe ein Beispiel, um es sich optisch besser vorzustellen - hier das original Seiten-Gadget vom Awesome-Layout:

Beispiel I: Original Awesome Seiten-Gadget




Greenlava hatte das 'fließen' vom <li> Tag aufgehoben und anschließend das Gadget ganz simpel durch text-align:center zentriert - das ganze hat allerdings ein entscheidenden Nachteil, der sich im Awesome Layout Beispielsweise als optischer Trennung zwischen den einzelnen Listen-Punkten zeigt.

Beispiel II: Original Awesome Seiten-Gadget zentriert mit text-align:center





Die Lösung von Greenlava ist zwar simpel, aber - wie ihr seht - nicht völlig befriedigend. Als ich angefangen habe mich noch mal mit dem Problem zu beschäftigen, bin auf die bereits erwähnte Idee von Stu Nicholls zurückgekommen, den <ul> Tag um 50% nach links und den <li> Tag um 50% nach rechts zu verschieben. Meine CSS für das Awesome-Layout sieht so aus:
.PageList ul{
  float: left;
  position:relative !important;
  left: 50% !important;
  overflow: visible !important;
}
.PageList ul li{ 
  float: left;
  position:relative !important;
  right: 50% !important;
}
Funktioniert in allen Browsern, einschließlich dem Internet-Explorer. Der <ul> Tag von der Liste .pagelist wird mit float: left; links gefloatet und 50% von seinem 'Normalstandort' nach rechts verschoben - der 'Anfang' ist damit genau in der Seitenmitte und an dieser Stelle. d.h rechts von der Mitte würde auch der erste Listenpunkt stehen. Da er jedoch zentriert sein soll, verschieben wir ihn um die Hälfte seiner Breite mit position: relative; right: 50%; nach links und damit ist die .pagelist bzw. das Seiten-Gadget horizontal zentriert. So simple so far!

Beispiel III: Original Awesome Seiten-Gadget zentriert mit relativer Positionierung





Perfekt, oder?