Banner soll in den Header, aber über dem eigentlichen Header-Bild

diesunddas

Hi.

Ich möchte gerne zwei Banner im Header meiner Wordpress-Seite einbauen,
und zwar so, daß diese über dem eigentlichen Header-Bild liegen.
Da mein Theme das nicht von sich aus hergibt, muss ich mich wohl im Theme-Editor
an die header.php ranpirschen.

Die erforderliche Zeile für den ersten Banner

PHP

<a href="[COLOR=#0000ff]Linkzie[/COLOR]l"><img src="[COLOR=#0000ff]mein Bild auf dem Server[/COLOR]" alt="[COLOR=#0000ff]Bildbezeichnung[/COLOR]" width="261" height="153" class="aligncenter size-full wp-image-95" /></a>

hab' ich bereits erstellt und folgendermaßen integriert:

PHP

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
  <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
    <?php wp_head(); ?>
 <a href="[COLOR=#0000ff]Linkzie[/COLOR]l"><img src="[COLOR=#0000ff]mein Bild auf dem Server[/COLOR]" alt="[COLOR=#0000ff]Bildbezeichnung[/COLOR]" width="261" height="153" class="aligncenter size-full wp-image-95" /></a>
   </head>

Alles anzeigen

Mit dem Ergebnis, daß der Banner zwar dargestellt wird, aber über dem eigentlichen Header-Bild, also in etwa so:

PHP

[COLOR=#ffffff]------------------------------[/COLOR]|-----Banner----|
|-------------------------------Header-Bild--------------------------------------|

Dank mangelnder CSS-Kenntnisse ist es mir nicht möglich, das besser hin zu bekommen. Ich weiß, daß ich wohl den z-index
benutzen muss, um die Banner in die Ebene über dem Header-Bild zu bringen. Nur wie??
Das Endresultat sollte in etwa so aussehen:

PHP

------------------------------------------------------------------------------------
|[COLOR=#ffffff]-----------------------------------------------------------------------------------                                                                                                       [/COLOR]|
| [COLOR=#ffffff]------------ [/COLOR]    |Banner| [COLOR=#ffffff]------- [/COLOR]                  Header-Bild [COLOR=#ffffff]                   ------------[/COLOR]|Banner|[COLOR=#ffffff]-----------[/COLOR]           |
| [COLOR=#ffffff]                                                                                                      -----------------------------------------------------------------------------------[/COLOR]|
------------------------------------------------------------------------------------

Danke für Eure Hilfe!

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

Regnew

Hallo!

Um das zu beantworten, müsstest Du wohl noch mehr Code vom Header öffentlich legen, sowie von der stylesheet.
Denke auch dran, wenn Du das einfach so in die header.php schreibst, dass beim nächsten Update des Themes deine Änderungen weg sind: Stichwort: https://codex.wordpress.org/Child_Themes

Monika

das ist eine CSS Frage, CSS und html sind siamesische Zwillinge,

es gibt Plugins die CSS liefern etc et

ohne Link braucht jeder hier Glaskugeln oder gibt Tipps aufgrund von fragmentarischen Informationen.

Du kannst URL Shortener nutzen, wie zb goo.gl

und du kannst einen Shortcode nicht einfach so wie im Schreibfeld in ein .php Template schreiben...

diesunddas

Gerne, wenn's hilft. Vollständige Codes siehe unten.
Ich hatte allerdings nicht vor, das Theme noch mal zu updaten. Das Theme leigt doch auf meinem Server und ein Update
geschieht doch nicht automatisch, oder?

Die Style.CSS findet ihr hier: style.css

und hier die nicht allzu lange

HEADER.PHP:

PHP

<?php
/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
  <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
    <?php wp_head(); ?>
  <a href="[COLOR=#0000ff]Linkzie[/COLOR]l"><img src="[COLOR=#0000ff]mein Bild auf dem Server[/COLOR]" alt="[COLOR=#0000ff]Bildbezeichnung[/COLOR]" width="261" height="153" class="aligncenter size-full wp-image-95" /></a>
   </head>


<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <?php if ( get_header_image() ) : ?>
    
  <div id="site-header">
              <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>
    </div>
  
    <?php endif; ?>


    <header id="masthead" class="site-header" role="banner">
        <div class="header-main">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>


            <div class="search-toggle">
                <a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
            </div>


            <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
                <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
            </nav>
        </div>


        <div id="search-container" class="search-box-wrapper hide">
            <div class="search-box">
                <?php get_search_form(); ?>
            </div>
        </div>
    </header><!-- #masthead -->


    <div id="main" class="site-main">

Alles anzeigen

diesunddas

Monika: die beiden letzten Felder in meinem ersten Post sind kein php-code.
Das diente nur der Visualisierung.
Plugins liefern mir bislang nicht das gewünschte Resultat. Wenn Du ein passendes für mein Problem
weisst, dann immer her damit.
Und wie schon in einem meiner vorigen Thread erwähnt, kann ich den Link aus rechtlichen Gründen nicht teilen.

Monika

ich meinte, dass das CSS von einem Plugin eine etwaige Lösung stören könnte..

du stellst absoluteste Anfängerfragen, die mit WordPress an sich nichts zu tun haben. zb CSS Fragen,
du versuchst Shortcode in ein Template einzufügen wie in den visuellen Editor....

ich werde immer irritierter, weil du die Domain aus rechtlichen Gründen nicht herzeigen darfst => sowas habe ich zu 99% nur bei Kunden wo ich Subunternehmerin bin.

diesunddas

Also ich hab jetzt endlich die Erlaubnis, daß ihr die Seite sehen dürft.
Der eine Banner ist schon drin, nur wird er auf der y-Achse über dem Header positioniert.
Er soll aber auf der z-Achse über den Header. Z-index? wie benutzen?
[Edit: Ich hab natürlich für alle Änderungen schon mal ein child-Theme vorbereitet]

http://redseabiodiversity.senckenberg.de/

SirEctor

Was ist die z-Achse? Ich kenne nur die x- und y-Achse. Oder soll das Bild irgendwie diagonal laufen?

Das zweite Bild wird nicht geladen, weil es von http://172.30.5.122/redseabiodiver…2016/06/KAU.png kommt und so nicht existiert. Evtl. hast du die Seite umgezogen und nicht alle Links in der Datenbank korrigiert?

Du verwendest auch mehrfach die gleiche ID auf einer Seite. IDs sollten einmalig auf einer Seite sein. Ich meine z. B. <div id="site-header">

diesunddas

Hi, danke für den Hinweis. Das mit 172.30..... war noch ein Überbleibsel des Umzugs. Hab ich korrigiert.
Mit Z-Achse mein' ich sowas wie mehrere Layer übereinander (quasi aus dem Bildschirm heraus in Richtung des Betrachters).
Und daß ich die ID "site-header" 2x verwendet habe, ist lediglich meinen ungenügenden Programmierkenntnissen geschuldet.
Ich nehme an, ich muss für den Banner in der style.css eine eigene ID generieren?
Da kommt dann wohl auch die Info zur Platzierung mittels z-index hin?
Ich wäre für ein Beispiel dankbar.

SirEctor

Ich verstehe nicht wirklich was du genau willst und kann so auch kein Beispiel geben. Mach doch bitte mal ein Bild und zeig was wohin soll?

Oder willst du einfach nur das Logo im Banner haben? Dann mach aus dem ersten <div id="site-header"> ein <div id="site-header-logo"> und schreib in die CSS folgendes

Code

#site-header-logo {
    position: absolute;
    z-index: 9;
}

diesunddas

So soll's später mal aussehen.
Die beiden klickbaren Banner sollen über dem Header liegen.

[Edit] Ah, siehe da. Hab mal Deinen Vorschlag implementiert. So ist das schon besser. In der CSS
geb' ich jetzt auch einfach die Position genau an mit top, left, etc.? Natürlich sollte beim Zoomen auch
die Position des Banners im Verhältnis zum Logo stabil bleiben...

SirEctor

Zitat von diesunddas

In der CSS geb' ich jetzt auch einfach die Position genau an mit top, left, etc.?

ja richtig, teste einfach mal ein bisschen.

Responsive ist das ganze nicht, da musst du dir überlegen was mit dem Logo ab welcher Breite passieren soll.

diesunddas

Naja, es soll sich so verhalten wie das Header-Bild. Beim kleiner zoomen funktioniert das auch: es wird parallel mit dem header kleiner.
Beim größer zoomen "hüpft" mir das Logo aber aus dem Header. Kann ich das verhindern?

SirEctor

Warum bearbeitest du nicht das eigentliche Banner (/wp-content/uploads/2016/06/header_twentyfourteen.jpg) und holst beide Logos schon ins Bild? Das wäre für dich die einfachste Lösung.

diesunddas

Hab' ich mir ja auch schon überlegt. Aber es sollen ja zwei Banner werden. Die sind dank Deiner Hilfe jetzt auch schon platziert.
Da ich nicht über ein Bild zwei verschiedene Links ansteuern kann, muss ich mir eben auf diese Weise helfen.

diesunddas

Zitat von diesunddas

Naja, es soll sich so verhalten wie das Header-Bild. Beim kleiner zoomen funktioniert das auch: es wird parallel mit dem header kleiner.
Beim größer zoomen "hüpft" mir das Logo aber aus dem Header. Kann ich das verhindern?

Ich hab' jetzt ewig rumprobiert, bekomm' die Logos aber einfach nicht adaptiv hin. Das Headerbild scheint adaptiv zu sein, die Logos (oder Banner) jedoch nicht.

SirEctor

Hier mal was auf die Schnelle:

Code

#banner {
    position: absolute;
    top: 15px;
    left: 10px;
    height: auto;
    z-index: 9;
    max-width: 20%;
}
#banner2 {
  position: absolute;
  top: 10px;
  right: 10px;
  height: auto;
  z-index: 9;
  max-width: 30%;
}
#banner img {
    max-width: 100%;
    height: auto;
}




#banner2 img {
    max-width: 100%;
    height: auto;
}

Alles anzeigen

diesunddas

Danke! Soweit, so gut. Die ersten beiden styles (banner, banner2) hab ich in der style.css entsprechend angepasst.
Auch #banner img und #banner2 img hab ich in die style.css gepackt Müssen die nicht mit Minus verbunden sein (#banner-img; banner2-img)?
Hab ich jetzt einfach so gemacht, korrigier' mich bitte, wenn das Quatsch ist.
An welcher Stelle aktiviere ich jetzt die beiden img's in der header.php?

so

PHP

<div id="banner" style=banner_img>
   <a href="http://marine.kau.edu.sa/Default.aspx?Site_ID=150&amp;Lng=EN" target="_blank">  <img src="http://redseabiodiversity.senckenberg.de/wp-content/uploads/2016/06/KAU.png" alt="KAU" width="261" height="153"; /></a>
  </div>
  
  <div id="banner2" style=banner2_img>
   <a href="http://www.senckenberg.de/root/index.php?page_id=71" target="_blank">  <img src="http://redseabiodiversity.senckenberg.de/wp-content/uploads/2016/06/senckenberg.png" alt="Senckenberg" width="326" height="78" /></a>

zeigt das keine sichtbare Wirkung. 'tschuldige, ich hab noch nicht wirklich den plan, wie ich was wo in der header.php ansteuere.

Danke!

SirEctor

Mein Code von oben gehört so in die CSS. Da brauchst du am HTML-Code nichts ändern. Was hast du überhaupt mit style=banner2_img vor? Das gehört da nicht hin.

Woogie-Design

Er meint wohl class="style_banner2" also nehm ich mal an.

Ich würde Leuten davon abraten absolut zu positionieren wenn sie keine Ahnung haben, was das überhaupt macht. Ich weiß nicht wie viele Webseiten ich schon korrigiert habe nur weil da wieder ein Ahnungsloser Webdesigner meinte wie toll so ein Absolut ist, damit kann man Bilder und Container ja so toll auf dem eigenen Bildschirm platzieren :D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Banner soll in den Header, aber über dem eigentlichen Header-Bild

Jetzt mitmachen!