Ich möchte gerne den Banner direkt oben an der Seite plazieren, und nicht unterhalb des Suchen Feld.
Aktuell
Ziel
Das heisst das banner Bild sollte am oberen Rand der Seite sein, und das Suchfeld darüber.
Ist das möglich, und wenn ja wie?
2k11 banner ganz oben plazieren
Re: 2k11 banner ganz oben plazieren
Wie meistens gibt es natürlich verschiedene Wege, das zu erreichen. Ich erkläre mal nur den, der mir sinnvoll erscheint, weil er rein über die user.css zu lösen, somit updatesicher und zudem einigermaßen performant ist.suntsu wrote:Ist das möglich, und wenn ja wie?
Du brauchst folgendes in Deiner user.css (Anmerkung unter dem Codeblock beachten!):
Code: Select all
#banner {
position: relative;
padding-bottom: 25px;
}
#banner > img {
position: absolute;
top: 0;
}
#identity,
#searchform {
z-index: 1;
}
YL
Re: 2k11 banner ganz oben plazieren
You made my day.
Genau was ich gesucht habe. Danke dir.
Genau was ich gesucht habe. Danke dir.
Re: 2k11 banner ganz oben plazieren
Ich hole den Post mal hoch.
Bin so vorgegangen wie oben beschrieben und habe dann den Blogtitel in der Konfiguration leer gelassen damit dieser nicht über dem Banner liegt.
Webansicht somit einwandfrei.
Auf dem Smartphone wird das Banner aber nicht angezeigt und wegen des fehlenden Blogtitels wird somit nur die Suchbox obenstehend angezeigt. Gibt es hier eine Möglichkeit in der Usercss, einen Blogtitel eingeben zu können der dann in der Webansicht aber vom Banner verdeckt wird?
Bin so vorgegangen wie oben beschrieben und habe dann den Blogtitel in der Konfiguration leer gelassen damit dieser nicht über dem Banner liegt.
Webansicht somit einwandfrei.
Auf dem Smartphone wird das Banner aber nicht angezeigt und wegen des fehlenden Blogtitels wird somit nur die Suchbox obenstehend angezeigt. Gibt es hier eine Möglichkeit in der Usercss, einen Blogtitel eingeben zu können der dann in der Webansicht aber vom Banner verdeckt wird?
Re: 2k11 banner ganz oben plazieren
Klar, aber es ist halt ein bisschen komplizierter.carpe wrote:Gibt es hier eine Möglichkeit in der Usercss, einen Blogtitel eingeben zu können der dann in der Webansicht aber vom Banner verdeckt wird?
Zunächst mal darfst Du den Blogtitel in der Blogkonfiguration nicht leer lassen. Alles, was das erzeugt, ist eine leere h1 im Kopfbereich, und das ist ggf. sogar kontraproduktiv in Sachen SEO.
Wenn der Blogtitel wieder einen Inhalt hat, wird man ihn sehen, was zumindest auf Smartphones dann auch erwünscht ist. Statt dessen möchtest Du – nehme ich mal an – auf Smartphones das Logo nicht anzeigen, weil es dort wertvollen (und knappen) Platz frisst.
Zunächst einmal musst Du also dafür sorgen, dass die Styles aus dem obigen Code-Beispiel nur auf Geräten > Smartphone angewandt werden. Dafür setzt Du sie in Deiner user.css in das @media-Query, also zwischen diese Zeiten:
Code: Select all
@media only screen and (min-width: 768px) {
…
}
Gleichzeitig willst Du, sobald das Logo „hochgezogen“ wird, Deinen Blogtitel verbergen, aber nur für visuelle Browser. Screenreader und Googlebots, die mit Logografiken ohnehin wenig anfangen können, sollen sie weiter lesen können. Das geht (ebenfalls innerhalb des @media-Queries) so:
Code: Select all
#identity h1,
#identity p {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Noch ein Tipp zum Logo: Wenn Du die Breite des Containers auf 80em erhöhst, sollte auch das Logo breiter sein als in der 2k11-Konfiguration angegeben. Also nicht 1120px, sondern 80 × 16px (1em = 16px, jedenfalls normalerweise), also 1280px bei gleicher Höhe. Da Dein Logo aber „nur“ Schrift auf weißem Hintergrund ist, kannst Du genauso gut
Code: Select all
#page {
background-color: #fff;
}
Generell ist natürlich so ein Logo für eine solche Lösung etwas undankbar, weil es immer irgendwie vom Suchformular überlappt werden wird. Dafür ist diese Option im Theme aber auch einfach nicht vorgesehen.
Bonuslevel wäre übrigens, überhaupt keine Grafik als Logo zu verwenden und stattdessen einfach den Blogtitel in einem passenden Webfont zu setzen. Wenn Du das möchtest, sag Bescheid und sag, welche Schriftart das ist. So schwer ist das nicht.
YL
Re: 2k11 banner ganz oben plazieren
Herzlichen Dank Mathias für den ewig langen Beitrag. Aber in diesem Falle gings es nicht um mein Blog sondern um www.frank-knauber.de
Übrigens.....nachdem ich mich jetzt 1-2 Tage in 2k11 eingearbeitet habe entdecke ich neuen Spass am Bloggen. Top Arbeit.
Übrigens.....nachdem ich mich jetzt 1-2 Tage in 2k11 eingearbeitet habe entdecke ich neuen Spass am Bloggen. Top Arbeit.
Re: 2k11 banner ganz oben plazieren
Da funktioniert das haargenau wie oben beschrieben, nur dass Du dort den Abschnitt über die Hintergrundfarbe und das Logo als Webfont vergessen kannst. Kannst also ab „Noch ein Tipp zum Logo“ aufhören.carpe wrote:Aber in diesem Falle gings es nicht um mein Blog sondern um http://www.frank-knauber.de
YL
Re: 2k11 banner ganz oben plazieren
Ich werds testen. Aber heute nicht mehr Danke Dir.
Re: 2k11 banner ganz oben plazieren
Läuft. 1000 Dank Matthias.