5202

ein Blog über technische Fragen zu Blogger

Drei Gadgets nebeneinander

von
Ein Leser fragt, wie er unterhalb des Headers drei Gadgets nebeneinander bekommt - analog zu den drei Gadgets nebeneinander in der Fussleiste. Ich beschreibe einen sicheren Weg, der in Chrome, FF, Safari, Opera, Internet Explorer 8/9/10 und in allen mobilen Browser funktioniert.

Vorbereitung

Probiert das alles erst mal nur in einem Test-Blog aus! Macht außerdem eine Sicherung eurer Vorlage, bevor ihr das in eurem Haupt-Blog verwendet,

Dann: Als erstes sucht ihr in eurem HTML den </header> Tag. Verwechselt den Tag bitte nicht mit den <header> Tag.
Direkt darunter setzt ihr das Markup ein:
Markup
<div class='teasercontainer'>
 <div class='row'>
   <div class='threecol'>
 <b:section class='teaser' id='teaser-1' maxwidgets='3' showaddelement='yes'/>
     </div>
  <div class='threecol'>
    <b:section class='teaser' id='teaser-2' maxwidgets='3' showaddelement='yes'/>
 </div>
  <div class='threecol last'>
    <b:section class='teaser' id='teaser-3' maxwidgets='3' showaddelement='yes'/>
  </div>
 </div>
</div>
Ihr geht auf 'Vorschau', wenn keine Fehlermeldungen kommen, könnt ihr die Änderung speichern
Seitenelemente
Unter 'Seitenelemente' findet ihr nun drei neue Felder, wo ihr bis zu drei [beliebige] Widgets einbauen könnt. Falls ihr mehr Widgets braucht, könnt ihr den Wert von maxwidgets anpassen.

CSS

Kommen wir zum Aussehen. Falls ihr die drei Gadgets genau gleich groß mit Abstand dazwischen [margin] haben wollt, könnt ihr diese allgemeine CSS nehmen:
/*Teaser*/
.row {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.threecol {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
                 box-sizing: border-box;
}
.row .threecol { width: 30.75% } 
.last { margin-right: 0px }
Erläuterung
Die CSS stellt unabhängig von eurer Blog-Breite die drei Gadgets in einer Reihe. Egal welche Größe ihr wählt, durch die Prozentangabe bleiben die Gadgets proportional angepasst. Ändert auf _keinen_ Fall die Prozentangaben, ansonsten kippt ein Gadget in die nächste Reihe.
Normalisierung
Damit bei einer prozentualen Angabe die Breite in allen Browser Pixelgenau dargestellt wird, müsste das Layout normalisiert sein. Unglücklicherweise sind die Blogger-Layout sehr schlecht normalisiert worden, d.h. bei dieser Methode kann es passieren, das rechts ein oder zwei Pixel fehlen ... daran könnt ihr nichts ändern.
Alternativen
Falls ihr euch an einem eventuellen fehlenden Pixel stört, müsst ihr die Breite der neuen Widgets per Hand berechnen. Dazu stellt ihr die Breite des Blogs im Vorlagen-Designer fest. Nehmen wir mal an, das sind 990px. Nehmen wir weiterhin an, ihr wollt keinen Abstand zischen den neuen Widgets, also kein margin. Dann ist die Breite jedes neuen Widgets 330px. Easy, oder?
Moment mal ..?
Okay, ihr seid schlau und wisst, dass auf die Gesamt-Breite des Widgets noch der padding und die border dazugerechnet wird. Also müsstet ihr jedes mal, wenn ihr etwas an dem Rand des Widgets ändert, auch die Gesamt-Breite neu berechnen, oder?

Nein müsst ihr nicht, weil es inzwischen die Eigenschaft box-sizing gibt, die die Gesamtbreite eines Elements mitsamt padding und border bestimmt. Ihr müsst nur einmal die gesamte Breite berechnen und jede Änderung von padding und border wird keine Auswirkung auf diese Breite haben.
Funktioniert das im IE6
Noop, das funktioniert nur in modernen Browser. Wenn ihr für den IE6 optimieren wollt, seid ihr aber definitiv im falschen Blog.

Alternative CSS

Hier eine alternative 'pixelgenaue' CSS, bezogen auf das Beispiel von 990px Gesamt-Breite.
.row {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.threecol {
    float: left;
    min-height: 1px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -ms-box-sizing: border-box;
                 box-sizing: border-box;
}
.row .threecol { width: 330px} 
Das funktioniert aber nicht!
Das obere ist die Theorie:=) Ihr werdet nun feststellen, dass das in der Praxis nicht funktioniert. Warum?

Ganz einfach, weil es bei Blogger rechts und links um den Content-Bereich noch einen inneren Rand [padding] gibt. Der ist von Vorlage zu Vorlage verschieden, in der Vorlage Simpel beträgt der etwa 40px. Diesen Rand müsst ihr also noch von der Gesamtbreite abziehen, d.h. insgesamt ist die 'reale' Breite bei einer Gesamtbreite von 990px nur 910px. Das geteilt durch 3 ergibt 303,33px. Yeah ... und weil es keine halben ode drittel Pixel gibt, müsst ihr auf 303px pro Gadget abrunden, womit ihr am Ende wieder einen Darstellungsfehler von 1px habt. Ungefähr klar, wo das Problem liegt? Ihr müsst den äußeren Rand von eurem Layout kennen und ihr müsst eine Blog-Breite finden, die ihr Ganzzahlige durch drei teilen könnt - einen eventuellen äußeren Rand [margin] ist da noch gar nicht einberechnet. Deswegen die erste CSS, die funktioniert unabhängig von der Blog-Breite.

Fragen, Kommentare?

Ihr habt weitere Fragen? Dazu gibt's ja den Kommentarbereich ...