Log in

View Full Version : Resolved help with layout problems


procyon
11-03-2008, 02:18 AM
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...



<!--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 :confused:

btw, I'm trying this in IE7

many thanks

procyon
rangana
11-03-2008, 08:24 AM
You might find this ammendment useful:


<!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.
procyon
11-03-2008, 11:27 AM
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.



<!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>
procyon
11-03-2008, 06:38 PM
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



<!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>
Snookerman
11-03-2008, 09:31 PM
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.