Hemmingway-Rewritten: Textbox verschieben

mrbermel · Mitglied · November 6, 2014 at 12:25 pm
Link kopieren

Thema zu Favoriten hinzufügen
Hallo liebe Community,

ich brauche kurz eure Hilfe bzlg. des oben genannten Blogs. Leider ist je nach Bildschrimgröße des Benutzers der Textblock im Header an einer anderen Position, sodass z.B. bei vielen Besuchern der Text genau auf den Köpfen der Personen liegt.

Auf meinem 24 Zoll Monitor ist dieser Textblock relativ mittig angebracht, sodass man jeden auf dem Bild erkennt.

Kann mir jemand sagen wie ich den Text weiter nach unten verschieben kann in (CSS?). Ich könnte theoretisch die schwarze Box um den Text herum entfernen, dann sieht man aber leider den Schriftzug kaum noch.

Ich wäre sehr dankbar für eine Antwort und verbleibe

mit freundlichen Grüßen,
Kristian

Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
iqatrophie · Moderator · November 7, 2014 at 2:11 pm
Link kopieren
Hast du das kostenpflichtige Custom Design Upgrade bzw. das Premium-Upgrade erworben? Nur dieses erlaubt die Änderung per CSS.

Falls ja, versuche doch mal folgenden Code:
```
.site-branding {
    margin-top: 6em;
}
```
Bei meinem 17“ Monitor kann man damit die Gesichter erkennen. Wie sich das auf andere Ausgabegeräte wie Smartphones, Tablets, … auswirkt kann ich leider nicht sagen. Müsstest du selbst testen.

Gruß
Martin(IQ)
mrbermel · Mitglied · November 7, 2014 at 11:16 pm
Link kopieren
Danke für die Antwort, auf jeden Fall sieht man jetzt auch die Gesichter! Leider wird damit der Header nur vergrößert, sodass ein Großteil des Blogs jetzt das Bild ist.

Jetzt haben wir quasi den Header bearbeitet aber nicht den Textblock in der Mitte – hat dafür vielleicht jemand eine Lösung?

Ich werde es vorerst mit margin-top lassen, danke! :)
iqatrophie · Moderator · November 8, 2014 at 2:50 pm
Link kopieren
Ich habe mir den HTML- bzw. CSS-Code nochmal angesehen. Eventuell habe ich eine bessere Lösung für das Problem gefunden.

Vergiss zunächst mal meinen früheren Vorschlag mit „margin-top“ bzw. entferne den Code wieder. Nächster Versuch dann mit:
```
.site-header-image {
    padding: 15% 0 0;
}
```
Den Prozentwert kannst du noch an deine Bedürfnisse anpassen und sollte die Box je nachdem nach oben oder unten verschieben.
mrbermel · Mitglied · November 9, 2014 at 4:39 pm
Link kopieren
Suuuuper geil – danke dafür! Konnte den Befehl nirgendwo finden, jetzt siehts wirklich besser aus (sowohl auf 15, 17 und 24 Zoll getestet!).

:)
iqatrophie · Moderator · November 9, 2014 at 7:28 pm
Link kopieren
Freut mich, wenn ich helfen konnte. :)