CSS Frames not display correctly

**maxlamax** · 03-17-2010, 02:43 PM

Hi All, i have tried to change an example showed in dynamicdrive.com, the example were saying "Left and Top Frames Layout"... I'm needing a "Top and Left Frames Layout", so i have tried to modify the code to get a 100% top row and leftmost column (X - TopRowSize)...
Everytime i get the top row that not fully fit the 100% of the page.

There's the link to the example and the code that i have modified:

http://www.dynamicdrive.com/style/la...-frames-layout

Code:

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontentTop, #framecontentLeft{
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentLeft{
top: 200px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 0;
height: auto;
width: 220px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#maincontent{
position: fixed;
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
top: 200px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 200px 0 0 220px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentLeft{ /*IE6 hack*/
height: 100%;
}

And obviously i have to make it function in IE7, at least...

Any suggestion plz? Thx

**BLiZZaRD** · 03-17-2010, 06:47 PM

Do you have a link to the page, or the HTMl code? It could be inside a container, such as a div, which would explain the reason it doesn't stretch across.

Or other factors. I don't see a blatant problem with your CSS, so my guess is either I missed something, or it's in the HTMl.

**maxlamax** · 03-17-2010, 11:06 PM

As you request... Thx a lot...

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 Right Frames Layout</title>
<link rel="stylesheet" type="text/css" href="stile.css">

<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">

<h1>CSS Left and Right Frames Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="framecontentTop">
<div class="innertube">

<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>

P.S. Feel free to submit another code that can make something like Fig.2...

**BLiZZaRD** · 03-18-2010, 01:13 AM

Found it! Don't ask me why because I do not know the answer...

In your CSS, find this line:

Code:

width: 100%;

for the Top frame declarations....

change it to:

Code:

width: 150%;

Viola! In IE the blue is all the way across the screen... and because content overflow is hidden... no bottom scroll bar! No change in FF, Chrome, Opera... so you should be set.

If you are worried about the 150% I played with it for a bit and anything OVER 130% will work, But the further from 130 you get the better. 140 works okay too, but I haven't tested on a wide screen monitor yet. So I would stick with at least 150%.

Hope it helps!

**maxlamax** · 03-18-2010, 08:55 AM

Originally Posted by BLiZZaRD

Found it! Don't ask me why because I do not know the answer...

In your CSS, find this line:

Code:

width: 100%;

for the Top frame declarations....

change it to:

Code:

width: 150%;

Viola! In IE the blue is all the way across the screen... and because content overflow is hidden... no bottom scroll bar! No change in FF, Chrome, Opera... so you should be set.

If you are worried about the 150% I played with it for a bit and anything OVER 130% will work, But the further from 130 you get the better. 140 works okay too, but I haven't tested on a wide screen monitor yet. So I would stick with at least 150%.

Hope it helps!

OMG!!!!

This is insane... It's against the nature itself...

Thx a lot BLiZZaRD really, but if you have time try to create a CSS template to make a frameset like Fig.2... I can't accept that a stupid template like that is so hard to code, but i'm not enough expert to write it so... If you have time...

Cya

**stringcugu** · 03-18-2010, 09:59 AM

<!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 Right Frames Layout</title>
<link rel="stylesheet" type="text/css" href="stile.css">
<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>
<style>
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentTop0 {
position: absolute;
top: 0;
right: 0;
//left: 770;
height: 200px;
width: 20%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color:red;
color: yellow;
}
#framecontentTop, #framecontentLeft{
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 80%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;}
#framecontentLeft{
top: 200px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 0;
height: auto;
width: 220px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;color: white;}
#maincontent{
position: fixed;
left: 220px; /*Set left value to WidthOfLeftFrameDiv*/
top: 200px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 200px 0 0 220px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;width: 100%;}
* html #framecontentLeft{ /*IE6 hack*/
height: 100%;
}</style>
</head>
<body>
<div id="framecontentLeft">
<div class="innertube">
<h1>CSS Left and Right Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentTop0">
<div class="innertube">
<h3>Sample textnnnnnnnnnnnn 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>

**maxlamax** · 03-18-2010, 10:47 AM

Thx stringcugu

... But i still don't understand why it's not possible to make a CSS frameset like this:

Code:

________________________________
|aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa|
|______________________________|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|______|_______________________|

when it's so simple to make this one:

Code:

________________________________
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|_______________________|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|______|_______________________|

If someone have any ides plz post...

**BLiZZaRD** · 03-18-2010, 06:06 PM

Originally Posted by maxlamax

Thx a lot BLiZZaRD really, but if you have time try to create a CSS template to make a frameset like Fig.2...

I don't follow? The fix I gave you above does make it look like fig. 2.. the top blue is all the way across the screen, the green side is to the left and below the blue, and the white content area is taking up the rest. What's the problem?

**stringcugu** · 03-18-2010, 10:23 PM

not Fig.1 Fig.2
now Fig.3------play with
---top: 0;right: 0;//left: 770;height: 200px;width: 79%;-----

#framecontentTop0 {
position: absolute;
top: 0;
right: 0;
//left: 770;
height: 200px;
width: 79%; hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color:red;
color: yellow;
}
#framecontentTop, #framecontentLeft{
position: absolute;
top: 0;
left: 220;
height: 20px;
width: 20%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentLeft{
top: 0px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 0;
height: auto;
width: 220px; /*Width of left frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

**BLiZZaRD** · 03-18-2010, 11:04 PM

Code:

width: 79%; hidden; /*Disable scrollbars. Set to "scroll" to enable*/

Should be:

Code:

width: 79%; 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/

I see that right off the bat.

What I don't see is a Fig3, or know exactly what it is you want now.

Thread: CSS Frames not display correctly

Thread Tools

Search Thread

CSS Frames not display correctly

The Following User Says Thank You to BLiZZaRD For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions