Results 1 to 7 of 7

Thread: Absolute Bottom

  1. #1
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Absolute Bottom

    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.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

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

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

    Rocky! (12-19-2008)

  6. #5
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can I have a link to your page please?
    Jeremy | jfein.net

  8. #7
    Join Date
    Dec 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Solved!

    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>
    Last edited by Rocky!; 12-19-2008 at 08:09 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •