Header Bild positionieren

thoys · Bildschirmfoto vom 2020-05-12 08-44-09.webp

Hallo zusammen,

schön, dass es ein deutsches Wordpress-Forum gibt.

Ich möchte auf meiner Seite https://vierzweidrei.de neben dem obigen Text ein Logo einfügen. Wenn ich das Header Bild aktiviere, dann erscheint es allerdings - optisch - im Body bereich (Bild im Anhang).
Ich nutze das Tewenty Twelve Theme.

Der dafür zuständige Code ist wohl dieser (?):

[PLAIN]
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'nav-menu',
)
);
?>
</nav>

<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
<?php endif; ?>
</header>

<div id="main" class="wrapper">
[/PLAIN]

Wie kann ich die Anordnung so ändern, dass ein Logo neben den beiden Überschriften aus der hgroup erscheint. Also Logo und dann rechts daneben "vierzweidrei.de Ganzheitlich über Medien reden".

Schöne Grüße

Thoys

Werbepost

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

b3317133

Derzeit ist kein Header Bild auf der Seite sichtbar.

thoys

Genau das ist ja die Sache. Wenn ich ein "Headerbild" per Customizer einfüge, dann passiert das, was auf dem Screenshot zu sehen ist. Also das Bild mit den Firmenlogos ist das, was eigentlich im Header sein sollte.

Daher meine Frage, wie ich es da hoch bekomme.

Danke euch
Thoys

b3317133

Derzeit ist kein Header Bild auf der Seite sichtbar, also kann man den entspr. Code nicht ansehen. Ein Screenshot ist dafür nicht ausreichend.

thoys

Ah, jetzt meine ich, was du meinst. Auf vierzweidrei.de habe ich jetzt eines eingefügt. Also, wie gesagt, per Customizer und es erscheint unter dem Menü. Vielen Dank, dass ihr direkt nach dem Code schaut.
https://vierzweidrei.de
Grüße
Thoys

b3317133

Ein Ansatz wäre z.B. sowas:

Code

.site-header {
    position: relative;
}
.site-header hgroup {
    padding-left: 220px; /* Logobreite + 20px Abstand */
}
.site-header > a {
    position: absolute;
    top: 0;
    left: 0;
}

Alles anzeigen

Der Abstand des Logos nach oben wird bei [FONT=Courier New]top[/FONT] in px eingestellt, für die schmäleren bzw. responsive Ansichten der Seite ggf. noch paar weitere Anpassungen, das darfst Du selbst machen...

thoys

Hallo b3317133,

ich habe nun

Code

.site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
}

in das geändert

Code

/* Header */
.site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
    position: relative; /* zeile hinzugefuegt */
    
}
/*hinzugefuegt anfang */
.site-header hgroup {
    padding-left: 140px; /* Logobreite + 40px Abstand */
}
.site-header > a {
    position: absolute;
    top: 0;
    left: 0;
}
/*hinzugefuegt ende */

Alles anzeigen

Und das

Code

.header-image {
    margin-top: 24px;
    margin-top: 1.714285714rem;
}

in das hier

Code

.header-image {
    margin-top: 10px;
    margin-top: 0.625rem;
}

Auf gängigen Handys dürfte das kein Thema sein. Gibt es eine einfach emöglichkeit, dass das Bild sich über die Überschrift schiebt, wenn man auf einem kleinen Handy ist? (Also sicherlich gibt es die, aber wie?)
Vielen Dank

Thoys

Ps. Das ist echt toll, dass hier gleich eine Lösung gepostet wird. Wenn es weniger Arbeit macht mir eine gezielte Anleitung zu geben, dann nehme ich auch gerne die und lese mich etwas ein. Nur ein "Einführung in CSS" wäre etwas unspezifisch, bzw. dafür reicht die Freizeit (für Homepage) in Zeiten von Corona nicht.

b3317133

Üblicherweise schreibt man Ergänzungen wie den o.g. Codeblock in das Menü Design > Customizer > Zusätzliches CSS, das überlagert dann die Regeln in [FONT=Courier New]style.css[/FONT] usw.

Weitere Regeln z.B. für entspr. maximale Bildschirmbreite kann man mit sog. CSS Media Queries ansprechen, das wären dann die genannten CSS Grundlagen, damit Suchmaschine füttern oder YouTube, da gibt es viele weiterführende Informationen.

thoys

Zitat

Üblicherweise schreibt man Ergänzungen wie den o.g. Codeblock in das Menü Design > Customizer > Zusätzliches CSS, das überlagert dann die Regeln in style.css usw.

Genial. Ich hatte mich oft gefragt - aber dann nie nachgelesen - wie das funktioniert. Also das ist das dominante und ich kann fröhlich CSS schreiben. Super!

Vielen Dank dir.

Thoys

thoys

Hi,

ich habe jetzt einiges an Youtube geschaut und Texte gelesen. Wenn ich das richtig sehe, möchte ich keine Verkleinerung des Bildes, sondern, dass es in der mobilen Ansicht über das Menü und die Überschriftengruppe gleitet (umpositioniert).

Ansich sollte das float: left; das ja ganz gut übernehmen. Aber welchem Objekt gebe ich diese Eigenschaft? Für mich sieht das so aus, als ob es site-header, site-navigation usw. gibt, aber sollte es nicht einen übergeordnetes beispielsweise div geben, damit überhaupt Objekte da sind, die sich bewegen können?

Danke dir

b3317133

Das übergeordnete Element in Deinem Fall ist lt. Browser Inspector (google) dieses, das ist je nach Theme unterschiedlich.

Code

<header id="masthead" class="site-header" role="banner">

thoys

So, das Problem ist, dank toller Hilfe, gelöst und ich kann, falls noch jemand das Problem hat, alle dran teilhaben lassen:
Vielen Dank!

Code

/* Header */
.site-header {
    padding: 24px 0;
    padding: 1.714285714rem 0;
    position: relative; /* zeile hinzugefuegt */
}
/*hinzugefuegt anfang */
.site-header hgroup {
    padding-left: 140px; /* Logobreite + etwa 40px Abstand */
}
.site-header > a {
    position: absolute;
    top: 0;
    left: 0;
}


/*Abstaende header-image*/
.header-image {
    margin-top: 10px;
    margin-top: 0.625rem;
}
@media screen and (max-width: 599px) {
    .site-header {
        display: flex;
        flex-direction: column;
        float: none;
    }
    .site-header hgroup {
        order: 2;
        float: none;
        padding: 0;
    }
    .site-header .main-navigation {
        order: 3;
    }
    .site-header > a {
        order: 1;
        position: relative;
        text-align: center;
        margin: 0 auto 12px auto;
        /* 12px (dritter Wert) = Abstand nach unten zum Titel */
    }
}

Alles anzeigen

thoys

Kann man hier einen Beitrag als gelöst markieren? Oder gibt es diese Funktion nicht?

maxe

Funktion gibt es nicht

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header Bild positionieren

Jetzt mitmachen!