...

View Full Version : Help replicating frames in CSS



doozer
07-08-2005, 12:39 AM
Hi guys after perusing the forums I have decided to give a frameless page a go but I am having a bit of trouble.

What I want to do is replicate the functionality of the frames version of my site.
go here to see it:- http://doozer.tifozi.net/warcry.html

I have made a start and I have figured out how to make each separate html page a division which is selected from a javascript driven menu BUT...

I cannot get the divs to scroll or automatically resize themselves in the same way as the HTML frames do. I have tried loads of combinations of setting the overflow and position property on various divs, but a solution that will keep the image and banner frames fixed at the top of the screen while the menu and main container divs scroll below them eludes me.

I have knocked up this short HTML page and I would be very appreciative if one of you helpful guys show me how "???.css" should look to position the divs and make them work like I need them too.

<HTML>

<HEAD>
<LINK HREF="???.css" REL="stylesheet" TYPE="text/css">
</HEAD>

<BODY>

<DIV CLASS="image">
This division will contain and display images.
It must be 209 pixels wide and 300 pixels deep.
It should be in the top left of the screen at position 0,0.
It must not scroll off the screen when the divisions below it scroll.
</DIV>

<DIV CLASS="banner">
This division will contain the page banner.
It must be 100 pixels deep and automatically scale itself to fit the visible width of the screen less the 209 pixels for the image div.
It should be on the top of the screen at position 209,0.
It must not scroll off the screen when the divisions below it scroll.
</DIV>

<DIV CLASS="menu">
This division will contain the page menu.
It must be 209 pixels wide and automatically scale itself to fit the visible height of the screen less the 300 pixels for the image div.
It should be below the image div at position 300,0.
It must allow itself to scroll but preferable in the 'y' direction only.
</DIV>

<DIV CLASS="main">
This division will contain the main page material.
It must automatically scale itself to fit the remaining visible portion of the screen left by the other divs.
It's top left corner should be at position 209,100.
It must allow itself to scroll but preferable in the 'y' direction only.
</DIV>

</BODY>

Thanks in advance
Paul :confused:

doozer
07-12-2005, 09:15 PM
In case anyone else was interested I am now fairly sure this problem cannot be solved with CSS and DIV's alone.

The closest workaround for a single page solution is to use a single table, the height and width of the browser window, and place divs within the cells of that table.

Anyone who knows different please feel free to post.

:(

Paul

mrruben5
07-13-2005, 12:07 AM
It canbe accomplised with css.

For the banner and POTD ( I guess that's what you want ) you should use fixed positioning.

The main content area should have a 100% height and width, and the min-width you describe, and the margin-top as you describe.

Do you have the images for the banner?

doozer
07-13-2005, 09:30 PM
All the images and content should be the same as the link I quoted at the top

http://doozer.tifozi.net/warcry.html

I tried out some of what you suggested but it displays all wrong in IE (fixed doesn't work, positions wrong) and completely differently in FireFox and Opera (closer but still not right).

I'm guessing there is a lot more CSS needs to go in, right?

<HTML>

<HEAD>

<STYLE>

div.image {
position:fixed;
top:0px;
left:0px;
height:300px;
width:209px;
background-color:red;
color:black;
overflow:hidden;
}

div.banner {
position:fixed;
top:0px;
left:209px;
height:100px;
background-color:green;
color:white;
overflow:hidden;
}

div.menu {
top:300px;
left:0px;
width:209px;
background-color:blue;
color:white;
overflow:auto;
}

div.main {
top:0px;
left:0px;
height:100%;
width:100%;
margin-top:100px;
margin-left:209px;
background-color:black;
color:white;
overflow:auto;
}

</STYLE>

</HEAD>

<BODY>

<DIV CLASS="image">
This division will contain and display images.
It must be 209 pixels wide and 300 pixels deep.
It should be in the top left of the screen at position 0,0.
It must not scroll off the screen when the divisions below it scroll.
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
</DIV>

<DIV CLASS="banner">
This division will contain the page banner.
It must be 100 pixels deep and automatically scale itself to fit the visible width of the screen less the 209 pixels for the image div.
It should be on the top of the screen at position 209,0.
It must not scroll off the screen when the divisions below it scroll.
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
</DIV>

<DIV CLASS="menu">
This division will contain the page menu.
It must be 209 pixels wide and automatically scale itself to fit the visible height of the screen less the 300 pixels for the image div.
It should be below the image div at position 300,0.
It must allow itself to scroll but preferable in the 'y' direction only.
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
</DIV>

<DIV CLASS="main">
This division will contain the main page material.
It must automatically scale itself to fit the remaining visible portion of the screen left by the other divs.
It's top left corner should be at position 209,100.
It must allow itself to scroll but preferable in the 'y' direction only.
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
<BR>
<BR>
<BR>
Test for scrollng
</DIV>

</BODY>

</HTML>

harbingerOTV
07-14-2005, 01:14 AM
http://home.earthlink.net/~harbingerofthevoid/testing/fixedtest.html

simple example of fixed positioning for IE6 (this does not work in IE/Mac and IDK about IE 5.x/PC)

IE doesn't understand position:fixed. You have to "trick" it into playing along. It gets tricky later on trying to get things where you want them. I'll try to explain a little using that link as an example.



html {
overflow: hidden;
/* Hide from IE \*/
overflow: visible;
/* End Hide */
}
body {
height: 100%;
overflow: auto;

}


That makes the basics of fixed positioning work for IE. IE/mac will hide everything but the background of the BODY.

Now all the tricky stuff.

ANYTHING that you give positioning to, IE will FIX. eg:



#thing {
width: 200px;
height: 200px;
background: #00f;
position: absolute;
left: 30px;
top: 30px;
}
#thing[id] {
position: fixed;
}


All browsers see the position:absolute and place the object accordingly. IE then ALSO sees the position:absolute as position:fixed. Everything else does not. So the [id] (or [class] if applicable) line tells everything else to FIX the object.

The fancier the layout gets the trickier it gets. Using floats & margins to move objects around.

If you care about IE5.x viewing your site you can write the same CSS without the first piece of code I wrote but still using the [id] or [class] to FIX things. They will not be fixed in IE/Mac. Then AFTER the css but still in the head add a conditional statement:



<!--[if IE]>
<style type="text/css" media="all">
@import "css/ie.css";
</style>
<![endif]-->


and in this new file write all the code I first posted. Ie/mac and <5.5pc will ignore the conditional comment. Ie pc 5.5+ will read it and FIX everything.

I'm not 100% on the conditional comment part as for what PC versions of IE will load it but I know 6 does.

doozer
07-14-2005, 11:50 PM
Thanks for the info harbinger, I'll have a play around with these bits.

1 question in Opera your page renders as a blank black screen.

Is that the same as the Mac/IE problem you mentioned where it only displays the frame background?

harbingerOTV
07-15-2005, 03:15 AM
hmmm...I guess your the first person to actually view it in Opera (or at least tell me of the problem). Thanks.

What you see in Opera is what IE/mac does as well.

I would go this route then:



<link rel="stylesheet" type="text/css" href="css/normal.css">
<!--[if IE]>
<style type="text/css" media="all">
@import "css/ie.css";
</style>
<![endif]-->


code for the IE css


html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}


If you look here:

http://home.earthlink.net/~harbingerofthevoid/

you can see I did this. If you would, could you look at it on Opera and see if the fixed method is working?

I know IEmac will scroll everything as it will not load the CSS through the conditional comment and it won't understand the fixed property.

One thing you might encounter is an IE bug. If you look at the code of the page you'll see Ihave


#content {
margin-right: 48px;
}

for IE and:


#content {
margin-right: 112px;
}


for everything else.

Not exactly sure why IE shifts it all out whack like that but fixing it was easy enough.

doozer
07-17-2005, 05:29 PM
I checked out your website in opera and it looks fine.
However I pasted the IE 5. fix into the test page you put up (fixedtest.html) and it still displays as a blank black screen in opera. There must be some other opera "bug" in it.

It's a shame you don't know why IE needs different positioning values because that was going to be my next question.

Lastly, although I am impressed at the progress I have made with this CSS implementation of my frame site, it still isn't quite right.

I need the menu div and main page to scroll independently. At the moment as they are not fixed they scroll together.

Can this independent scrolling be implemented using css?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum