...

View Full Version : Need help: trying z-index/image placement



chevy_ls_6
12-09-2010, 11:09 PM
My wife asked me to help her with a header for a page she's working...but I can't seem to get it to work? The main header image [header_template_3.png] has a transparent portion to the immediate right of the yellow swoosh, and I'm trying to place an image [slide_pics.JPG] in the <h1> below the header background image, so that the <h1> image will only show through the transparent portion of header_template_3 [I'm ultimately gonna put a slideshow in place of the <h1> image *if* I can get this working, lol!].

Can anyone see where I'm going wrong? I think I have everything positioned...is the fact that header_template_3 is the background screwing it up??

Here's the url: http://www.yenko.net/R4/test.html

Excavator
12-09-2010, 11:55 PM
Hello chevy_ls_6

Love the ls6! I'm a mopar man myself, I've had lot's of Cudas, Challengers and Chargers. The fastest car I ever had was a 1970 SuperBee. I built a bored out 400 (bigger bore than a 440 and the same stroke as a 383) for it and put a 6pack on it - love those big blocks.
Now I just drive stuff that has a warranty :o. I have a 2010 Dodge Ram (http://nopeople.com/homepage/2010_Ram/) right now.

For your header, it's all about the stacking order. If you put the image as a background of #header, then you can't stack it. Try it like this instead -
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
color: #666666;
background: #ffffff;
font: 12px Arial, Helvetica, Verdana, Sans-serif;
}
#page-container {
width: 960px;
margin: 0 auto;
position: relative;
background: #2F0DD7;
}
#header {
height: 263px;
background: #00268c;
}
#under {
height: 164px;
width: 960px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#over {
height: 263px;
width: 450px;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
</style>
</head>
<body>
<div id="page-container">
<div id="header">
<img src="http://www.yenko.net/R4/header_template_3.png" alt="school images" width="960" height="164" id="under" />
<img src="http://www.yenko.net/R4/slide_pics.JPG" alt="school smurf" id="over" />
<!--end header--></div>
<!--end page-container--></div>
</body>
</html>

chevy_ls_6
12-10-2010, 07:07 PM
Hello chevy_ls_6

Love the ls6! I'm a mopar man myself, I've had lot's of Cudas, Challengers and Chargers. The fastest car I ever had was a 1970 SuperBee. I built a bored out 400 (bigger bore than a 440 and the same stroke as a 383) for it and put a 6pack on it - love those big blocks.
Now I just drive stuff that has a warranty :o. I have a 2010 Dodge Ram (http://nopeople.com/homepage/2010_Ram/) right now.
Those 6-pack cars are bad news! I think I got paired up with a 440-6 car at every event for like 4-5 years? LOL!

Anyway, thanks for the help, as that solved it...and then I went and added a slideshow, and it won't function! When I first uploaded it it stuttered through the partial pictures then stopped, and it's been dead in the water since...anyone have any ideas?

http://www.yenko.net/R4/test.html

Also, if anyone can tell me why my sidenav and content divs are screwed up I'd appreciate it!!!!

Excavator
12-10-2010, 07:23 PM
Also, if anyone can tell me why my sidenav and content divs are screwed up I'd appreciate it!!!!

You don't close your #header in the right place. The way it is now, #header is enclosing your entire site.
You also string together SidenavSidenavSidenav for quite a long ways with no spaces. Without a space, there is nowherre for a linebreak so it overflows your #sidenav.

Have a look at you code with some comments and indenting, both of which will help keep track of the structure of the document -



<body>
<div id="page-container">
<div id="header">
<img src="http://www.yenko.net/R4/header_template_3.png" alt="Alton R-IV" width="960" height="164" id="under" />
<div id="slideshow">
<img src="http://www.yenko.net/R4/slideshow/slide_pic1.PNG" alt="" width="480" height="164" id="over" class="active" />
<img src="http://www.yenko.net/R4/slideshow/slide_pic2.PNG" alt="" width="480" height="164" id="over" class="active" />
<img src="http://www.yenko.net/R4/slideshow/slide_pic3.PNG" alt="" width="480" height="164" id="over" class="active" />
<!--end slideshow--></div>
<div id="topnav">Topnav</div>
<!--end header--></div>
<div id="sidenav">
<p>
Sidenav Sidenav Sidenavvvv Sidenav Sidenav Sidenav Sidenav Sidenavv Sidenav
Sidenavv Sidenav Sidenav Sidenavv Sidenav Sidenav Sidenav Sidenav
</p>
<!--end sidenav--></div>
<div id="content">
<p>
Content will go hereContent will go hereContent will go hereContent will go hereContent
will go hereContent will go hereContent will go herevContent will go hereContent will go
hereContent will go hereContent will go hereContent will go hereContent will go hereContent
will go hereContent will go hereContent will go hereContent will go hereContent will go
hereContent will go hereContent will go hereContent will go hereContent will go hereContent
will go hereContent will go hereContent will go hereContent will go here
</p>
<!--end content--></div>
<div id="footer">Footer</div>
<!--end page-container--></div>
</body>

chevy_ls_6
12-10-2010, 07:42 PM
You don't close your #header in the right place. The way it is now, #header is enclosing your entire site.
You also string together SidenavSidenavSidenav for quite a long ways with no spaces. Without a space, there is nowherre for a linebreak so it overflows your #sidenav.

Have a look at you code with some comments and indenting, both of which will help keep track of the structure of the document -

You're exactly right on all counts...I had corrected some while you were posting, but your lesson about "tidyness" is duly noted, and spot on.

Typical *great* answers/help here from CF, thanks, y'all...I'm still learing & plugging along!

Now, about that slideshow...?!ZXI@<! [EDIT: nevermind, I hadn't closed my script...DUH!]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum