SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    396
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Theoretical Question -- can this layout be made?

    I've been toying with a design, and as with any layout, anything is possible, but sometimes sacrifices have to be made to force something to be just the way you want it... this design is very demanding, I'm not sure it's possible to create given my limitations.

    The design is actually pretty straight forward: header, footer, left nav, and body. The difference is that the header and footer must remain stationary on the screen, while the content area scrolls inside of it -- in other words, the browser scroll bar is never used because the only thing that's allowed to scroll up and down is the content area (via overflow presumably). The nav should never really have to scroll, but if it needs to, it should scroll just like the content scrolls. Also (this one is a killer), the content section needs to always be exactly the height it has available -- it needs to fit perfectly between the header and footer, even if the actual content inside it isn't long enough to push it down that far.

    Bonus points if the nav and content areas can be resized as if they are frames.

    The goal is to have valid, semantic markup, and to not use frames.

    And, *drumroll* it has to work in IE6 without javascript (ok fine, you can use js to make the nav/content resizing, but nothing else!)

    Can you do it?
    Bring out our hope and reason, before we pine away.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes , easy ? well thank P O'B for it

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Scrollable 100&#37; high element</title>
    <style type="text/css">
    * {margin:0;padding:0}
    
    body{height:100%;font-size:75%;background:#a2a2a2;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    }
    
    html{padding:1em 2em;}
    
    .wra,.he,.fo{overflow:auto;}
    
    .wra{background:#d8d8d8;}
    
    head+body .wra{top:11em;bottom:11em;position:absolute;}
    
    .he,.fo{background:#ff8c00;height:10em;position:absolute;}
    
    .wra,.he,.fo{right:2em;left:2em;}
    
    .he{top:1em;}
    
    .fo{bottom:1em;}
    
    p{margin:.2em .5em .3em .5em;}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    
    html{overflow:hidden;}
    
    * html {padding:11em 2em;} 
    
    * html body{padding:11em 2em;padd\ing:0}
    
    * html .wra{height:100%;}
    
    * html .w{width:100%;}
    
    </style>
    <![endif]-->
    </head>
    <body>
    <!--  -->
    <div class="he w">
    
    <p>start</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    </div>
    
    <div class="wra">
    <p>start</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    
    </div>
    
    <div class="fo w">
    <p>start</p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>end</p>
    </div>
    </body>
    </html>
    full screen
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Scrollable 100% high element</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    
    body{height:100%;font-size:75%;background:#a2a2a2;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    }
    
    html{padding:0 0;}
    
    .wra,.he,.fo{overflow:auto;}
    
    .wra{background:#d8d8d8;}
    
    head+body .wra{top:10em;bottom:10em;position:absolute;}
    
    .he,.fo{background:#ff8c00;height:10em;position:absolute;}
    
    .wra,.he,.fo{right:0;left:0;}
    
    .he{top:0;}
    
    .fo{bottom:0;}
    
    p{margin:.2em .5em .3em .5em;}
    </style>
    <!--[if IE ]>
    <style type="text/css">
    
    html{overflow:hidden;}
    
    * html {padding:10em 0;} 
    
    * html body{padding:10em 0;padd\ing:0}
    
    * html .wra{height:100%;}
    
    * html .w{width:100%;}
    
    </style>
    <![endif]-->
    </head>
    <body>
    <!--  -->
    <div class="he w">
    <h1>header</h1>
    <p>Basic 1 Column with Containers</p>
    </div>
    
    <div class="wra">
    <p>start</p>
    <!--  -->
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    <p>Test Text </p>
    
    <p>end</p>
    
    
    </div>
    
    <div class="fo w">
    <p>footer</p>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Location
    Bel Air, Maryland.
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe like this? Have the nav and content areas set to overflow:auto and give them some percentage-wise dimensions to fill the screen between the header and footer. Use something like MooTools to pull of the "resize" for your content areas even with vertical or horizontal limits.
    ---
    Paul S. Smith
    technetic | design & code


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
  •