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
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Asheville, North Carolina
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with HTML/CSS (z-index ???)

    I need some help achieving something. I 'm trying to get a graphic to overlap a slide show that I created. Is that possible?

    I am new here and relatively new to HTML/CSS although I've had a few classes but I'm still struggling with it.

    Any help would be much appreciated. This is the last required element I need to get to work for my school project.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Z index sounds like the way to go but note that an element must have the position property set to anything other than “static” for z-index to work. However, without you providing your code it’s a stab in the dark for us (or however they say in English).

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Asheville, North Carolina
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is my html:

    <!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>
    <title>Goodtimes Barbque - Home</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="styles/gtbstyles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="headernavigation">
    <img src="images/logo.png" width="406" height="188" alt="goodtimes logo" />
    <ul id="nav">
    <li id="goodtimesHome.htm"><a href="goodtimesHome.htm" alt="Home"><img src="images/home.png"/></a></li>
    <li id="goodtimesAboutUs.htm"><a href="goodtimesAboutUs.htm" alt="About Us"><img src="images/aboutUs.png"/></a></li>
    <li id="goodtimesMenu.htm"><a href="goodtimesMenu.htm" alt="Menu"><img src="images/menu.png"/></a></li>
    <li id="goodtimesEvents.htm"><a href="goodtimesEvents.htm" alt="Events"><img src="images/events.png"/></a></li>
    <li id="goodtimesShop.htm"><a href="goodtimesShop.htm" alt="Shop"><img src="images/shop.png"/></a></li>
    <li id="goodtimesHistory.htm"><a href="goodtimesHistory.htm" alt="History"><img src="images/history.png"/></a></li>
    <li id="goodtimeslinks.htm"><a href="goodtimeslinks.htm" alt="Links"><img src="images/links.png"/></a></li>
    <li id="goodtimesContact.htm"><a href="goodtimesContact.htm" alt="Contact"><img src="images/contact.png"/></a></li>
    </ul>
    </div>
    <div id="leftHomeFacebook">
    <a href="http://www.facebook.com/#!/pages/Goodtimes-Bar-b-cue/157721367589765" target="_blank">
    <img src="images/Facebook-icon.png" alt="Goodtimes facebook page" /></a>
    </div>
    <div id="leftHomePercent">
    <div id="slideshow">
    <embed src="http://img219.imageshack.us/slideshow/smilplayer.swf" width="426" height="320" name="smilplayer" id="smilplayer" bgcolor="FFFFFF" menu="false" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=img219/2208/1292373583l3p.smil"/>
    <img src="images/100percent.png" width="288" height="144" alt="100% All Wood Smoked"/>
    </div>
    </div>
    <div id="footer">Goodtimes Barbque &copy; 2010
    <div id="mascotImage">
    <img src="images/mascot.png" width="244" height="459" alt="Mascot JT"/>
    </div>
    </div>

    </div>
    </body>
    </html>

    and this is my CSS:

    html {
    font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
    }
    body {
    margin: 0;
    padding: 0;
    text-align: ceter;
    font-size:92%;
    background: #000;
    }
    #nav {
    margin:0;
    padding: 0;
    list-style-type: none;
    width: 980px;
    float:left;
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left;
    width: 12%;
    }
    #nav a {
    float: left;
    width: 50px;
    text-align: center;
    text-decoration: none;
    padding: 0 40px;
    line height: 2.5;
    }
    #nav #nav_Contact a {
    border: none;
    }
    #wrapper {
    background: url(../images/tileable_wood_texture_by_ftIsis_Stock.jpg) fixed;
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    position:relative;
    z-index: 1;
    }
    #headernavigation {
    text-align: center;
    padding: 12px;
    z-index: 100;
    }
    #navbar {
    text-align: center;
    width: 980px;
    height: 125px;
    }
    img {
    border-style: none;
    }
    #leftHomeFacebook {
    position: relative;
    left: -70px;
    top: 285px;
    width: 25px;
    height: 100px;
    margin-top: 175px;
    margin-left: 75px;
    }
    #leftHomePercent {
    position:absolute;
    width: 426px;
    height: 400px;
    left: 175px;
    top: 20px;
    border: none;
    padding: none;
    margin-top: 225px;
    margin-left: 25px;
    bottom: 0px;
    z-index: 20;
    }
    #slideshow {
    position: absolute;
    margin-top: 15px;
    margin-right: 5px;
    right:0px;
    top: 100px;
    bottom: 0px;
    z-index: 10;
    }
    #mascotImage {
    width: 244px;
    height: 459px;
    left: 700px;
    padding: 10px 20px 0 0;
    margin-top: 15px;
    margin-right: 5px;
    position:absolute;
    right: 0px;
    bottom: 0px;
    }
    #imageAboutLeft {
    width: 442px;
    height: 400px;
    float: left;
    padding: 20px 0 0 125px;
    }
    #imageAboutRight {
    width: 241px;
    height: 375px;
    float: right;
    padding: 0 150px 0 0;
    }
    #imageMenuLeft {
    width: 369px;
    height: 425px;
    margin-left:50px;
    float: left;
    }
    #pdf {
    width: 50px;
    height: 25px;
    padding: 20px 0 0 20px;
    bottom: 0;
    }
    #imageMenuRight {
    width: 425px;
    height: 365px;
    float: right;
    padding: 15px 30px 0 0;
    margin-top: -65px;
    }
    #footer {
    width: 995px;
    height: 60px;
    clear: all;
    text-align: center;
    background: rgba(255, 225, 225, 0.5) ;
    visibility: visible;
    border-width: 3px 0 0 0;
    border-style: solid;
    border-color: 000;
    vertical-align: middle;
    padding: 4px;
    margin: 0 auto;
    position:fixed;
    bottom:0;
    }

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Asheville, North Carolina
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With a friends help I got this fixed and would like to share the code if anyone else in the future finds themselves struggling with the same problem as me.

    HTML:

    <div id="leftHomeFacebook">
    <a href="http://www.facebook.com/#!/pages/Goodtimes-Bar-b-cue/157721367589765" target="_blank">
    <img src="images/Facebook-icon.png" alt="Goodtimes facebook page" /></a>
    </div>
    <div id="leftHomePercent">
    <div id="slideshow">
    <embed src="http://img219.imageshack.us/slideshow/smilplayer.swf" width="426" height="320" name="smilplayer" id="smilplayer" bgcolor="FFFFFF" menu="false" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=img219/2208/1292373583l3p.smil"/>
    </div>
    <img id="overlay" src="images/100percent.png" width="288" height="144" alt="100% All Wood Smoked"/>
    </div>

    CSS:

    #leftHomePercent {
    position:absolute;
    width: 426px;
    height: 400px;
    left: 175px;
    top: 20px;
    border: none;
    padding: none;
    margin-top: 225px;
    margin-left: 25px;
    bottom: 0px;
    z-index: 20;
    }
    #slideshow {
    position: absolute;
    margin-top: 15px;
    margin-right: 5px;
    right:0px;
    top: 100px;
    bottom: 0px;
    z-index: 0;
    }
    #overlay {
    position: absolute;
    top: 325px;
    left: 60px;
    z-index: 10;
    }

    Thanks goes out to my friend Kelly Cook for helping me figure this out


  •  

    Posting Permissions

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