www.webdeveloper.com
Results 1 to 4 of 4

Thread: z-index issues

Hybrid View

  1. #1
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    81

    z-index issues

    in the following code, the problem i'm having is that the '.sect' elements are rendering 'below' the '.game' elements in regards to z-index... what I am doing wrong?

    <!DOCTYPE html>

    <html>
    <head>
    <title>Page Title</title>
    <script></script>
    <style>
    body {}
    #main, #yoursite, .nav, #content, .sect, .game{position:absolute;}
    #main {width:100%; height:200%; top:150px; left:0px; background:#f48f59; z-index:0;
    border-top-left-radius:700px 300px; border-top-right-radius:700px 300px;
    box-shadow:-100px -20px 50px #f48f59, 100px -20px 50px #f48f59;}
    .nav {font-size:30px; font-family:Tahoma, Geneva; text-decoration:none;
    color:white; padding:10px; border-top-left-radius:80px 35px; border-top-right-radius:80px 35px;
    border-bottom-left-radius:80px 35px; border-bottom-right-radius:80px 35px;}
    #news:hover {text-shadow:1px 1px #f4c259; background:#e0cf72; box-shadow: 2px 2px 2px black inset;}
    #games:hover {text-shadow:1px 1px #f4c259; background:#ff6a55; box-shadow: 2px 2px 2px black inset;}
    #projects:hover {text-shadow:1px 1px #f4c259; background:#665afa; box-shadow: 2px 2px 2px black inset;}
    #contests:hover {text-shadow:1px 1px #f4c259; background:#217405; box-shadow: 2px 2px 2px black inset;}
    #yoursite {font-size:35px; left:50%; margin-left:-124px; font-family:Tahoma, Geneva;
    text-shadow:1px 1px 1px black, -1px -1px 1px #f48f59;}
    #news {left:8%; top:4%; transform: rotate(-20deg);
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari and Chrome */}
    #games {left:30%; top:0%; transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */}
    #projects {right:30%; top:0%; transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);}
    #contests {right:8%; top:4%; transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);}
    #content {top:140px; left:0%; width:100%; height:80%;}
    .sect {box-shadow:0px -8px 10px black; z-index:2;}
    #sect1 {top:400px; left:100px; width:300px; height:200px;}
    #sect2 {top:400px; left:50%; margin-left:-150px; width:300px; height:200px;}
    #sect3 {top:400px; right:100px; width:300px; height:200px;}
    .game {z-index:1;}
    #game1 {top:370px; left:110px; width:280px; height:180px; background:blue;}
    #game2 {top:370px; left:50%; margin-left:-140px; width:280px; height:180px; background:blue;}
    #game3 {top:370px; right:110px; width:280px; height:180px; background:blue;}
    </style>
    </head>

    <body>
    <font id='yoursite'>YOUR WEBSITE</font>
    <div id='main'>
    <a href='' id='news' class='nav'>NEWS</a>
    <a href='' id='games' class='nav'>GAMES</a>
    <a href='' id='projects' class='nav'>PROJECTS</a>
    <a href='' id='contests' class='nav'>CONTESTS</a>
    </div>

    <div id='sect1' class='sect'></div>
    <div id='sect2' class='sect'></div>
    <div id='sect3' class='sect'></div>
    <div id='game1' class='game'></div>
    <div id='game2' class='game'></div>
    <div id='game3' class='game'></div>




    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    At a glance, I suspect that the problem is that at the start of your stylesheet, you set several elements to 'position:absolute;'. This takes them out of the normal document flow, and since you didn't explicitly set the position on these elements, the browser tries to render them all on top of each other. Remove #main from the position:absolute group and see what happens in your real code.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    81
    actually I did set the position of each of those elements... i tried positioning the #main element relatively, but that just messed things up

  4. #4
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    81
    found the solution, it was as follows, i switch a few id's to classes and vice versa.. i guess class vs. id makes a difference
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Page Title</title>
        <script></script>
        <style>
            body {}
            #main, #yoursite, #sect, #game, .nav {position:absolute;}
            #main {width:100%; height:200%; top:150px; left:0px; background:#f48f59;
            border-top-left-radius:700px 300px; border-top-right-radius:700px 300px;
            box-shadow:-100px -20px 50px #f48f59, 100px -20px 50px #f48f59;}
            .nav {font-size:30px; font-family:Tahoma, Geneva; text-decoration:none;
                color:white; padding:10px; border-top-left-radius:80px 35px; border-top-right-radius:80px 35px;
                border-bottom-left-radius:80px 35px; border-bottom-right-radius:80px 35px;}
            #news:hover {text-shadow:1px 1px #f4c259; background:#e0cf72; box-shadow: 2px 2px 2px black inset;}
            #games:hover {text-shadow:1px 1px #f4c259; background:#ff6a55; box-shadow: 2px 2px 2px black inset;}
            #projects:hover {text-shadow:1px 1px #f4c259; background:#665afa; box-shadow: 2px 2px 2px black inset;}
            #contests:hover {text-shadow:1px 1px #f4c259; background:#217405; box-shadow: 2px 2px 2px black inset;}
            #yoursite {font-size:35px; left:50%; margin-left:-124px; font-family:Tahoma, Geneva;
                text-shadow:1px 1px 1px black, -1px -1px 1px #f48f59;}
            #news {left:8%; top:4%; transform: rotate(-20deg);
                        -ms-transform: rotate(-20deg); /* IE 9 */
                        -webkit-transform: rotate(-20deg); /* Safari and Chrome */}
            #games {left:30%; top:0%; transform: rotate(-5deg);
                        -ms-transform: rotate(-5deg); /* IE 9 */
                        -webkit-transform: rotate(-5deg); /* Safari and Chrome */}
            #projects {right:30%; top:0%; transform: rotate(5deg);
                        -ms-transform: rotate(5deg);
                        -webkit-transform: rotate(5deg);}
            #contests {right:8%; top:4%; transform: rotate(20deg);
                        -ms-transform: rotate(20deg);
                        -webkit-transform: rotate(20deg);}
    
            #cont {background:black; top:10px; left:10px; width:200px; height:200px;}
            #game {background:blue; top:230px; width:280px; height:180px;}
            #sect {background:#f48f59; top:260px; width:300px; height:200px; box-shadow:0px -8px 10px black;}
                .g1 {left:110px;} .g2 {left:50%; margin-left:-140px;} .g3 {right:110px;}
                .s1 {left:100px;} .s2 {left:50%; margin-left:-150px;} .s3 {right:100px;}
        </style>
    </head>
    
    <body>
        <font id='yoursite'>YOUR WEBSITE</font>
        <div id='main'>
            <a href='' id='news' class='nav'>NEWS</a>
            <a href='' id='games' class='nav'>GAMES</a>
            <a href='' id='projects' class='nav'>PROJECTS</a>
            <a href='' id='contests' class='nav'>CONTESTS</a>
            <div id='game' class='g1'></div>
            <div id='game' class='g2'></div>
            <div id='game' class='g3'></div>
            <div id='sect' class='s1'></div>
            <div id='sect' class='s2'></div>
            <div id='sect' class='s3'></div>
        </div>
        
    
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles