#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    21
    Rep Power
    0

    Question CSS headspinner!! Layout problem...


    Okay...

    I am laying the whole page out with div's and css. It's going great. However, this final bit has caught me out:

    The site has the usual copyright disclaimer (one single line of small grey text) at the bottom of the page. Now, this has to be about 5px or thereabouts away from the bottom edge of the page/browser window at all times. It sits directly below where the page content (textual) sits. The problem is, if their is only a couple of lines of text, I can get it to stick to the bottom no problem, but if there is a lot of text going beyond the window, I can't get it to follow the text down (it sticks in the same place). Alternatively, I can do the opposite, but the other way won't work!


    As mentioned, the first DIV, titled (and referenced via CSS) is called body, the copyright DIV (titled copyright), I have tried nesting within the body DIV, and outside. Have tried absolute, relative, static. Nothing. Any pointers?

    Thnx in adv.

    EDIT:

    What I am trying to achieve is the equivalent to placing a good ol' Table (Height 100%) with two rows. First row being 95%, second being 5%. If the text was a large amount it would naturally expand the first row beyond the browser window, taking the second row with it.
    Last edited by co2; August 21st, 2003 at 04:14 PM.
  2. #2
  3. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11
    http://cross-browser.com/examples/menu4_template.html

    This goes as a menu, but the idea is the same. I hope this helps you somehow

    I am waiting for the browser to implement "fixed" for the css styles - then this problem would be solved by css
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    I am waiting for the browser to implement "fixed" for the css styles - then this problem would be solved by css
    Actually, the modern browsers pretty well support "position: fixed" attribute.

    Netscape6+, Mozilla, Firebird, Chimera, Galeon, Kmeleon, Opera7+, etc. support "fixed." Among the major browsers, only that non-compliant, obsolete, PoS MSIE does not support it. Unfortunatelly that one bad browser seems to rule the roost.

    sympathetically,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    21
    Rep Power
    0
    Thnx fellas...

    fgeller, I don't think that's what I'm after. Here's an example page of what I am trying to do:

    Here's the standard HTML table version which works fine: http://c-o2.net/testExample/test.html

    And here's what's happening with the layered version: http://c-o2.net/testExample/test2.html

    (I've bordered the layers to make it easier to see what's going on.) As you can see, the Copyright doesn't follow.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    21
    Rep Power
    0
    Quick Update:

    Can anyone verify for me that the layered version (example 2 of my links) actually works in IE6 for Windows!?

    It doesn't work in Safari for OS X, but on checking IE6 on XP, it does! (Ideally I would love it to work on all, but this is the real world )
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    6
    Rep Power
    0
    http://c-o2.net/testExample/test2.html and http://c-o2.net/testExample/test2B.html look fine to me in Safari on OSX and Mozilla on linux, but test2b has the border going through the copyright text in Winie 6.0 and the box is the length of my browser window.

    PS Can you put titles on your test pages. It's confusing cycling through multiple "Untitled Document"
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    See if this, http://garyblue.port5.com/webdev/copyrighttest2.html is what you're looking for.

    Gecko engined browsers should work (tested in Mozilla1.3.1). Opera7 works with the "overflow: auto" attribute set. MSIE, as expected, does not work. It does not break, though. The copyright line is at the bottom of all text, and scrolls with the text.

    If the copyright notice is not nested, IE will put it at the top left of the window if absolute positioning is used. Relative positioning can create other difficulties since the vacated space is not closed.

    So, my little kludge works. The question is, is this what you want?

    cheers,

    gary

    <mode type="edit">To give credit where credit is due, IE is the only one of the three tested that rendered the nested width (percentage) correctly. Sheesh, who'da guessed.</mode>
    Last edited by kk5st; August 22nd, 2003 at 04:32 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    21
    Rep Power
    0

    Nope...


    Thnx kk5st, but that isn't what I was after... I could get it to do just what you've done. I need the copyright to be at the bottom of the text at all times. Hence, if there is only one or so lines (not enough to go beyond the window) the copyright should sit at the bottom of the browser window, below the text, but about 5px (or so) from the bottom of the window. If the text goes beyond the window, the copyright should also be beyond the browser window at the bottom of the text.

    This is similar to a page footer in print I suppose.

IMN logo majestic logo threadwatch logo seochat tools logo