5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Header umbauen - Bild einbauen

von

Update

Wie sich herausgestellt hat, tritt bei sehr großen Bilder (über 400px Höhe) eine Problem mit den statischen Seiten auf - in diesem Fall überdeckt das Header-Bild den Kopfteil der Seite.
Die statischen Seiten sind ein eigener Layer der unterhalb des Headers liegt und deshalb ist der Header in dem Fall nicht scrollbar. Bis mir eine besser Lösung einfällt, könnte man für diesen Fall als Workaround den gesamten Header auf einer statische Seite nach 'oben' wegschieben. Das geht mit dieser CSS:
.viewitem-open #header-container {
margin-top: -400px;
}
.viewitem-panel {
top: 30px;
}
Das ist für einen 500px hohen Header gerechnet. Falls der Header noch höher ist, müsst ihr das entsprechend anpassen. Oder spielt mit den Werten rum und seht selber was passiert. Ihr dürft nicht zu viel Höhe geben, ansonsten kommen nämlich 'unterhalb' des Layers euren normalen Posts durch - is a bisserl a fummelige Geschichte. Der zweite Wert (30px) gibt den Abstand nach oben von der statischen Seite an, der bleibt immer konstant.
Falz
Bei der Planung von so eurem Header müsst ihr aber bedenken, dass die Falz - d.i. der sichtbare Bereich der Seite - für viele Besucher bei einem großen Header nur noch aus Header und nicht mehr aus Inhalt besteht. Der Besucher muss dann scrollen, um zu den Inhalten zu kommen. Weniger ist deswegen mehr.

Header umbauen

Vor einiger Zeit habe ich eine Einführung über Header Bilder bei den dynamischen Vorlagen geschrieben. Das möchte ich jetzt noch a bisserl weiter ausbauen und erklären, wie sich der gesamte Headerbereich beliebig nach eigenen Vorstellungen umbauen lässt.

Dazu mussten vorher zwei Grundprobleme gelöst werden - nämlich der Header und die Navigation sind in den dynamischen Vorlagen fixiert, mithin fehlt der Platz nach oben. Das andere ist der 'Klappmechanismus' der Navbar, der zwar mit CSS funktioniert, aber einen Darstellungsfehler in Chrome erzeugt und durch ein jQuery-Script 'repariert' wird. Da haben die Blogger Leute geschludert. Ich kann kein Script im Blog hosten und deshalb funktioniert die Navbar in Chrome nur genau an der Stelle, wo sie jetzt ist. Ich habe alles mögliche ausprobiert - es besteht immer die Gefahr, das der Klappmechanismus der Navbar 'flackert'. Und das macht eure Leser nicht glücklich.

Also musste ich etwas schreiben, das in _allen_ [von Blogger unterstützen] Browsern und in allen Vorlagen ohne Problem funktioniert.

Platz nach oben

Für beide Probleme habe ich eine relativ 'klassische' Lösung gefunden. Die Navigation kommt bei mir ganz noch oben und der Header wird nicht fixiert, sondern scrollt mit. Der schicke Mechanismus für die Navigation wird ausgeschaltet, das flackern hat sich damit erledigt. Das ist die Grundstruktur von der überwiegende Anzahl aller Blogger-Layouts und natürlich nicht so stylisch wie jetzt bei den dynamischen Vorlagen, aber ihr könnt danach Header-Bilder in beliebiger Größe einfügen.
Hier die CSS dafür:
/*Header 
----------------------------------------------- */
#header .header-drawer {
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5000;
}
#header .header-drawer.sticky {
    margin-top: 0;
    position: fixed;
    top: 0;
}
#header:hover .header-drawer, #header .header-drawer.open {
    margin-top: 0;
    position: fixed;
    top: 0;
}
body.viewitem-open #header .header-drawer {
  top:0;
}
#header-container {
    height: 105px;
    margin-top:35px;
}
#header .header-bar {
   position: relative;
   height: 65px;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
 #header .header-bar .title {
  height:65px;
}
#header .header-bar .title h1, #header .header-bar .title h3 {
 height:65px
}
Falls die Navigation ebenfalls mitscrollen soll, ändert diese Zeile:
#header .header-drawer.sticky {
    margin-top: 0;
    position: fixed;
    top: 0;
}
So:
#header .header-drawer.sticky {
    margin-top: 0;
    position: absolute;
    top: 0;
}

Header - Schematisch

Okay, kommen wir zum eigentlichen Thema, der Einbau des Headerbildes - dazu die schematische Ansicht der <div> Struktur im Header:

#header-container
.header-bar
.title


Der Header liegt in einen äußeren Mantel #header-container von 105px Höhe. In diesem Mantel gibt es die .header-bar von 65px Höhe und darin den Headertitel .title mit ebenfalls 65px Höhe. Der .title kann kleiner sein als die .header-bar, aber niemals größer. Wenn ihr einen größeren Titel, Bild oder Hintergrund als die 65px haben wollt, müsst ihr dementsprechend alle drei Werte anpassen.
Mathematisches Intermezzo
Nehmen wir als Beispiel ein super-schickes Bild von 150px Höhe, dass ihr zum Header-Bild machen wollt. Dieses Bild könnt ihr so einbauen:
#header-container #header.header .header-bar span.title{
  background: url(http://superschickesbild.jpg) no-repeat left;
}
Logischerweise könnt ihr ein 150px großes Bild nicht in einen 65px großen Container packen. Ihr müsst also alle drei Container anpassen - für dieses Beispiel an den fett markierten Stellen:

/*Header 
----------------------------------------------- */
#header .header-drawer {
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5000;
}
#header .header-drawer.sticky {
    margin-top: 0;
    position: fixed;
    top: 0;
}
#header:hover .header-drawer, #header .header-drawer.open {
    margin-top: 0;
    position: fixed;
    top: 0;
}
body.viewitem-open #header .header-drawer {
  top:0;
}
#header-container {
    height: 190px;
    margin-top:35px;
}
#header .header-bar {
   position: relative;
   height: 150px;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
 #header .header-bar .title {
  height:150px;
}
#header .header-bar .title h1, #header .header-bar .title h3 {
   height:65px
}
Schaut dann im Blog so aus:

Probiert das in einem Test-Blog aus, es ist viel einfacher als es sich jetzt anhört. Die CSS von oben funktioniert in allen Browsern problemfrei, auch auf den statischen Seiten. Falls es irgendwelche Darstellungsprobleme gibt, meldet euch, dann schaue ich mir's an. Ihr könnt mit dieser CSS [und Header] euren Blog statt der dynamischen 'Einheitsansicht' ein individuelles Gesicht geben.

Fragen? Kommentare?

Wie immer - falls ihr Fehler im Post findet, hinterlasst bitte einen kurzen Kommentar, das ich das korrigieren kann. Ihr könnt natürlich auch einfach so einen Kommentar hinterlassen, freue mich immer drüber!