Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    116
    Thanks
    11
    Thanked 4 Times in 4 Posts

    z-index overlapping image

    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:
    Code:
    <!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:
    Code:
    * {
    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello The_Return,
    Try a negative margin...
    like this -
    Code:
    #car {
    width:604px;
    height:377px;
    float: left;
    position: relative;
    z-index: 2;
    margin: 0 0 0 -366px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •