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
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Z-Index questions

    So, I'm doing some more experimenting with CSS positioning and using z-index... My method of CSS rollovers requires the use of z-index, however, as I'm sure you all know, z-index doesn't work when you position everything using margins... And I would like to use margins, and have everything centered. Anyone have any ideas on how I can accomplish this?

    This is the code I have currently, I've been trying various things, so it's not actually working at all right now...

    CSS:
    Code:
    * {
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        border:none;
    }
    
    body {
        background-color:#000000;
    }
    
    #img_banner {
        background-image:url(images/banner.jpg);
        background-repeat:no-repeat;
        width:557px;
        height:76px;
        margin:0 auto 0 auto;
        z-index:2;
    }
    
    #label {
        background-image:url(images/label.jpg);
        background-repeat:no-repeat;
        width:557px;
        height:120px;
        margin:0 auto 0 auto;
        z-index:1;
    }
    
    
    #content {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        color:#FFFFFF;
        border:2px solid #FF0000;
        width:50%;
        height:auto;
        margin:200px auto 0 auto;
    }
    
    #resume {
        background-color:#FFFFFF;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-weight:normal;
        color:#000000;
        padding:6px;
        overflow:scroll;
        width:90%;
        margin:10px auto 0 auto;
    }
    
    /* Begin Navigation */
    
    #nav {
        width:557px;
        height:64px;
        padding-left:21px;
        padding-right:2px;
        position:fixed;
        left:0px;
        top:0px;
        z-index:10;
    }
    
    #nav_home {
        background-image:url(images/btn_home.jpg);
        width:72px;
        height:64px;
        margin:-76px auto 0 auto;
        z-index:4;
    }
    
    #nav_home:hover {
        background-image:url(images/ro_home.jpg);
        width:72px;
        height:64px;
        margin:-76px auto 0 auto;
        z-index:5;
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Aceramic Panda Studios - Home</title>
                <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
            </head>
    
            <body>
                <div id="img_banner"></div>
                <div id="label"></div>
                    <!-- Begin Navigation -->
                        <div id="nav">
                            <ul>
                                <li><a href="index.html" title="Link to Home"><div id="nav_home"></div></a></li>
                                <li><a href="about.html" title="Link to About Me"><div id="nav_about"></div></a></li>
                                <li><a href="designs.html" title="Link to Design Gallery"><div id="nav_designs"></div></a></li>
                                <li><a href="resume.html" title="Link to my Resume"><div id="nav_resume"></div></a></li>
                                <li><a href="contact.html" title="Link to Contact Information"><div id="nav_contact"></div></a></li>
                            </ul>
                        </div>
                    <!-- End Navigation -->
                    
                    <!-- Begin Content -->
                        <div id="content">
                            Welcome to my portfolio! I am a freelance web designer located in Mesa, Arizona. 
                            I specialize in XHTML and CSS coding, and am also capable of creating layouts, logos, business cards, etc. 
                            Please take a look around, and <a href="contact.html">contact me</a> if you have any questions.
                        </div>
                    <!-- End Content -->
                
            </body>
        </html>

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Just add position:relative; to the CSS items containing the Z-index property.


  •  

    Posting Permissions

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