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

WilliamCain · 12-15-2010, 07:04 PM

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.

VIPStephan · 12-15-2010, 08:13 PM

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).

WilliamCain · 12-15-2010, 08:37 PM

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 © 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;
}

WilliamCain · 12-15-2010, 10:59 PM

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