SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Z-Index Help

  1. #1
    SitePoint Zealot bQuast's Avatar
    Join Date
    Jan 2005
    Location
    canada
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-Index Help

    Well I have never played with the z-index before so I decided to use it on my next site which I am building.

    I am having a problem, I have set the z-index for two things in my page the logo, which is big, and then the side which I want to go to the right 100%.

    HTML 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=iso-8859-1" />
    <title>MSNAngel.com</title>
    <style type="text/css">
    <!--
    body {
    	margin: 0px;
    	padding: 0px;
    }
    #logo_area {
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 2;
    }
    #header {
    	position: absolute;
    	height: 80px;
    	top: 1px;
    	left: 0;
    	background-color: #F573BB;
    	width: 100%;
    	z-index: 1;
    }
    #nav {
    	height: 230px;
    	background-image: url(images/nav_bg.gif);
    	background-repeat: repeat-y;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="logoarea">
    <img src="images/top.gif" width="387" height="145" alt="MSN Angel.com" />
    </div>
    <div id="header">
    </div>
    <div id="nav">test</div>
    <div id="content"></div>
    </div>
    </body>
    </html>
    It doesn't display right the header area is above the log, but the logo is supposed to be over the header...
    This is my pages structure, and help would be greatly appreciated.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your logoarea id doesn't match with the CSS. Also, I think (not sure) that it won't work anyway and that for it to work you have to give #container a position of relative or absolute.

  3. #3
    SitePoint Zealot bQuast's Avatar
    Join Date
    Jan 2005
    Location
    canada
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dumb me, o well And yeah it does work, thanks for the simple help Raffles


Bookmarks

Posting Permissions

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