1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Header Bild positionieren

Dieses Thema im Forum "Design" wurde erstellt von thoys, 12. Mai 2020.

  1. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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 (?):


    <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><!-- #site-navigation -->

    <?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><!-- #masthead -->

    <div id="main" class="wrapper">


    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
     

    Anhänge:

    #1 thoys, 12. Mai 2020
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.661
    Zustimmungen:
    1.783
    Derzeit ist kein Header Bild auf der Seite sichtbar.
     
    #2 b3317133, 12. Mai 2020
  3. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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
     
    #3 thoys, 12. Mai 2020
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.661
    Zustimmungen:
    1.783
    Derzeit ist kein Header Bild auf der Seite sichtbar, also kann man den entspr. Code nicht ansehen. Ein Screenshot ist dafür nicht ausreichend.
     
    #4 b3317133, 12. Mai 2020
  5. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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
     
    #5 thoys, 12. Mai 2020
  6. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.661
    Zustimmungen:
    1.783
    Ein Ansatz wäre z.B. sowas:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der Abstand des Logos nach oben wird bei top in px eingestellt, für die schmäleren bzw. responsive Ansichten der Seite ggf. noch paar weitere Anpassungen, das darfst Du selbst machen...
     
    #6 b3317133, 12. Mai 2020
  7. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    Hallo b3317133,

    ich habe nun

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    in das geändert

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Und das
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    in das hier
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
    #7 thoys, 13. Mai 2020
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.661
    Zustimmungen:
    1.783
    Ü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.

    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.
     
    #8 b3317133, 13. Mai 2020
  9. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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
     
    #9 thoys, 14. Mai 2020
  10. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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
     
    #10 thoys, 18. Mai 2020
  11. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.661
    Zustimmungen:
    1.783
    Das übergeordnete Element in Deinem Fall ist lt. Browser Inspector (google) dieses, das ist je nach Theme unterschiedlich.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #11 b3317133, 18. Mai 2020
  12. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #12 thoys, 28. Mai 2020
  13. thoys

    thoys Active Member

    Registriert seit:
    26. Mai 2010
    Beiträge:
    41
    Zustimmungen:
    0
    Kann man hier einen Beitrag als gelöst markieren? Oder gibt es diese Funktion nicht?
     
    #13 thoys, 28. Mai 2020
  14. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    Funktion gibt es nicht
     
    #14 maxe, 29. Mai 2020
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden