...

View Full Version : z-index overlapping image



The_Return
05-09-2009, 11:55 PM
I'm trying to overlap the car on top on #sidefigure so the car is all the way to the left, I have the z-index set but its still not working...

Site: http://securewebdesigns.net/soul/

Index:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Win a Soul</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="javascript/unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="side_figure">
<div class="logo"></div>
</div>
<div id="header_right">
<div class="title"><img src="images/title.png" alt="" />
</div>
<ul id="nav_top">
<li id="home"><a href="index.php"><span>Home</span></a></li>
<li id="winsoultrain"><a href="index.php"><span>Home</span></a></li>
<li id="win1000"><a href="index.php"><span>Home</span></a></li>
<li id="soultrain"><a href="index.php"><span>Home</span></a></li>
</ul>
</div>
<div id="car"><img src="images/car1.png" alt=""/></div>
</div>
</div>
</body>
</html>


Style:


* {
margin: 0;
padding: 0;
border: none;
}
Body {
Background: #9d3a78;
color: #ffffff;
font-size: 10pt;
font-family: Arial;
Margin: 0;
}
#wrapper {
width:1200px;
height:908px;
padding:0;
margin:0 auto;
}
#container {
height:908px;
}
#side_figure {
background:url(../images/side_figure.png) no-repeat;
width:366px;
height:442px;
margin-left:132px;
padding-top:15px;
float:left;
position:relative;
z-index:1;
}
.logo {
background:url(../images/logo.gif) no-repeat;
width:181px;
height:144px;
margin-left:110px;
}
.title {
width:336px;
height:146px;
}
#header_right {
width:702px;
height:191px;
float:right;
}
#nav_top {
width:482px;
height:45px;
margin:0;
}
#nav_top span {
display: none;
}
#nav_top li, #nav_top a {
height:45px;
display:block;
}
#nav_top li {
float:left;
list-style:none;
display:inline;
}
#home {
background:url(../images/home.png) no-repeat;
width:62px;
height:45px;
}
#winsoultrain {
background:url(../images/winsoultrain.png) no-repeat;
width:190px;
height:45px;
margin-left:2px;
}
#win1000 {
background:url(../images/win1000.png) no-repeat;
width:116px;
height:45px;
margin-left:2px;
}
#soultrain {
background:url(../images/soultrain.png) no-repeat;
width:108px;
height:45px;
margin-left:2px;
}
#car {
width:604px;
height:377px;
float:left;
position:relative;
z-index:2;
}

Excavator
05-10-2009, 04:27 AM
Hello The_Return,
Try a negative margin...
like this -

#car {
width:604px;
height:377px;
float: left;
position: relative;
z-index: 2;
margin: 0 0 0 -366px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum