tricky css question

Discussion in 'HTML' started by Thomas Scheffler, Dec 20, 2004.

  1. Hi,

    I have a difficult layout and I don't want to use tables or javascript
    for it.

    ******************************************
    * LOGO * <-- variable --> *
    ******************************************
    * ^ * *
    * T * *
    * i * *
    * l * *
    * l * *
    * * CONTENT *
    * B * *
    * O * *
    * T * *
    * T * *
    * O * *
    * M * *
    ******************************************
    * <-- variable --> *
    ******************************************

    So I hope this can be understood but I try to explain it further.
    The page as a logo which is at the top left corner. There is a header
    right next to the logo which should expand when the window is resized.
    At the left there should be some kind of navigation panel which should
    expand to the bottom so the CONTENT should do the same. At the bottom
    there is a footer.
    So this should be the behaviour: If the content is to big for the page
    the user has to scroll of cause. But if not the window should be
    "filled" to 100%. This means the footer has to be at least at the bottom
    of the browser window. If the window is resized, it should be adjusted
    that way. There should be no horizontal scrollbar of cause.
    It's easy to implement this with css and a classic table. But how do I
    do this with nothing more than CSS and divs?

    The diffs should appear in this order for accessibility reasons:
    LOGO, HEADER, NAVI, CONTENT, FOOTER...

    Is anybody skilled with this knowledge? The best I get was either the
    footer is at the bottom of the screen and is overlapping the content partly:

    *************************************
    * *
    * CONTENT IS HERE *
    *************************************
    * FOOTER *
    *************************************
    * .... AND HERE *
    * *
    * *
    *************************************

    Or the other extreme the footer is always at the bottom of the navi AND
    the CONTENT, but this could be the middle of the page, the content and
    navi divs are not streched to "nearly 100%" then.
    So how do I do this?

    Cheers

    Thomas
     
    Thomas Scheffler, Dec 20, 2004
    #1
    1. Advertising

  2. Thomas Scheffler

    Steve Pugh Guest

    On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    <> wrote:

    >So this should be the behaviour: If the content is to big for the page
    >the user has to scroll of cause. But if not the window should be
    >"filled" to 100%. This means the footer has to be at least at the bottom
    >of the browser window.


    This is tricky. I do have a solution that either works as desired or
    degrades to standard page (footer at end of content even if content is
    shorter than the window) in most browsers but there are some problems
    in, IIRC, Mac IE and older versions of Opera.

    See http://steve.pugh.net/test/test57a.html

    It's been a while since I looked at it though and I'm unlikely to be
    able to dig up my notes this side of Christmas so good luck.

    Steve
     
    Steve Pugh, Dec 20, 2004
    #2
    1. Advertising

  3. Thomas Scheffler

    Kris Guest

    In article <cq7fkl$4as$01$-online.com>,
    Thomas Scheffler <> wrote:

    > The diffs should appear in this order for accessibility reasons:
    > LOGO, HEADER, NAVI, CONTENT, FOOTER...


    I'd say for the same reasons:
    LOGO, CONTENT, FOOTER, NAVI

    People visit your page primarily for content. Leaving it is a close
    second, but content is still #1.

    If you had a navigation of a mere 5 links, who cares, though.

    --
    Kris
    <> (nl)
     
    Kris, Dec 20, 2004
    #3
  4. Thomas Scheffler

    Neal Guest

    On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    <> wrote:

    > If the content is to big for the page the user has to scroll of cause.
    > But if not the window should be "filled" to 100%.


    You're describing a particular table layout which CSS isn't capable of
    emulating. Well, it can, but it's really tricky.

    See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
    invent this way of keeping the footer on the bottom, but I don't have the
    reference to who did. I used negative margins and various other tricks to
    make things work out.

    And as always, this is not fully tested, so reports of issues are welcome.
     
    Neal, Dec 20, 2004
    #4
  5. Thomas Scheffler

    Neal Guest

    Neal, Dec 20, 2004
    #5
  6. Thomas Scheffler

    Steve Pugh Guest

    On Mon, 20 Dec 2004 17:02:42 -0500, Neal <> wrote:

    >Steve Pugh:
    >
    >> See http://steve.pugh.net/test/test57a.html

    >
    >Ah, so you're who I stole that from! :)
    >
    >Credit is being added...


    But I stole large chunks of it from other people. ;-)
    I wish I could find who they were so I could give them credit....

    Steve
     
    Steve Pugh, Dec 20, 2004
    #6
  7. Steve Pugh wrote:
    > On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    > <> wrote:
    >
    >
    >>So this should be the behaviour: If the content is to big for the page
    >>the user has to scroll of cause. But if not the window should be
    >>"filled" to 100%. This means the footer has to be at least at the bottom
    >>of the browser window.

    >
    >
    > This is tricky. I do have a solution that either works as desired or
    > degrades to standard page (footer at end of content even if content is
    > shorter than the window) in most browsers but there are some problems
    > in, IIRC, Mac IE and older versions of Opera.
    >
    > See http://steve.pugh.net/test/test57a.html
    >
    > It's been a while since I looked at it though and I'm unlikely to be
    > able to dig up my notes this side of Christmas so good luck.
    >

    Thank you for your great example. It works around the most difficult
    issue with the footer. But the "height:auto" of the navigation panel did
    not work as expected. It's not streched to the footer. Since the
    navigation bar can grow on large content to the right. I don't want to
    hack by backgrounding the content or holder div here.

    Cheers Thomas
     
    Thomas Scheffler, Dec 21, 2004
    #7
  8. Thomas Scheffler wrote:
    > Steve Pugh wrote:
    >
    >> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    >> <> wrote:
    >>
    >>
    >>> So this should be the behaviour: If the content is to big for the
    >>> page the user has to scroll of cause. But if not the window should be
    >>> "filled" to 100%. This means the footer has to be at least at the
    >>> bottom of the browser window.

    >>
    >>
    >>
    >> This is tricky. I do have a solution that either works as desired or
    >> degrades to standard page (footer at end of content even if content is
    >> shorter than the window) in most browsers but there are some problems
    >> in, IIRC, Mac IE and older versions of Opera.
    >> See http://steve.pugh.net/test/test57a.html
    >>
    >> It's been a while since I looked at it though and I'm unlikely to be
    >> able to dig up my notes this side of Christmas so good luck.
    >>

    > Thank you for your great example. It works around the most difficult
    > issue with the footer. But the "height:auto" of the navigation panel did
    > not work as expected. It's not streched to the footer. Since the
    > navigation bar can grow on large content to the right. I don't want to
    > hack by backgrounding the content or holder div here.

    Another issue I just noticed is the hard width of 150px for the navi
    which is needed for the content as the left margin. If the navigation
    has some long word, this breaks the layout. As I said this is really
    tricky :eek:)

    Cheers
    Thomas
     
    Thomas Scheffler, Dec 21, 2004
    #8
  9. Thomas Scheffler

    Steve Pugh Guest

    On Tue, 21 Dec 2004 13:43:56 +0100, Thomas Scheffler
    <> wrote:
    >Steve Pugh wrote:
    >> On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    >> <> wrote:
    >>
    >>>So this should be the behaviour: If the content is to big for the page
    >>>the user has to scroll of cause. But if not the window should be
    >>>"filled" to 100%. This means the footer has to be at least at the bottom
    >>>of the browser window.

    >>
    >> This is tricky. I do have a solution that either works as desired or
    >> degrades to standard page (footer at end of content even if content is
    >> shorter than the window) in most browsers but there are some problems
    >> in, IIRC, Mac IE and older versions of Opera.
    >>
    >> See http://steve.pugh.net/test/test57a.html
    >>
    >> It's been a while since I looked at it though and I'm unlikely to be
    >> able to dig up my notes this side of Christmas so good luck.
    >>

    >Thank you for your great example.


    Your welcome.

    >But the "height:auto" of the navigation panel did
    >not work as expected. It's not streched to the footer.


    That is working as expected.

    >Since the
    >navigation bar can grow on large content to the right. I don't want to
    >hack by backgrounding the content or holder div here.


    What you do between the header and footer is the same as any other web
    page. To have mulitple columns with backgrounds that stretch to the
    height of the longest you need to use a trick of some sort and
    background images are amongst the most reliable.

    It's shame that IE doesn't support CSS tables as
    http://steve.pugh.net/test/test72.html demonstrates.

    Steve
     
    Steve Pugh, Dec 21, 2004
    #9
  10. Neal wrote:
    > On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    > <> wrote:
    >
    >> If the content is to big for the page the user has to scroll of cause.
    >> But if not the window should be "filled" to 100%.

    >
    >
    > You're describing a particular table layout which CSS isn't capable of
    > emulating. Well, it can, but it's really tricky.
    >
    > See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
    > invent this way of keeping the footer on the bottom, but I don't have
    > the reference to who did. I used negative margins and various other
    > tricks to make things work out.
    >
    > And as always, this is not fully tested, so reports of issues are welcome.

    Hi,

    thanks for your response. The issue is that your navi-div named column
    is not as long as to the bottom, which makes it difficult to change the
    background here. It's also affected by long words which does not expand
    the div to the right and increases the margin-left of the content. I
    think is just not possible to pin div togehter in just a complex manner.
    The thing of Steve would do the trick if you can have to divs of equal
    height: the navi and content div. THen you can have the navi floating to
    the left and have no issues with big words in the navi as this increases
    the with of it. Also you have no issues withe the content of the content
    div floating around the navi div. But I cannot see how this can be achieved.

    cheers
    Thomas
     
    Thomas Scheffler, Dec 21, 2004
    #10
  11. Kris wrote:
    > In article <cq7fkl$4as$01$-online.com>,
    > Thomas Scheffler <> wrote:
    >
    >
    >>The diffs should appear in this order for accessibility reasons:
    >>LOGO, HEADER, NAVI, CONTENT, FOOTER...

    >
    >
    > I'd say for the same reasons:
    > LOGO, CONTENT, FOOTER, NAVI
    >
    > People visit your page primarily for content. Leaving it is a close
    > second, but content is still #1.
    >
    > If you had a navigation of a mere 5 links, who cares, though.
    >

    NAVI is some kinde of dynamic hierarchical menu. I think it would be
    better not to have the content before it. But that is matter of taste.

    Cheers

    Thomas
     
    Thomas Scheffler, Dec 21, 2004
    #11
  12. Steve Pugh wrote:
    > On Tue, 21 Dec 2004 13:43:56 +0100, Thomas Scheffler
    > <> wrote:
    >
    >>Steve Pugh wrote:
    >>
    >>>On Mon, 20 Dec 2004 22:19:15 +0100, Thomas Scheffler
    >>><> wrote:
    >>>
    >>>
    >>>>So this should be the behaviour: If the content is to big for the page
    >>>>the user has to scroll of cause. But if not the window should be
    >>>>"filled" to 100%. This means the footer has to be at least at the bottom
    >>>>of the browser window.
    >>>
    >>>This is tricky. I do have a solution that either works as desired or
    >>>degrades to standard page (footer at end of content even if content is
    >>>shorter than the window) in most browsers but there are some problems
    >>>in, IIRC, Mac IE and older versions of Opera.
    >>>
    >>>See http://steve.pugh.net/test/test57a.html
    >>>
    >>>It's been a while since I looked at it though and I'm unlikely to be
    >>>able to dig up my notes this side of Christmas so good luck.
    >>>

    >>But the "height:auto" of the navigation panel did
    >>not work as expected. It's not streched to the footer.

    >
    >
    > That is working as expected.
    >


    Do you mean your expectation or mine? :eek:) If you do mean mine, firefox
    on linux does not increase the height of neither content nor navi to the
    footer. If I give al the divs some funny merking colors. The holder div
    shines through at the bottom of the content div, if the short content is
    displayed.

    >
    >>Since the
    >>navigation bar can grow on large content to the right. I don't want to
    >>hack by backgrounding the content or holder div here.

    >
    >
    > What you do between the header and footer is the same as any other web
    > page. To have mulitple columns with backgrounds that stretch to the
    > height of the longest you need to use a trick of some sort and
    > background images are amongst the most reliable.


    It's more shine than anything else and would not fit my needs. You have
    to make sure that the fixed part does not get bigger by bigger/longer
    words or this will break your layout.

    > It's shame that IE doesn't support CSS tables as
    > http://steve.pugh.net/test/test72.html demonstrates.


    Yap, 100% ACK
    This was my attempt for a horizontal menu of <li> elements. But I didn't
    get it done without css-tables and so with table and though without
    GREAT div for table replacements. Shame on you Microsoft, I spit on you!
    *lol*

    Cheers

    Thomas
     
    Thomas Scheffler, Dec 21, 2004
    #12
  13. Thomas Scheffler

    Steve Pugh Guest

    On Tue, 21 Dec 2004 14:51:21 +0100, Thomas Scheffler
    <> wrote:
    >Steve Pugh wrote:
    >> On Tue, 21 Dec 2004 13:43:56 +0100, Thomas Scheffler
    >> <> wrote:
    >>
    >>>>
    >>>But the "height:auto" of the navigation panel did
    >>>not work as expected. It's not streched to the footer.

    >>
    >> That is working as expected.

    >
    >Do you mean your expectation or mine?


    Mine. height: auto almost always means that the height is determined
    by the height of the content.
    http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

    Steve
     
    Steve Pugh, Dec 21, 2004
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VB Programmer

    Tricky Question: Page_Load

    VB Programmer, Jun 30, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    347
    VB Programmer
    Jun 30, 2003
  2. localhost

    Tricky Replace String Question

    localhost, Dec 16, 2003, in forum: ASP .Net
    Replies:
    6
    Views:
    549
  3. Roy
    Replies:
    2
    Views:
    449
  4. Roy
    Replies:
    2
    Views:
    427
    Joe Fallon
    Jun 4, 2005
  5. Replies:
    9
    Views:
    563
    CBFalconer
    Apr 25, 2006
Loading...

Share This Page