SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic footers with CSS?

    What's the best way to position a footer dynamically using CSS?

    i.e. spit out [ this is my footer ] at the bottom of any page?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It depends on what the rest of your HTML/CSS looks like. Can we have a look at it?

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say ( and I am happy to be corrected by someone with more knowledge) that you are going to find this a non-trivial task.

    This is for 2 main reasons:
    1. All of your top level divs are absolutely positioned
    2. None of them, particularly the ones with content, have a fixed height
    The problem this creates is that when you absolutly position a div it is taken out of normal document flow. What this means is that the HTML rendering engine no longer uses that div to calculate the positions of other divs and in your case what this specifically means is that since the content divs are position absolutely with no set height, the HTML rendering engine will not be abe to calculate where the bottom edge of them is and neither will you.

    I think you might be able to do it by
    1. Enclosing all your current divs in another div that has the attribute "position: relative;"
    2. Adding a footer div after this with normal positioning.
    You may have to experiment (or wait for someone better than me to reply).

    Hmmm, have just tried that and it didn't work, sorry

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done some reading on absolute vs. relative positioning and I got pretty confused by it. In the layout I showed you, could relative positioning be used and not affect the current layout?

  6. #6
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how useful relative positioning is except for adjusting the position of elements. You may wish to look at floating divs (setting the attribute "float: left" or "float: right").

    You could have the title and menu divs positioned normally followed by floated divs for the left and right bars and another normal div for the center content.

    Follow that with a div for the footer that has the attribute "clear: both" so that it doesn't appear beside the left or right floated divs.

    HTML Code:
    <div id="Title">
    </div>
    <div id="Navigation">
    </div>
    <div id="LeftContent">
    </div>
    <div id="RightContent">
    </div>
    <div id="MainContent">
    </div>
    <div id="Footer">
    </div>
    with the css
    Code:
    #LeftContent {
      float: left;
      /* floated elements MUST have a width */
      width: <leftContentWidth>px;
    }
    
    #RightContent {
      float: Right;
      /* floated elements MUST have a width */
      width: <rightContentWidth>px;
    }
    
    #MainContent {
      margin-left: <leftContentWidth>px;
      margin-right: <rightContentWidth>px;
    }
    
    #Footer {
      clear: both;
    }

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works great!

    However, is there a way to set a maximum width of the content div? Setting a width: 600px didn't work. To see the problem, look at the content and footer div here:

    http://www.creativearc.com/temp/food...page=academics

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify, here is the CSS for the content div.

    #content
    {

    margin-left: 158px;
    margin-right: 100px;
    margin-top: 200px;

    }

  9. #9
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a max-width property, however I have a feeling that some browsers (IE) don't support it yet.

    Also you have defined your document as being to the XHTML 1.0 Transitional standard, however you code is non-complient because In XHTML all tags MUST be terminated. This is fine for tags like div, p and span which have closing tags (although you have missed out a </p> in the last table in the footer). For non-contining tags (img, br, hr) they don't have closing tags, however they must to be XHTML the solution to this is to add " /" just before the ">" so <br> becomes <br />. HTML ignores the extra character and XHTML interprets it as a closing tag satisfying the standard.

    From a coding standards point of view, although you are still using some tables (and this is fine) I can see no reason to have single cell tables (i.e. 1 row, 1 column). These can be easily replaced with a div and some simple CSS. Your last table is of this category.

    Although putting in "<?xml version="1.0" encoding="iso-8859-1"?>" is strictly complient with the standard, it isn't absolutely required and putting it in produces a bug in IE6 I believe.

    And finally, what resolution are you develping at ? Generally speaking 90% of browsing public use either 800x600 (~50%) or 1024x768 (~40%), although you should check you site stats, if you can, to get your own users profile. I only ask because looking at your site I get the impression you may be developing at 800x600 and if that is the case you should check the site at 1024x768.

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey creativearc, you up there at Purdue?

    Indianapolis here

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You bet! Temporarily anyway...wife is getting a new job.

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Minnesota/America
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Footer with CSS - attempt #2

    After heeding the advice of several sitepoint members, I still had problems with flowing DIVs and getting the footer to work. Instead, I just baked the footer.html code at the bottom of each HTML document.

    Not elegant, but it works.

    However, I DO still need to get a dynamic footer on the home page - any ideas? Everything you see is an absolutely positioned DIV.

    http://www.creativearc.com/temp/foodsci/index.aspx


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
  •