Trouble structuring my site

Discussion in 'HTML' started by zacariaz@gmail.com, Sep 23, 2007.

  1. Guest

    Imagine this:
    The site layout is split in three parts: 'top', 'middle' and 'bottom'.
    all three parts are 100% width, 'top' and 'bottom' are x pixels high
    and middle hight is to fill the rest of the page. Standard scrolling
    is disabled and 'middle' is set to (css) 'overflow:auto'.
    Problems:
    1. i can't get the structure right without using table, but tables are
    not my favorit solution and it seems to me that it should be possible
    doing it just with 'div' tags and css.
    2. I have been unable to specify a doctype which allows (css)
    'overflow', all though it works without a doctype.
    3. (css) 'overflow' doesn't work, with or without doctype, in 'Mozilla
    Firefox'.

    I have tried over nad over again, i've asked at various forums etc.
    but seemingly there is not solution to the problem... I refuse to
    accept that.

    I hope you can help.


    Regards
    , Sep 23, 2007
    #1
    1. Advertising

  2. On 2007-09-23, wrote:
    > Imagine this:
    > The site layout is split in three parts: 'top', 'middle' and 'bottom'.
    > all three parts are 100% width, 'top' and 'bottom' are x pixels high
    > and middle hight is to fill the rest of the page. Standard scrolling
    > is disabled and 'middle' is set to (css) 'overflow:auto'.
    > Problems:


    The problems are stated clearly in your first paragraph.

    You have no idea what anyone's browser window look like. Setting a
    height in pixels (for anything other than a fixed-size object like
    an image) is doomed to failure.

    > 1. i can't get the structure right without using table, but tables are
    > not my favorit solution and it seems to me that it should be possible
    > doing it just with 'div' tags and css.


    It is possible. You are trying to do the wrong thing.

    > 2. I have been unable to specify a doctype which allows (css)
    > 'overflow', all though it works without a doctype.


    It works in HTML 4.01 strict.

    > 3. (css) 'overflow' doesn't work, with or without doctype, in 'Mozilla
    > Firefox'.


    It works in my Firefox browser.

    > I have tried over nad over again, i've asked at various forums etc.
    > but seemingly there is not solution to the problem... I refuse to
    > accept that.


    Post a URL demonstrating the problem.

    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Sep 23, 2007
    #2
    1. Advertising

  3. Guest

    On 23 Sep., 09:47, "Chris F.A. Johnson" <> wrote:
    > On 2007-09-23, wrote:
    > > Imagine this:
    > > The site layout is split in three parts: 'top', 'middle' and 'bottom'.
    > > all three parts are 100% width, 'top' and 'bottom' are x pixels high
    > > and middle hight is to fill the rest of the page. Standard scrolling
    > > is disabled and 'middle' is set to (css) 'overflow:auto'.
    > > Problems:

    >
    > The problems are stated clearly in your first paragraph.
    >
    > You have no idea what anyone's browser window look like. Setting a
    > height in pixels (for anything other than a fixed-size object like
    > an image) is doomed to failure.
    >

    I know for a fact that it is possible with the use of tables, an
    example:
    http://www.zacariazdisciples.net/g33kz-inn/ (doesnt work as i have
    specified doctype, but it should be clear from the code)

    > > 1. i can't get the structure right without using table, but tables are
    > > not my favorit solution and it seems to me that it should be possible
    > > doing it just with 'div' tags and css.

    >
    > It is possible. You are trying to do the wrong thing.
    >

    Yes, but it seems to me that if it is possible in tables it should
    allso be possible by the use of divs, but maybe im mistaken.

    > > 2. I have been unable to specify a doctype which allows (css)
    > > 'overflow', all though it works without a doctype.

    >
    > It works in HTML 4.01 strict.
    >

    this is the doctype i am currently using:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    If this is correct, im really confused, assuming you are correct of
    course.

    > > 3. (css) 'overflow' doesn't work, with or without doctype, in 'Mozilla
    > > Firefox'.

    >
    > It works in my Firefox browser.
    >

    well it doesnt in mine, but it may allso have to do with the fact that
    i this havent solved the doctype problem.

    > > I have tried over nad over again, i've asked at various forums etc.
    > > but seemingly there is not solution to the problem... I refuse to
    > > accept that.

    >
    > Post a URL demonstrating the problem.
    >

    http://www.zacariazdisciples.net/g33kz-inn/index.htm
    http://www.zacariazdisciples.net/g33kz-inn/layout.jpg (what it is
    suposed to look like and does in IE without specityed doctype)
    > --
    > Chris F.A. Johnson <http://cfaj.freeshell.org>
    > ===================================================================
    > Author:
    > Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    , Sep 23, 2007
    #3
  4. Guest

    edit:
    >>> It is possible. You are trying to do the wrong thing.

    >>
    >>Yes, but it seems to me that if it is possible in tables it should
    >>allso be possible by the use of divs, but maybe im mistaken.


    I read that wrong.
    What you are saying here is contradiction it self.
    1. you say it is possible.
    2. you say im trying to do the wrong thing, e.g. its not possible? or
    do you mean that i am using the wrong methode? In than case i would
    like to know how.
    , Sep 23, 2007
    #4
  5. J.O. Aho Guest

    wrote:
    > On 23 Sep., 09:47, "Chris F.A. Johnson" <> wrote:
    >> On 2007-09-23, wrote:
    >>> Imagine this:
    >>> The site layout is split in three parts: 'top', 'middle' and 'bottom'.
    >>> all three parts are 100% width, 'top' and 'bottom' are x pixels high
    >>> and middle hight is to fill the rest of the page. Standard scrolling
    >>> is disabled and 'middle' is set to (css) 'overflow:auto'.
    >>> Problems:

    >
    > I know for a fact that it is possible with the use of tables, an
    > example:
    > http://www.zacariazdisciples.net/g33kz-inn/ (doesnt work as i have
    > specified doctype, but it should be clear from the code)


    The bottom seems to be completely outside the window, the left is continuing
    out from window... Maybe you get some help of this article
    http://www.themaninblue.com/writing/perspective/2005/08/29/#content



    --

    //Aho
    J.O. Aho, Sep 23, 2007
    #5
  6. schreef:
    > edit:
    >>>> It is possible. You are trying to do the wrong thing.
    >>> Yes, but it seems to me that if it is possible in tables it should
    >>> allso be possible by the use of divs, but maybe im mistaken.

    >
    > I read that wrong.
    > What you are saying here is contradiction it self.
    > 1. you say it is possible.
    > 2. you say im trying to do the wrong thing, e.g. its not possible? or
    > do you mean that i am using the wrong methode? In than case i would
    > like to know how.
    >


    Other possibily: you are trying to achieve the wrong effect.
    (that would not contradite it being possible)

    --
    Rob
    Rob Waaijenberg, Sep 23, 2007
    #6
  7. Guest

    ok, so youre saying that:

    <body style="height:100%">
    <div style="height:xpx">top</div>
    <div style="height:100%">middle</div>
    <div style="height:xpx">bottom</div>
    </body>

    is just not possible?
    , Sep 23, 2007
    #7
  8. julian.bash Guest

    On Sep 23, 10:13 pm, wrote:
    > ok, so youre saying that:
    >
    > <body style="height:100%">
    > <div style="height:xpx">top</div>
    > <div style="height:100%">middle</div>
    > <div style="height:xpx">bottom</div>
    > </body>
    >
    > is just not possible?


    You should use absolute positioning, like this:

    div { position:absolute; width:100%; }
    #top { height:100px; }
    #middle { height:100%; margin-top:100px; margin-bottom:100px; }
    #bottom { height:100px; bottom:0; }
    // Make it work in ie (bottom:0 doesn't work, javascript needed)
    #bottom { margin-top: expression(document.body.clientHeight-100); }

    Read more about absolute positioning here: <http://www.alistapart.com/
    articles/conflictingabsolutepositions>

    --Julian
    julian.bash, Sep 23, 2007
    #8
  9. dorayme Guest

    In article
    <>,
    wrote:

    > ok, so youre saying that:
    >
    > <body style="height:100%">
    > <div style="height:xpx">top</div>
    > <div style="height:100%">middle</div>
    > <div style="height:xpx">bottom</div>
    > </body>
    >
    > is just not possible?


    if x>0, how can this be possible? Forget about anything else,
    just look at your code here.

    --
    dorayme
    dorayme, Sep 23, 2007
    #9
  10. Bergamot Guest

    julian.bash wrote:
    >
    > #middle { height:100%; margin-top:100px; margin-bottom:100px; }


    Wouldn't that would make the total height 100% plus 200px?

    --
    Berg
    Bergamot, Sep 23, 2007
    #10
  11. Guest

    On 23 Sep., 22:39, "julian.bash" <> wrote:
    > On Sep 23, 10:13 pm, wrote:
    >
    > > ok, so youre saying that:

    >
    > > <body style="height:100%">
    > > <div style="height:xpx">top</div>
    > > <div style="height:100%">middle</div>
    > > <div style="height:xpx">bottom</div>
    > > </body>

    >
    > > is just not possible?

    >
    > You should use absolute positioning, like this:
    >
    > div { position:absolute; width:100%; }
    > #top { height:100px; }
    > #middle { height:100%; margin-top:100px; margin-bottom:100px; }
    > #bottom { height:100px; bottom:0; }
    > // Make it work in ie (bottom:0 doesn't work, javascript needed)
    > #bottom { margin-top: expression(document.body.clientHeight-100); }
    >
    > Read more about absolute positioning here: <http://www.alistapart.com/
    > articles/conflictingabsolutepositions>
    >
    > --Julian


    This approach doesnt seem to work neither in IE or MZ with or without
    doctype.
    , Sep 23, 2007
    #11
  12. julian.bash Guest

    On Sep 23, 11:38 pm, Bergamot <> wrote:
    > julian.bash wrote:
    >
    > > #middle { height:100%; margin-top:100px; margin-bottom:100px; }

    >
    > Wouldn't that would make the total height 100% plus 200px?
    >
    > --
    > Berg


    You're right, this works for me:

    body { margin:0; }
    div { position:absolute; width:100%; }
    #top { height:100px; }
    #middle { top:100px; bottom:100px; }
    #middle { height:expression(document.body.clientHeight-100); }
    #bottom { height:100px; bottom:0; }
    #bottom { margin-top:expression(document.body.clientHeight-100); }

    --Julian
    julian.bash, Sep 23, 2007
    #12
  13. Guest

    Ok, it is pretty clear by now that it is a problem without a perfect
    solution, however there are ways, so i wont bother with that anymore.
    Still thee is the overflow problem, no matter which doctype i specity,
    it just wont support overflow.
    current doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    , Sep 24, 2007
    #13
  14. Kevin Scholl Guest

    wrote:
    > Ok, it is pretty clear by now that it is a problem without a perfect
    > solution, however there are ways, so i wont bother with that anymore.
    > Still thee is the overflow problem, no matter which doctype i specity,
    > it just wont support overflow.
    > current doctype:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd">


    There is rarely a "perfect" solution. However, what you are trying to
    achieve is quite possible. Do a Google search for "sticky footer". Here
    is one tutorial:

    http://www.themaninblue.com/experiment/footerStickAlt/

    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Sep 24, 2007
    #14
  15. schreef:
    > Ok, it is pretty clear by now that it is a problem without a perfect
    > solution, however there are ways, so i wont bother with that anymore.
    > Still thee is the overflow problem, no matter which doctype i specity,
    > it just wont support overflow.
    > current doctype:
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    > TR/html4/strict.dtd">
    >


    Would you please quote the texts that you are replying to.

    --
    Rob
    Rob Waaijenberg, Sep 24, 2007
    #15
  16. Andy Dingley Guest

    On 23 Sep, 08:23, wrote:
    > The site layout is split in three parts: 'top', 'middle' and 'bottom'.
    > all three parts are 100% width, 'top' and 'bottom' are x pixels high
    > and middle hight is to fill the rest of the page. Standard scrolling
    > is disabled and 'middle' is set to (css) 'overflow:auto'.


    "Letterbox" scrolling usually looks ugly. You've limited the effective
    window height for reading in and you've swapped the scrolling control
    from the window's frame to some embedded frame. Both of these are a
    bad idea usability-wise.

    If you want "persistent branding", then I'd set the footer to
    position:fixed down at the bottom, make it a bit transparent, and then
    leave the scrolling of the header and main content to the window frame
    itself.

    I don't believe you need to have the navigation bar permanently
    available like this. Users know where to find it and how to get there
    by scrolling upwards. Is your content really so bad that you need to
    provide an easy escape route from it? :cool: If it's a bloggish site
    then you might well want a floating fixed toolbar for "task" buttons,
    but that's not the same as a hefty great 100% width header.
    Andy Dingley, Sep 24, 2007
    #16
  17. Guest

    I have accepted the fact that it will simply be to much work and if i
    ever get it to work, it will probably be so mezzy that it wont
    validate and will probably allso be browser specific.

    Therefor i have switched to xhtml 1.0 strict, and it works quite
    nicely.
    http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
    I have two small problem as it is.
    1. In IE i cant make the scrollbar disapear when not needed.
    (overflow:auto doesnt work on body)
    2. In MZ have a minor problem with a line thats is... well, out of
    line.

    Other that that it works fine and validates, so thank you for your
    help.
    , Sep 24, 2007
    #17
  18. julian.bash Guest

    On Sep 24, 3:00 pm, wrote:
    > I have accepted the fact that it will simply be to much work and if i
    > ever get it to work, it will probably be so mezzy that it wont
    > validate and will probably allso be browser specific.
    >
    > Therefor i have switched to xhtml 1.0 strict, and it works quite
    > nicely.http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
    > I have two small problem as it is.
    > 1. In IE i cant make the scrollbar disapear when not needed.
    > (overflow:auto doesnt work on body)
    > 2. In MZ have a minor problem with a line thats is... well, out of
    > line.
    >
    > Other that that it works fine and validates, so thank you for your
    > help.


    1) Setting html { overflow:auto } shoud work
    2) Which line is out of line?
    julian.bash, Sep 24, 2007
    #18
  19. Guest

    On 24 Sep., 16:27, "julian.bash" <> wrote:
    > On Sep 24, 3:00 pm, wrote:
    >
    > > I have accepted the fact that it will simply be to much work and if i
    > > ever get it to work, it will probably be so mezzy that it wont
    > > validate and will probably allso be browser specific.

    >
    > > Therefor i have switched to xhtml 1.0 strict, and it works quite
    > > nicely.http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
    > > I have two small problem as it is.
    > > 1. In IE i cant make the scrollbar disapear when not needed.
    > > (overflow:auto doesnt work on body)
    > > 2. In MZ have a minor problem with a line thats is... well, out of
    > > line.

    >
    > > Other that that it works fine and validates, so thank you for your
    > > help.

    >
    > 1) Setting html { overflow:auto } shoud work
    > 2) Which line is out of line?


    do you mean html {overflow:auto} instead of body {overflow:auto} ?
    ill try it at once.

    in my mozilla browser the line over the menu is too width.
    , Sep 24, 2007
    #19
  20. Guest

    On 24 Sep., 19:11, wrote:
    > On 24 Sep., 16:27, "julian.bash" <> wrote:
    >
    >
    >
    >
    >
    > > On Sep 24, 3:00 pm, wrote:

    >
    > > > I have accepted the fact that it will simply be to much work and if i
    > > > ever get it to work, it will probably be so mezzy that it wont
    > > > validate and will probably allso be browser specific.

    >
    > > > Therefor i have switched to xhtml 1.0 strict, and it works quite
    > > > nicely.http://www.zacariazdisciples.net/G33kz-Inn/xhtml.htm
    > > > I have two small problem as it is.
    > > > 1. In IE i cant make the scrollbar disapear when not needed.
    > > > (overflow:auto doesnt work on body)
    > > > 2. In MZ have a minor problem with a line thats is... well, out of
    > > > line.

    >
    > > > Other that that it works fine and validates, so thank you for your
    > > > help.

    >
    > > 1) Setting html { overflow:auto } shoud work
    > > 2) Which line is out of line?

    >
    > do you mean html {overflow:auto} instead of body {overflow:auto} ?
    > ill try it at once.
    >
    > in my mozilla browser the line over the menu is too width.- Skjul tekst i anførselstegn -
    >
    > - Vis tekst i anførselstegn -


    Ok, problem one solved (more or less), it is a bit messy af IE and MZ
    treath the width of the site different when overflow is activates. But
    it works, and it look allright. You can hardly see theres something
    wrong.
    , Sep 24, 2007
    #20
    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. Simon Harris

    Structuring Site/Solution

    Simon Harris, Oct 5, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    354
    Patrice
    Oct 5, 2004
  2. Damien

    Structuring of large application

    Damien, Jan 5, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    307
    Brandon Potter
    Jan 5, 2005
  3. Replies:
    3
    Views:
    336
  4. Stephen Riehm
    Replies:
    2
    Views:
    701
    Stephen Riehm
    Nov 3, 2004
  5. Blue
    Replies:
    26
    Views:
    722
    Jukka K. Korpela
    Jan 3, 2004
Loading...

Share This Page