✔ Ü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:
Mh, leider sehe ich das Logo immer noch nicht... Obwohl ich noch Weiten- und Höhenangaben gemacht habe...
 
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