Absolute Bottom

**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

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:

Code:

.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

Code:

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

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">
<p id="topleft" class="test">
&#160;
</p>
<p id="topright" class="test">
&#160;
</p>
<p class="temp">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<span id="bottomleft" class="test">
&#160;
</span>
<span id="bottomright" class="test">
&#160;
</span>
<div id="bottomspace">
&#160;
</div>
</p>
</div>
</div>
</center>
</body>
</html>

Thread: Absolute Bottom

Thread Tools

Search Thread

Absolute Bottom

The Following User Says Thank You to Nile For This Useful Post:

Solved!

Bookmarks

Bookmarks

Posting Permissions