Absolute Bottom [Archive] - Dynamic Drive Forums

Rocky!

12-18-2008, 11:58 PM

Hi all,

I have a slight CSS problem which I am finding hard to fix. I am using the code

.bottomgradient{background-image:url(bottomgradient.png);background-repeat:repeat-x;z-index:-2000;width:100%;height:598px;position:absolute;bottom:0px} on an empty <div> object (besides a non-breaking space) to get a background image at the bottom of the page.

For some reason, it is showing up at the bottom of the visible area of the page and not right at the bottom of the page.

Any help please?
Thanks,
Rocky.

Nile

12-19-2008, 12:07 AM

Please beautify your code here:
http://www.codebeautifier.com/
Using the low(higher readability).
It looks like your code should be:

.bottomgradient
{
background-image:url(bottomgradient.png);
background-repeat:repeat-x;
z-index:-2000;
width:100%;
height:598px;
position:absolute;
bottom:0;
}

Try adding positioning towards the spot you want it to be.

Rocky!

12-19-2008, 12:21 AM

OK, thanks I have beautified my code now.

Unfortunately there is no way I can position it from the top of the page since the length of each document will vary. That's why I was trying to position it from the bottom.

I have also tried using

.bottomgradient
{
background-image:url(bottomgradient.png);
background-repeat:repeat-x;
z-index:-2000;
width:100%;
height:598px;
position:absolute;
top: 100%
}

, but this places the <div> background directly after the body background.

Any ideas?

Nile

12-19-2008, 12:33 AM

If you want it to the right, then just position it to the right iwht the bottom: 0 still in too.

Rocky!

12-19-2008, 12:51 AM

Thankyou for your help Nile, however it is still appearing at bottom of the visible area on load and not at the bottom of the page. I have also tried adding in the left: 0px with no luck (same results).

I have tried it in Firefox 3.1, Firefox 2, IE6, Opera, Safari, SeaMonkey AND Chrome with the same results. I have absolutely no idea why any of these browsers would position it at the bottom of the visible area and not at the bottom of the page.

Any ideas?

Nile

12-19-2008, 01:12 AM

Can I have a link to your page please?

Rocky!

12-19-2008, 07:00 AM

After a LOT of mucking around, I finally got it perfect and fixed:)

Here is the code:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" lang="en-US" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Script-Type" lang="en-US" content="text/javascript" />
<meta http-equiv="Content-Style-Type" lang="en-US" content="text/css" />
<meta http-equiv="Content-Language" lang="en-US" content="en-US" />
<title>My Test Gradient Page</title>
<style type="text/css">
body{background:url(gradient.png) repeat-x rgb(200,200,200);padding:0 0 0 0;margin:0 0 0 0;color:black}
#gradient{background: url(bottomgradient.png) repeat-x bottom}
#topleft,#topright,#bottomleft,#bottomright{width:50px;height:50px}
.test{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px}
.inner{background-color:white;width:900px;margin:60px 0 0 0;text-align:left;z-index:10000;color:black}
.temp{margin:0px 0px 50px 0px}
#topleft{background-image:url(topleft.png)}
#bottomleft{background-image:url(bottomleft.png);float:left}
#topright{background-image:url(topright.png);float:right;margin-top:-50px}
#bottomright{background-image:url(bottomright.png);float:right}
#bottomspace{background:url(bottomgradient.png) repeat-x bottom;height:60px;width:100%;margin: 0px 0px -25px 0px}/*-25px for bottom margin because for some odd reason a white or gray bar appears at the bottom in non-Mozilla browsers*/
div{margin:0 0 0 0;padding:0 0 0 0}
</style>
</head>
<body>
<center>

<div id="gradient">
<div class="inner">

 


 


 
 
 

 


 

<div id="bottomspace">
 
</div>

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