Hintergrundbild soll überstehen

Seanne

Hallo!

Ich bastele gerade an meinem Blog herum und komme bei diesem Problem einfach nicht weiter: Der oberste Div soll so positioniert werden, dass die Unterkante des Buch-Bildes auf dem Menü aufliegt. Das ist an sich kein Problem, weil ich mich da ja nur mit der Höhe spielen muss, aber wie kriege ich es hin, dass das Bändchen dann nicht hinter dem Menü verschwindet, sondern darüber liegt?

Ich habe schon versucht, mit z-index zu arbeiten, aber entweder ist das der falsche Lösungsweg oder ich habe es einfach nicht hingekriegt ;). Ist es überhaupt möglich, das zu realisieren, wenn das Bild als Hintergrundbild dieses Divs definiert ist?

Hier der CSS-Code des obersten Divs:

Code

.Title { width: 850px; height: 130px; position: relative;  font-style: italic; padding-top: 15px; padding-bottom: 10px; background: url(images/background_book.gif) no-repeat; }

Edit:
Gerade ist mir noch was aufgefallen, ich hoffe es ist okay, wenn ich diese Frage noch dranhänge :)
Wenn ich einen einzelnen Beitrag ansehe oder das Archiv, werden die Amazon-Bilder nicht angezeigt (weder die im Beitrag noch die in der Sidebar). Woran könnte das liegen?

Danke schonmal und liebe Grüße :),
Eva

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

Monika

zum Bild

mache das Bild so, dass man Teile der Navi sieht, also zb den Strich

dann für das Bild als Teil der Navi ein so kommst Du eher zum Ziel,

zum anderen nehm ich an, dass da in der sidebar wo steht

if home ..kann aber nur raten

lg

Photoweblog

Hier ein Beispiel mit Deinem Buch:
z-index mit Hintergrundbild

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>z-index</title>
</head><body>


<div style="background-image:url(book.png); position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888;">
  <b>A:2</b><img src="Trans.png"  alt="Book">
</div>


<div style="background-image:url(book.png); position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888;">
  <b>B:1</b><img src="Trans.png"  alt="Book">
</div>


<div style="background-image:url(book.png); position:absolute; top:190px; left:270px; z-index:3; border:1px solid #888;">
  <b>C:3</b><img src="Trans.png" alt="Book">


  <div style="background-image:url(book.png); position:absolute; top:-30px; left:-30px; z-index:2; border:1px solid #888;">
    <b>D:2</b><img src="Trans.png" alt="Book">
  </div>


  <div style="background-image:url(book.png); position:absolute; top:30px; left:40px; z-index:3; border:1px solid #888;">
    <b>E:3</b><img src="Trans.png" alt="Book">
  </div>


  <div style="background-image:url(book.png); position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888;">
    <b>F:-1</b><img src="Trans.png" alt="Book">
  </div>
</div>


</body></html>

Alles anzeigen

______________________________________
www.Fotomobil.at » a photoproject by faktor

Seanne

Photoweblog:
Hm, also irgendwie klappt es einfach nicht. Verstehe ich das richtig? Ich gebe dem DIV mit dem Hintergrundbild den z-index 2 und dem Menü 1. Und dann müsste es drüberstehen? (Tut es nämlich nicht.) Sorry, ich bin ziemlich neu was das alles betrifft, vielleicht mache ich ja irgendeinen grundlegenden Fehler...

Hier nochmal mein aktueller Code für den Buch-DIV:

Code

.Title { width: 850px; height: 120px; position: relative;  font-style: italic; padding-top: 10px; padding-bottom: 10px; background: url(images/background_book.gif) no-repeat; z-index:2; }

Und hier für das Menü:

Code

.Menu { width: 850px; position: relative; height: 30px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 2px solid #000000; margin-top: 0px; background: url(images/menu_bg_big.gif) no-repeat left #ffffff; z-index:1; }

Und im Header steht dann folgendes:

PHP

<div class="Title"> 
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <p class="Desc"><?php bloginfo('description'); ?></p>
</div>
 
<div class="Menu">
   <ul>
   <li><a class="<? echo (is_home())?'on':''; ?>" href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
		<?php
		$pages = wp_list_pages('sort_column=menu_order&title_li=&echo=0');
		$pages = preg_replace('%<a ([^>]+)>%U','<a $1><span>', $pages);
		$pages = str_replace('</a>','</span></a>', $pages);
		echo $pages;
		?>
  </ul> 
 </div>

Alles anzeigen

Vielleicht könntest du dir das nochmal anschauen und mir sagen, was ich falsch gemacht habe?

Monika: Nein, in der Sidebar steht nichts mit if home...
Dass ich Bild in die Navi einfüge hab ich mir auch schon überlegt, aber ich fürchte, da würde ich mit der Positionierung nicht zurechtkommen.

Danke euch beiden :)!

Edit: Das mit den Amazonbildern hab ich gerade hingekriegt, war ein simpler Referenzierungsfehler *augenverdreh*

Photoweblog

Ja, der Bereich mit dem höheren z-index liegt weiter vorne.

Das Hintergrundbild kann natürlich auch abgschnitten sein, weil der Container (div-Bereich) zu klein ist - oder mehrfach vorkommen weil er zu groß ist ...

Am besten Du erstellst Dir eine kleine html-Seite (so wie ich es gepostet hatte) mit Deinen konkreten Bildern und probierst darin schrittweise Deine Vorstellung umzusetzen.

______________________________________
www.Fotomobil.at » a photoproject by faktor

Seanne

Jetzt hat es geklappt!
Darauf, dass es unten abgeschnitten sein könnte, weil ich den Container zu klein gemacht habe, bin ich natürlich von selbst nicht gekommen :roll:.

Vielen Dank für deine Hilfe - durch deine Beispielseite hab ich das mit dem z-index jetzt endlich verstanden :)

Lg,
Eva

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hintergrundbild soll überstehen

Jetzt mitmachen!