Bild anflanschen - CSS-Problem

errazzor

Hallo,

also hier erstmal der Link zu meiner Seite.

Theme ist Misty Lake.

Ich würde gerne ein Bild ausserhalb der vom Theme definierten divs anflanschen.

So soll es aussehen:

Das (Herz-)Bild soll also die weisse Main-Box ein wenig überlagern und dann nach aussen in den beigen Hintergrund gehen.

Ich habe es jetzt schon stundenlang versucht, aber ich bekomme es einfach nicht hin.
Entweder zerschiesse ich das ganze Layout oder das Bild ist ausserhalb der Main-Box nicht sichtbar.

Ich muss dazu sagen, ich habe von CSS & Co. nicht wirklich Ahnung, ich mache das per Trial&Error.

Ich weiss, dass hier nicht so gerne CSS-Grundlagen vermittelt werden, aber vielleicht mag mir jemand helfen?

Danke.

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

mensmaximus

Füge in der header.php ein Div mit dem Bild ein und positioniere das Div absolut mit entsprechenden top und right Werten sowie einem z-index von z.B. 100

errazzor

Hi,

danke für deine Antwort. Ich bräuchte nur etwas mehr Hilfe dazu - kannst Du mir Codebeispiele geben?

Und wo in der Header.php muss ich das DIV einfügen?

Ich hatte das schon versucht, bin aber wie gesagt gescheitert.

Ich habe das DIV an allen möglichen Stellen eingefügt (im <head>, direkt nach dem Bodytag und nach allen anderen DIVS) aber es hat nie gepasst.

Entweder wurde das gesamte Layout dadurch verschoben oder das Bild war trotz hohem z-index ausserhalb der Mid-Box nicht sichtbar. Auch liess es sich mit Top- und Right-Werten nicht wirklich positionieren.

hier ist die Header.php :

PHP

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package Misty Lake
 * @since Misty Lake 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="[URL]http://gmpg.org/xfn/11[/URL]" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
 
<div id="page" class="hfeed site">
 
 <?php do_action( 'before' ); ?>
 <header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
   <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>
  </div>
  <nav id="nav" role="navigation" class="site-navigation main-navigation">
   <h1 class="assistive-text"><?php _e( 'Menu', 'mistylake' ); ?></h1>
   <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'mistylake' ); ?>"><?php _e( 'Skip to content', 'mistylake' ); ?></a></div>
   <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  </nav><!-- .site-navigation .main-navigation -->
 </header><!-- #masthead .site-header -->
 <div id="main" class="site-main">
 
 
  <?php $header_image = get_header_image();
  if ( ! empty( $header_image ) ) { ?>
   <div class="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
     <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
        
     
    </a>
   </div>
  <?php } // if ( ! empty( $header_image ) ) ?>

Alles anzeigen

mensmaximus

1. Schritt
Erstelle ein Childtheme, fals noch nicht geschehen und kopiere die Datei header.php in das Verzeichnis des Childs

2. Schritt
Öffne die Datei header.php im Child und füge zwischen die Zeilen

Code

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


<!-- hier einfügen, natürlich ohne die Kommentarzeichen -->


<div class="site-branding">

folgenden Code ein

Code

<span id="hkh"><img id="logo2" src="http://blueexperts.de/wp-content/uploads/2015/03/hundkatzehamster.png"></span>

3. Schritt
Füge in die style.css des Childthemes folgende CSS Regel ein

Code

#hkh {
    position: absolute;
    z-index: 999;
    margin-left: 850px;
    -ms-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

Ergebnis:

errazzor

DANKE - es funktioniert!

Zum Verständnis für mich:

Was bewirkt die id "logo2" bzw. woher kommt diese ?

Wie findet man denn heraus, an welcher Stelle im Header.php - Code die Positionierung erfolgen muss?

Wäre toll wenn Du mir vielleicht eine kurze Erklärung dazu geben könntest sofern es deine Zeit zulässt.

Gruß

mensmaximus

Der IMG Code stand ja schon in der Webseite, nur eben auskommentiert, also ist er von Dir. Eine Erklärung wie man das macht kann ich Dir hier nicht liefern. Im Forum geben wie Hilfe zur Selbsthilfe. Für WordPress-, PHP-, HTML- und CSS-Schulungen bemühst Du bitte das Jobforum.

errazzor

Trotzdem vielen Dank.

Monika

Zitat von errazzor

Trotzdem vielen Dank.

du hattest zwar einfache Fragen, aber die zu beantworten braucht "Bücher" :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild anflanschen - CSS-Problem

Jetzt mitmachen!