Advanced Search

Results 1 to 2 of 2

Thread: Left and Top Frames - swapping them

  1. #1
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Left and Top Frames - swapping them

    Hi,

    I love the Left and Top Frames layout but I'd like the top to stretch across the width and the left to take what remains of the height.

    It seems simple to swap lines in the CSS to make it happen, but can I get it to work, hell no!

    IE always gets it wrong, with the width of the top frame allways being too small.

    Any ideas? Or is it truly impossible?

    Belows follows my code
    Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Left and Top Frames Layout</title>
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #framecontentLeft{                                  /**framecontentLeft and framecontentTop seperated for ease of review**/
    position: absolute; 
    top: 120px; 
    left: 0; 
    width: 200px; /*Width of left frame div*/
    height: 100%;                                       /**a straight swap would be auto but that doesn't work in FireFox**/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #framecontentTop{ 
    position: absolute; 
    top: 0;
    left: 0; /*Set left value to WidthOfLeftFrameDiv*/   /**no longer to width of left frame**/
    width: 100%;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #maincontent{
    position: fixed; 
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
    padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }
    
    * html #framecontentLeft{ /*IE6 hack*/
    height: 100%;
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="framecontentLeft">
    <div class="innertube">
    
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    <div id="framecontentTop">
    <div class="innertube">
    
    <h1>CSS Left and Top Frames Layout</h1>
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Dynamic Drive CSS Library</h1>
    <p><script type="text/javascript">filltext(255)</script></p>
    <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    
    </div>
    </div>
    
    
    </body>
    </html>
    Last edited by djr33; 09-02-2010 at 02:42 PM. Reason: fixed [/code] tag

  2. #2
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well, this seems to work.

    Don't ask me why.
    Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Left and Top Frames Layout</title>
    <style type="text/css">
    
    html, body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #framecontentLeft{
    position: absolute; 
    top: 120px; 
    left: 0; 
    width: 200px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #framecontentTop{ 
    position: absolute;
    top: 0;
    left: 0; /*Set left value to WidthOfLeftFrameDiv*/
    right: 0;
    width: auto;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
    }
    
    #maincontent{
    position: fixed; 
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
    
    * html body{ /*IE6 hack*/
    padding: 120px 0 0 0; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }
    
    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    
    padding: 0 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }
    
    * html #framecontentTop{ /*IE6 hack*/
    width: 100%;
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="framecontentLeft">
    <div class="innertube">
    
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    <div id="framecontentTop">
    <div class="innertube">
    
    <h1>CSS Left and Top Frames Layout</h1>
    <h3>Sample text here</h3>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Dynamic Drive CSS Library</h1>
    <p><script type="text/javascript">filltext(255)</script></p>
    <p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    
    </div>
    </div>
    
    
    </body>
    </html>
    Last edited by djr33; 09-08-2010 at 08:02 PM. Reason: fixed [/code] tag

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
  •