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 4 of 4

Thread: z index problem

  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts

    z index problem

    hi;
    i am trying to have the div "header" on top of the div "main" and no way i cant make it work...
    help!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background-color: black;
    }
    #wrapper{
    width:1000px;
    margin: 0 auto;
    }
    #header {
    margin-left:280px;
    
    height:26px;  /*complete height 38px*/
    padding-top:12px;
    width:389px;    /*complete width 424px */
    padding-left:35px;
    font-family:Georgia,verdana;
    font-size:12.5px;
    font-weight:normal;
    background-color:#7c907e;
    z-index:1;
    }
    a {
    text-decoration:none;
    color: black;
    }
    a:hover{
    color:#efeede;
    }
    
    
    
    
    
    </style>
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="header"><a href="index.htm"><span style="color:#efeede;">Consult</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="services.htm">Ydelser</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="bio.htm">Baggrund</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="actualites.htm">Aktuelt</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.htm">Kontakt</a></div>
    
    <div id="main"><img src="images/main.jpg"/></div>
    
    </div> <!--close wrapper-->
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Z-index only applies to elements that are "positioned" (this includes relative, absolute, and fixed--all elements are implicitly 'static' positioned in normal flow).

    The easy way to do what you want (have the header be on top of "main") would be to put the the header div inside of main, and then set the main.jpg to be the background of the main div:

    Code:
    <div id="main">
      <div id="header">header stuff...</div>
      main stuff...
    </div>
    CSS:
    Code:
    #main {
      background: url(images/main.jpg) top left no-repeat;
      }

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    thanks for your help but it does not work, now i get the header up there (where i wanted to) but the main is completely black, it's amazing at how difficult it is to do such a simple layout using css and html...

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    i finally got around the problem , this is what i added:

    in the css header:

    #header {
    position:absolute;
    z-index:1 ;

    and i created a css main :

    #main{
    position:absolute;
    }


  •  

    Posting Permissions

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