Results 1 to 5 of 5

Thread: help with layout problems

  1. #1
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default help with layout problems

    Hi,

    I've been trying to use the frames examples to get the layout I want but can't get it to workż

    Here's my page...

    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></title>
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #frameTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 140px;
    overflow: hidden;
    background-color: red;
    color: white;
    text-align:center;
    }
    
    #frameBottom{
    position: absolute; 
    top: auto; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 70px;
    overflow: hidden;
    background-color: yellow;
    color: black;
    text-align:center;
    }
    
    #frameLeft{
    position: absolute;
    left: 0; 
    top: 140px;
    bottom: 70px;
    height: auto;
    width: 150px;
    overflow: hidden;
    background-color: green;
    color: white;
    text-align:center;
    }
    
    #frameRight{
    position: absolute; 
    left: auto; 
    right: 0; 
    height: 100%; 
    width: 150px;
    overflow: hidden;
    background-color: blue;
    color: black;
    text-align:center;
    }
    
    #frameMiddle{
    position: fixed; 
    top: 140px;
    left: 70px;
    right: 150px;
    bottom: 150px;
    overflow: auto; 
    background-color: Gray;
    text-align:center;
    }
    
    * html body{
    padding: 140px 150px 70px 150px;
    }
    * html #frameMiddle{
    height: 100%; 
    width: 100%; 
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="frameTop">
    top frame
    </div>
    
    <div id="frameLeft">
    left frame
    </div>
    
    <div id="frameBottom">
    bottom frame
    </div>
    
    <div id="frameRight">
    right frame
    </div>
    
    <div id="frameMiddle">
    middle frame
    </div>
    
    </body>
    </html>
    The horrible colours are just to help me see where things are going.
    Anyway, what I actually want is:
    a top frame 140px high and 100% window width.
    a bottom frame 70px high and 100% window width.
    a left frame 150px wide from bottom of topFrame to top of bottomFrame
    and
    a right frame 150px wide from bottom of topFrame to top of bottomFrame

    any help would be greatly appreciated as I have no hair left to pull out

    btw, I'm trying this in IE7

    many thanks

    procyon
    Last edited by procyon; 11-04-2008 at 08:22 AM. Reason: resolved

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    You might find this ammendment useful:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    *{margin:0px;padding:0px;}
    body
    {
    padding:0;
    margin:1px auto;
    text-align:center;
    font-family:Tahoma;
    font-size:10pt;
    }
    #header{
    height:140px;
    background:#f00;
    }
    #right{
    float:right;
    background:#00f;
    width:150px;
    height:100%;
    }
    #left{
    float:left;
    background:#0f0;
    width:150px;
    height:100%;
    }
    #content{
    height:390px;
    background:#ccc;
    position:relative;
    margin:auto;
    }
    #footer{
    height:70px;
    background:yellow;
    clear:both;
    }
    </style>
    
    </head>
    <body>
    
    <div id="wrap">
    	<div id="header">
    		Top
    	</div>
    	
    	<div id="content">
    		<div id="right">
    			Right
    		</div>
    		
    		<div id="left">
    			Left
    		</div>
    		
    		<div id="middle">
    			Middle
    		</div>
    	</div>
    
    	<div id="footer">
    		Bottom
    	</div>
    
    </div>
    
    </body>
    </html>
    P.S. Avoid pushing IE into quirksmode, and don't use absolute positioning on elements as it makes your page brittle.

    Hope that makes sense.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi rangana,

    Thanks for your input ;-)
    I removed the quirksmode and this helped.
    I also checked my sizes as they had become incorrect with constant editing and lack of coffee, lol. This also helped.
    The reason for using absolute positioning is that I want the
    top and bottom frames always visible at the top and bottom of the browser window and the
    bottom of the left\right frames to reach the top of the bottom frame.

    With the way method you use, if the viewer goes to fullscreen (F11) then the bottom frame is no longer at the bottom.

    I've included my amended code below which works the way I want apart from one thing..

    I can't get the bottom of the left\right frames to exactly meet the top of the bottom frame dynamically.

    I suppose I should be able to do this dynamically with javascript, using the document.documentElement.clientHeight or document.body.clientHeight values.

    In the code I have deliberately made the top and bottom frames too short so you can see what I mean.

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Dynamic Drive: CSS Left, Top, Bottom and Right Frames Layout</title>
    
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #frameLeft{
    position: absolute; 
    top: 140px; 
    left: 0; 
    width: 150px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: blue;
    color: white;
    }
    
    #frameRight{
    position: absolute; 
    top: 140px; 
    left: auto; 
    right: 0;
    width: 150px; /*Width of right frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: yellow;
    color: white;
    }
    
    #frameTop{
    position: absolute; 
    top: 0; 
    left: 10px; 
    width: 98%; 
    height: 140px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: red;
    color: white;
    }
    
    #frameBottom{
    position:absolute;
    top: auto;
    left:10px;
    bottom: 0; 
    width:98%;
    height: 70px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: green;
    color: white;
    }
    
    #frameMiddle{
    position: fixed; 
    top: 140px; /*Set top value to HeightOfTopFrameDiv*/
    bottom: 70px; /*Set bottom value to HeightOfBottomFrameDiv*/
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 150px; /*Set right value to WidthOfRightFrameDiv*/
    overflow: auto; 
    background-color: gray;
    }
    
    * html body{ /*IE6 hack*/
    padding: 140px 150px 70px 150px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
    }
    
    * html #frameMiddle{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }
    
    * html #frameTop, * html #frameBottom{ /*IE6 hack*/
    width: 100%;
    }
    </style>
    </head>
    
    <body>
    
    <div id="frameLeft">
    left frame
    </div>
    
    <div id="frameRight">
    <h3>Sample text here</h3>
    </div>
    
    <div id="frameTop">
    Sample
    </div>
    
    <div id="frameBottom">
    <h3>Sample text here</h3>
    </div>
    
    <div id="frameMiddle">
    <h1>Dynamic Drive CSS Library</h1>
    middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />middle<br />
    </div>
    
    </body>
    </html>

  4. #4
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default SOLVED - help with layout problems

    Hi,

    Just in case it's any use to anyone else, here's my solution. Simple really.
    3 divs top, middle and bottom all 100% width.
    The left, center and right divs are then placed within the middle div. Everything is now exactly as I wanted

    procyon

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #frameLeft{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px;
    height: 100%;
    overflow: hidden;
    background-color: blue;
    color: white;
    }
    
    #frameRight{
    position: absolute; 
    top: 0; 
    right: 0;
    width: 150px;
    height: 100%;
    overflow: hidden;
    background-color: yellow;
    color: black;
    }
    
    #frameTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 140px;
    overflow: hidden;
    background-color: red;
    color: white;
    }
    
    #frameBottom{
    position:absolute;
    top: auto;
    left: 0;
    bottom: 0; 
    width: 100%;
    height: 70px;
    overflow: hidden;
    background-color: green;
    color: white;
    }
    
    #frameMiddle{
    position: absolute; 
    top: 140px;
    bottom: 70px;
    left: 0;
    width:100%;
    overflow: hidden; 
    }
    
    #frameMain{
    position: fixed; 
    top: 140px;
    bottom: 70px;
    left: 150px;
    right: 150px;
    overflow: auto; 
    background-color: gray;
    }
    
    * html body{ /*IE6 hack*/
    padding: 140px 150px 70px 150px;
    }
    
    * html #frameTop, * html #frameBottom, * html #frameMiddle{ /*IE6 hack*/
    width: 100%;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="frameTop">
    top
    </div>
    
    <div id="frameBottom">
    bottom
    </div>
    
    <div id="frameMiddle">
    <div id="frameLeft">
    left
    </div>
    <div id="frameRight">
    right
    </div>
    <div id="frameMain">
    main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />
    main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />main<br />
    </div>
    </div>
    
    </body>
    </html>

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Go to your first post, edit and chose Resolved as a prefix, then it will be easier for others to see that a solution has been found.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. The Following User Says Thank You to Snookerman For This Useful Post:

    procyon (11-04-2008)

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
  •