PDA

View Full Version : Z-Index Height Issue



nprivette
Feb 11th, 2010, 01:59 AM
Hi all,

I am doing a website for a racing company. They have a racing stripe logo that they want to extend all the way down the left side of the page, top to bottom. They also want it to sit on top of other elements on the page, so I put the racing stripe in a div with a y-repeat and a z-index of 10 to make sure it would float high above everything else on the page. It looks beautiful, except for one thing...

The div only renders at screen height because it's floating way up there in its "z-index:10" world and doesn't recognize the total length of the page. I figured this out after realizing that playing around with the height attribute did nothing. Also, they want the image on every page, so height can't be a constant value.

I read one solution online that runs a javascript program to determine the length of a page, then you plug in the result as the height of the racing stripe div. But does it really have to be that complicated? Any simpler ideas?

Thanks!!
Nicole

jenius
Feb 11th, 2010, 02:04 AM
I might be wrong, but I think that the z-index attribute should not abolish height control. You might have an error somewhere in your script that is causing this. Did you give it relative or absolute positioning?

If you post some code and/or your website address here, we would probably be able to help more.

nprivette
Feb 11th, 2010, 02:11 AM
Sure - my CSS for the stripe div is

#stripe {
top: 0px;
left: 25px;
position: absolute;
background-image:url(RacingStripe_Bottom.png);
repeat-y;
min-height: 100%;
height: 100%;
z-index: 10;
}

The code is

<div id="stripe"><img src="RacingStripe_Top.png" alt="" width="120" height="159" /></div>

You can view a draft version of the site here:

http://www.ccridergear.com/index.new.html

Thanks!

Excavator
Feb 11th, 2010, 02:18 AM
Hello nprivette,
I think you are confusing min-height and height. min-height:100%; may keep #stripe from being shorter than the body height but height:100%; stops it from going higher.
Hard to say for certain though.

Remove height:100%; ... see if that helps.

Really too much absolute positioning on your site. See pitfalls of absolute positioning here (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
I'ts really a shame how DW steers new coders toward using so much ap and all those Layer# and appDivs it makes!

Excavator
Feb 11th, 2010, 02:23 AM
See my full-height layout demo (http://nopeople.com/CSS/full-height-layout/index.html) to point you toward a better solution.

nprivette
Feb 11th, 2010, 02:30 AM
I have tried taking out the height attribute and leaving it in and it makes no difference. I need min-height because that's the only thing that makes it extend to the bottom of the screen instead of cutting off at the bottom of the "RacingStripe_Top.png" image.

I am as annoyed as you are by all those ApDivs. I took this site over this week from a person who was truly confused. Now I'm the confused one trying to sort through all his code. ;)

Excavator
Feb 11th, 2010, 02:53 AM
I am as annoyed as you are by all those ApDivs. I took this site over this week from a person who was truly confused. Now I'm the confused one trying to sort through all his code. ;)

Yeah, I knew that wouldn't fix it...
The only way I know that you're going to get a stripe to go full height involves a bit of re-coding on that site. When you end up doing it, have a look at my faux columns demo (http://nopeople.com/CSS/faux_columns/index.html) for and example of how I would attempt it, that combined with the first link I showed you of the full height layout.

nprivette
Feb 11th, 2010, 03:47 AM
Thanks for sticking with me on this, Excavator. I took a scalpel (okay, a hatchet) to all that ugly code, and I'd appreciate you taking another look at the page.

http://www.ccridergear.com/index.new.html

I took a look at your demos and set my div height to 100%, took out the z-index altogether, and it's still not working. What in the world?? :(

jenius
Feb 11th, 2010, 05:07 AM
I can't say I can solve this off the top of my head without experimenting around a bit myself, which I am far too lazy to create all the files for. But I do have something that might do the trick, and although it's not a direct solution to the problem, it would work.

This is what I would do. Take the #stripe div and set the height to like 3000px. Then add the property "overflow-y: hidden;" This way, your stripe would go on essentially forever, but it would only be revealed as the page expanded and be hidden otherwise.

Let me know how this goes!

ahallicks
Feb 11th, 2010, 01:32 PM
I think you need to set the height of all parents of that element to 100% too, so that would be:



html, body {
height: 100%;
}


After all, an element can only stretch as far as its container.

Excavator
Feb 11th, 2010, 05:13 PM
Make these changes to your css and see if it helps -


body, html {
background-color: #4891DC;
margin: 0px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
height: 100%;
}

#stripe {
background:url(RacingStripe_Bottom.png) repeat-y;
min-height: 100%;
}
#content {
position: absolute;
width: 850px;
top: 200px;
left: 120px;
}


That may or may not work, it's really kind of in need of a re-write. There is not much there yet so it wouldn't be that difficult.

Excavator
Feb 11th, 2010, 06:05 PM
Give this a try... it may be a good start for you -
<!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></title>
<style type="text/css">
html, body{height: 100%;}
body {background: url(http://www.ccridergear.com/RacingStripe_Bottom.png) repeat-y left top;}
* {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
margin: 0 auto -160px; /* the bottom margin is the negative value of the footer's height */
position: relative;
}
#header {
height: 160px;
background: url(http://www.ccridergear.com/Background_Top_Steel.jpg) repeat-x;
}
#content {
height: 415px;
width: 850px;
margin: 10px 0 0 100px;
/*padding: 0 0 160px 0; may be needed to stop footer from running over text*/
background: #6fc;
}
#footer {
width: 100%;
height: 160px;
position:absolute;
bottom: 0; /* Height of the footer */
background: url(http://www.ccridergear.com/Background_Bottom_Steel.jpg) repeat-x;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="content">
content goes here
<!--closes content--></div>
<div id="footer">footer</div>
<!--closes wrap--></div>
</body>
</html>

nprivette
Feb 22nd, 2010, 06:53 PM
Thanks to all who offered help with this problem. I tried several suggestions, and Excavator's idea of making the stripe a background image for the body came closest to what ended up working. I did have to end up combining the background color and image into one command - otherwise the background color was ignored. Here's the winning combination:

body {
background: #4891DC url (http://www.ccridergear.com/RacingStripe_Bottom.png) repeat-y left top;
margin: 0px 0px 0px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

Thanks a million!