www.webdeveloper.com
Results 1 to 8 of 8

Thread: How can I make a bar span across the bottom of my page?

  1. #1
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364

    How can I make a bar span across the bottom of my page?

    I want to make a bar span the entire length of the bottom of my page. I've already used my background images for my BODY and HTML tags to make a bar span across the top.

    How could I do this? I want the bar to span the entirety of the window regardless of size and browser.

    Thanks!
    Multi

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    css:
    Code:
    #footer{
      width: 100%;
      background-color: red;
    }
    HTML Code:
    <div id="footer">foo</div>
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    Yeah, that approach doesn't exactly work. It creates many cross-browser compatibility problems.

  4. #4
    Join Date
    Aug 2006
    Posts
    1,909
    I'm a bit curious as to what "cross-browser compatibility problems" you'd see with the code above. I ran a browsershots.org scan on that code, you can see the results. Of their default scan of 52 browsers, only an early pre-release version of Dillo does not display exactly as expected.

    Dave

  5. #5
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    There are spacing issues which occur. Some browsers have extra space between the border of the frame and the div tag. Sometimes it runs over the size of the screen, which makes the need for a scroll bar on your window. It works in either IE or Firefox ( I forget which), but not the other.

    This is why people go to great lengths to find a solution for this problem. I wish it was this simple. I've tried this approach before, and tried modifying it many times to meet my needs before giving it up and trying a less conventional solution (like adding backgrounds to the HTML tag and BODY tag).

  6. #6
    Join Date
    Jan 2009
    Posts
    3,346
    div tags by default span the full width available. Set a static height and add a background image to the div and you should be good to go.

  7. #7
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    364
    Yes, I should be. Unfortunately, I've tried it, and it doesn't work the way I'd expect.

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    Have you explicitly set padding and margin to 0px for the body element?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles