SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tableless layout similar to MSDN Library?

    http://msdn.microsoft.com/library/

    I was wondering if anyone knows how I can achieve a similar layout. I need to have 2 columns expand to the bottom of the viewport and use scrollbars to scroll content. I do not want to use tables or frames, it needs to be an accessible layout. Could someone point me to an example somewhere, or create a layout for me? I cannot figure this out...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure if you mean something like this as its quite simple and I'm sure you could have done this yourself
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;overflow:hidden;} 
    /* end hack */ 
    body {
    padding:0;
    margin:0;
    color: #000;
    overflow:hidden;
    }
    #outer{
    height:100%;
    background:#F8E7EC;
    border-left:1px solid #000;
    color: #000000;
    margin-left:200px;
    overflow:auto;
    }
    #left {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:200px;
    overflow:auto;
    background:#ffffcc;
    }
     
    </style>
    </head>
    <body>
    <div id="left"> 
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
    <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
    </p>
     
    </div>
    <div id="outer"> 
    <p>This is the centre content : This is the centre content : This is the centre 
    	content : This is the centre content : This is the centre content : This is 
    	the centre content : This is the centre content : This is the centre content 
    	: This is the centre content : </p>
    </div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it's not quite that simple. I need to have a header bar too, which is 71px tall, and that is the part that's giving me problems with this layout. If it were just two simple columns and scrollable area then I wouldn't have any trouble at all. I'll give you a brief summary of what the overall layout will be like...

    There is the top header bar which is 71px tall. Underneath the header bar there is 2 columns and both are scrollable areas. The left bar will contain a folding tree menu script which will have the latest messages from team members, latests tasks, reminders for today's date, etc. All of that will be synchronized every 5 minutes by using JavaScript to download an XML file to the page to avoid unnecessary refreshing. On the right side there will be the content for the current page that you're looking at, like the administrator's control panel pages, team members task editor, whatever.

    I hope that gives you a clear idea on what I'm wanting to accomplish in the end. I can figure out how to stream data to the page and all that, I just cannot figure out how to get the 2-column layout with the header on it, it's giving me headaches.

    *Wishes XHTML2 and CSS3 were available for use*

    Edit: Also, if you can avoid using hacks then please do.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Hmmm I can do this in ie without hacks and I can do it in moz/opera7 without hacks but they both need different code.

    I don't know if this will be any good to you but it does what you've asked for however moz and ie need separate code to do it.

    IE also needs quirks mode which is no problem using the xml prologue.

    Anyway here it is - maybe you can refine it

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- force quirks mode in ie with xml prologue -->
    <style type="text/css">
    body {height:100%}
    body {
     padding:0;
     margin:70px 0 0 0;
     color: #000000;
     overflow:hidden;
    }
    #outer{
     height:100%;
     background:#F8E7EC;
     color: #000000;
     margin-left:200px;
     overflow:auto;
    }
    html>body #outer {
     position:absolute;
     top:72px;left:200px;
     bottom:0px;right:0px;
     margin-left:0;
     height:auto;
    }
    * html #left  {
     position:absolute;
     left:0px;
     top:72px;
     height:100%;
     width:200px;
     overflow:hidden;
     background:#ffffcc;
     padding-bottom:72px;
    }
    * html #leftinner {
     position:relative;
     height:100%;
     overflow:auto;
    }
    html>body #left { 
     left:0px;
     top:72px;
     width:200px;
     overflow:auto;
     background:#ffffcc;
     position:absolute;
     bottom:0;right:200px;
     height:auto;
    }
    #header{
     height:71px;
     overflow:auto;
     position:absolute;
     left:0;
     top:0;
     background:red;
     border-bottom:1px solid #000;
     width:100%;
    }
    </style>
    </head>
    <body>
    <div id="header">Header</div>
    <div id="left"> 
      <div id="leftinner">
      <p>This is the left content : This is the left content: This is the left content 
    	: This is the left content:This is the left content : This is the left content: 
      </p>
    </div></div>
    <div id="outer"> 
      <p>This is the centre content : This is the centre content : This is the centre 
    	content : This is the centre content : This is the centre content : This is 
    	the centre content : This is the centre content : This is the centre content 
    	: This is the centre content : </p>
    </div>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I was referring to hacks, I wasn't necessarily referring to the browser-selectors (using w>w to avoid IE), but rather the cryptic things like the "commented backslash hack". As long as it makes sense (doesn't use cryptic ways of tripping up rendering engines) and validates, then it'll work

    Thanks for the help Paul, I really appreciate it, that will work great.


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
  •