CSS Frames not display correctly [Archive]

View Full Version : 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/layouts/item/css-left-and-top-frames-layout

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


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

Do you seen anything wrong?

I see in the browser something like this:
_______________________________
|aaaaaaaaaaaaaaaaaaaaaaaaa|__?_|
|_________________________|__?_|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa| Fig.1
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|______|_______________________|

Instead of:

_______________________________
|aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa|
|______________________________|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa| Fig.2
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|aaaaaa|aaaaaaaaaaaaaaaaaaaaaaa|
|______|_______________________|

Why???? :confused:

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

BLiZZaRD

03-18-2010, 01:13 AM

maxlamax

03-18-2010, 08:55 AM

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

In your CSS, find this line:

width: 100%;

for the Top frame declarations....

change it to:

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

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

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

BLiZZaRD

03-18-2010, 06:06 PM

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

maxlamax

03-19-2010, 12:01 AM

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

Should be:

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. :)

Blizzard... the problem is that if i enlarge the left frame automatically the top frame shrink from right to left... don't ask me why.. i don't know...
And in top of it if you reduce the window and try to resize it the top frame gradually shrink more and more when you reduce the window...

I still don't understand the rules that decide on this thing...

BLiZZaRD

03-19-2010, 02:15 AM

okay.. got it. Sorry I didn't understand.

Here is the fix:

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: 3000%;
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: 280px; /*Width of left frame div*/
overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#maincontent{
position: absolute;
left: 280px; /*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%;
}

You can set the width of the left frame to what ever you want. Just remember to also change the #maincontent "left" attribute to the same value.

What I changed:

Top frame width from 150% to 3000%. The window cannot go small enough to cause the shrink from 3000%.

Changed maincontent position:fixed to position:absolute. "Fixed" makes it stay right where it is, no matter what, which is why it was being overlaid when you changed the size of the left frame. Absolute moves the div where it should be, not where it is told to be.

Should fix you right up :)

maxlamax

03-19-2010, 09:10 AM

Ok i got it...
I'm trying right now... :D

P.S. Sorry to make such a ruckus about this, but really i don't understand why the top-left solution have to be so tricky than the original left-top...
I fear that your solution (thx a lot for it) have some limits if i try to put some graphics in it, what if i try to fill the top frame with a pattern of images repeated to fill the frame? (i guess that them will cover from 0 to 3000%).

Sincerely i'm about to think that is more reliable to make a 2 frame top-bottom css with a iframe in the right corner of the bottom frame.

If you have to make a layout like my Fig.2, which way you will take? I'm not very stubborn about my ideas, my mind is open about others solutions... :D

BLiZZaRD

03-19-2010, 06:19 PM

Just add a second div inside the top one. set the width of that div to what ever you need it to be. That way the blue will still cover the top of the screen and the images won't go off of it.

make sense?

maxlamax

03-23-2010, 10:35 AM

Thx all of you... I have solved (i hope) with the use of a simple top and bottom frame with an iframe floated to the right with fixed position in the bottom frame.

With this i haven't to mind the buggy graphic occurrence for the top frame...

I have to use this graphic layout in a LAMP server whereabouts, the fixed position of the iframe is the destination of AJAX scripts, so i surely know where my sql queries will be put..

If everything will go right i'll post the css layout and a jpeg with a snapshot of the finished work...

Cross the fingers guys! :D