✔ Über ein Hintergrund Bild ein Bild legen

Status
Nicht offen für weitere Antworten.
Wenn du uns den kompletten Source-Code postest, können wir dir besser weiterhelfen ;-]
 
Okay, ich kann die Sourcen leider nicht online stellen derzeit...
Aber hier die beiden Files...
Nicht töten, aber ich hab alle Dateien einfach auf meinen Desktop...

Code: 
body{background:#CCCCCC;}  
#container {background:#FFFFFF;   	
width:1020px;   	
height:550px;}  
#head	{background-image: url(head_neu.png);  	
height:140px;   	
width:1020px;}  
#logo	{background-image: url(logo_w.png);
background-repeat:no-repeat;  
background-position:750px 50%;}  
.content{width:330px; 
height:385px; 
float:left} 
.navi	{width:170px;
height:385px; 
float:left}  
#foot	{width:1020px;   	
height:25px;           
 float:left}

HTML: 
<body >   
 <div id="container">          
<div id="head">        
<div id="logo"></div>        	     
</div>          
<div>          
<div class="Navi" >Navigation</div>     
<div class="Content" >Content2 mit viel Blabla</div>     
<div class="Content">Content1 mit viel Blabla</div>	    
 <div class="Navi">News</div>	       
 </div>   
<div style="float:both;"></div>   
<div id="Foot">   
<a href="" >Sitemap</a> |    
<a href="">Kontakt</a> |    
<a href="" >Impressum</a></div>    
 </div>
 
Um das Logo über den Header zu legen, müssen die beiden DIVs entsprechend positioniert und das Logo-DIV mit einem höheren z-index versehen werden - also z.B.:

Code: 
#head
{
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-image: url(head_neu.png);  	
height: 140px;   	
width: 1020px;
}  

#logo
{
position: absolute;
left: 0;
top: 0;
z-index: 2;
background-image: url(logo_w.png);
background-repeat: no-repeat;  
background-position: 750px 50%;
}
Evtl. solltest du für #logo eine Weiten- und Höhenangaben bestimmen.
 
michaelsinterface hat gesagt.:
Um das Logo über den Header zu legen, müssen die beiden DIVs entsprechend positioniert und das Logo-DIV mit einem höheren z-index versehen werden - also z.B.
Zum Vergrößern anklicken....

Tut mir leid, aber das stimmt so leider nicht.

michaelsinterface hat gesagt.:
Evtl. solltest du für #logo eine Weiten- und Höhenangaben bestimmen.
Zum Vergrößern anklicken....

Das ist eher der Fehler, gib #logo die gleichen Größenwerte wie dem header-div und es geht (im Firefox und IE, jedenfalls)
 
Zuletzt bearbeitet:
Also wenn es so nicht klappt, dann versuch doch bitte wirklich mal uns eine Onlineversion zur Verfügung zu stellen (oder zippe alle dateien und häng es hier an):

Code: 
   #logo	{
   	height:140px;
   	width:1020px;
   	background: url(logo_w.png) no-repeat 750px 50%;
   }
 
Du könntest das Logo-DIV auch mit margin-top über das Header-DIV schieben:
Code: 
#logo
{
height:140px;
width:1020px;
margin-top: -140px;
background-image: url(logo_w.png);
background-repeat: no-repeat;  
background-position: 750px 50%;
}
 
Irgendwie hat es jetzt funktioniert, man bin ich jetzt erleichtert!

Vielen Danke, Leute!

Gruss und schönes Osterfest
 
Kannst du uns auch noch verraten, was du am Source-Code verändert hast, dass es jetzt funktioniert?
 
michaelsinterface hat gesagt.:
Könntest das Logo-DIV auch mit margin-top über das Header-DIV schieben:
Code: 
 #logo
 {
 height:140px;
 width:1020px;
 margin-top: -140px;
 background-image: url(logo_w.png);
 background-repeat: no-repeat;  
 background-position: 750px 50%;
 }

greez, maik.l
Zum Vergrößern anklicken....

Ähm Maik, Du machst mir irgendwie Angst mit diesen komischen Tricks, von wegen absolut positionieren und jetzt auch noch margin-top und so. Der Layer #logo ist bereits im Layer #head enthalten, da brauchts sowas nicht, siehe meine Lösung hier:

http://www.daniel-guth.de/tmp/test4.html
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück