Headerschrift per CSS platzieren

    Hallo.
    Ich möchte auf dieser Site die Headerschrift per CSS platzieren und in das helle Feld des Bildes verschieben. Aber ich weiß nicht, wie ich das im Zusätzlichen CSS schreiben muss. Kann da jemand helfen? Danke.

    http://b-wartburg.de/kurt/

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Eine Zentrierung der Überschrift würde schon helfen:

    .site-header {
    text-align: center;
    }

    Alternativ könnte man a.home-link mit einer relativen Positionierung "schieben":

    a.home-link {
    position: relative;
    left: 25%;
    top: -30px;
    }

    Auf einem 21" Monitor wäre das Ergebnis ok. Auf einem 15" Laptop oder einem Smartphone jedoch nicht. Bei relativen und absoluten Positionen kommt man um eine Anpassung mit Breakpoints nicht herum.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Oh danke, das Zentrieren paßt schon sehr :grin:. Wie kann ich die Schrift noch etwas nach oben schieben? Auf dem Smartphone kommt sie schon etwas zu viel in das Gebäude hinein.

    Um eine relative Positionierung zu vermeiden, kann man z.B. das Padding verringern:

    h1.site-title {
    padding-top: 25px;
    }

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Vielen Dank.

    Was mich allerdings jetzt verwirrt ist, daß das Zentrieren des gleichen Textes einmal mit

    .site-header {
    text-align: center;
    }

    und das Padding mit

    h1.site-title {
    padding-top: 25px;
    }

    angesprochen wird. Beides zusammen hat bewirkt, was es bewirken sollte, verstehen kann ich das noch nicht. Ich hatte das Padding bei .site-header versucht.
    Oder ist es so, daß mit .site-header alle Elemente im Header zentriert werden und mit h1.site-title eben dieser Text, alos der Site-Titel, formatiert wird?

    Vielen Dank für die Hilfe.

    Beispielsweise mit dem Inspektor bei Firefox, kannst Du Dir die Bereiche anschauen.

    Die Klasse site-header bezieht sich auf den ganzen Header-Bereich.

    Die Klasse site-title bezieht sich auf den Bereich mit dem Haupttitel.

    Also so, wie ich es hier

    Zitat

    Oder ist es so, daß mit .site-header alle Elemente im Header zentriert werden und mit h1.site-title eben dieser Text, alos der Site-Titel, formatiert wird?

    vermutet habe. Wieder viel gelernt :idea:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden