18 replies [Last post]
kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Hi, I am trying to create a layout that emulates frames, preferable in CSS. - I have tryed all tutorials i could find with no luck.

Here you can see a sketch i have made using tables that sows how I want it to work ( Works correct in Safari and IE ) - Actually I wouldn't mind using tables as i do here but that, for some reason, wont work in Firefox !?

http://kongknabe.users.whitehat.dk/table%20test/

- It's importent to the design that the red box allways fill out 100% of the height, minus header and footer - Even when there are no content in it!

It has to work in IE 5.x - 6.x - Safari and Firefox.

Hope somone can help me Smile

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 3 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Emulate frames - help needed.

I can tell you how I would fix that ... or rather ... what I would do to remedy the layout.

I'd do a three column layout and give the far right column top and bottom borders that are the same width as your head / foot are. Then, give it a z-index above the foot and you should be good to go ... let me know if you want me to email you the little code I worked up to explain it to you ... I've got it sitting here on my desktop ...

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 3 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Emulate frames - help needed.

I went ahead and posted it for you to look at ... here's the location and the CSS for that page:

http://www.browncomedia.com/test.htm

/* CSS Document */
body {
margin: 0;
background: #ccc;
font: .8em Geneva, Arial, Helvetica, sans-serif;
}

#wrapper {
width: 950px;
margin: 0 auto;
background: #fff;
border: solid 1px #000;
overflow: hidden;
}

#head {
float: left;
width: 950px;
height: 100px;
background: #666;
color: #fff;
}

#left {
float: left;
width: 125px;
height: 500px;
margin: 0;
background: #669966;
color: #fff;
}

#middle {
float: left;
width: 700px;
height: 500px;
margin: 0;
background: #336699;
color: #fff;
}

#right {
float: left;
width: 125px;
height: 500px;
margin: -100px 0 -60px 0;
background: #FF9966;
border-top: solid 100px #ff9966;
border-bottom: solid 60px #ff9966;
z-index: 10;
}

#foot {
clear: both;
width: 950px;
margin: 0 auto;
height: 60px;
background: #663333;
color: #fff;
}

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 3 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Emulate frames - help needed.

The only problem you will encounter is if you want actual "text" or "images" to show up inside those borders ... you'll need to do some fancy margin editing to get them to happen ... but they should still work without too much of a hitch.

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

Thank you for your help, but i need the height of the site to be scaleble... The hole "frameset" should always be 100% of the browser height..

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 3 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Emulate frames - help needed.

May have just fixed that problem ... just go in and look at the page again ...

http://www.browncomedia.com/test.htm

Enjoy!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Emulate frames - help needed.

You really shouldn't use fixed heights.

I reckon its a two column layout inside the left hand column of a two column layout. Though I guess you could make it three full height columns and do some trick stuff with the banner and footer to get them to occupy an extra column.

To see what I mean .. take a look here. That pages combines footer-at-bottom with the one true layout. Though I guess you could do it all in the one true layout.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 13 years 3 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Emulate frames - help needed.

I used fixed heights for the purpose of this example I created. I don't usually use a fixed height.

No problem, though, it should still work without the height properties being being set for the middle row of columns ...

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Emulate frames - help needed.

apologies to anyone who looked at my layout above (before this post). I had a couple of extra -ve margins and missed out on the inner containers. It should be good now.

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

Thanks for your replay - will look in to it and se if i can get it to work Smile

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

He he - my english is bad.. Well - Your first suggestion http://www.browncomedia.com/test.htm looks a lot like what i first tryed out.. My problem is that i need it to fill the full height of the browser... I see no way to do that eccept by positioning every div absolute from both the top and the bottom, and IE can't understand if you do that.. Else it would be perfect..! The other links you postet dosen't do what i want eighter - or I just can't see how it could!? Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Emulate frames - help needed.

Am I missing something, my layout does exactly what your layout looks like?

:?

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

Hmm.. I have know viewed it in Firefox for mac and pc, Safari and IE 6.0 and everywhere the hight is fixed! ( Not 100% of the browserwindow and not fluid/dynamic ) - But maybe I'm missing something ?

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

Witch browser do you use ?

airswit
airswit's picture
Offline
Enthusiast
California
Last seen: 27 weeks 3 days ago
California
Timezone: GMT-7
Joined: 2006-01-07
Posts: 124
Points: 9

Emulate frames - help needed.

though i don't have a solution, i think i can clarify for him, if nothing else:

he wants the header/footer/menus to stay in the same spot on the screen, and only the central column to scroll...from what i have seen, none of the solutions thus far have quite acomplished that

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Emulate frames - help needed.

The height isn't fixed. It is the bottom of the page or the bottom of the browser window whichever is lower. Click on the short/longer/longest links to see what I mean.

I can't say if it works in Mac browsers. But it won't be far off.

If you are looking for fixed outer regions and scrollable inner region, then you need something like this example. A search on the forum will find the thread where it is described in detail - probably about 5-7 months ago.

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

Hi I'm not sure if I understand you correctly..!? Smile

http://www.browncomedia.com/test.htm

This has the right dimensions and is centered on the screen, as I want I to be. But it does not stretch to fill the full height of the browser at all times. I need the footer to be placed at the bottom of the browser at all times and thus the content to stretch. The only way I know how to do that is to position the footer absolutely to the bottom, and the content absolutely to both the top and the bottom (With margins), and IE does not understand this.

http://wiki.jalakai.co.uk/tester301.htm#

This stretches according to the content with the result that when I push "longest" the footer disappears out of the picture and I have to scroll the whole page down. I only want to scroll the content so that the header, menus and footer stay at their place at all times. Maybe it could be altered to do that but I don't really understand the css behind this!?

http://wiki.jalakai.co.uk/layout10.htm#

Now this is very close to what I want. But I doesn't work in Safari - Maybe I have to live with this though I don't like it Smile

But considering all these layout options I can't help but thinking that my first sketch using tables are far more simple than all the other suggestions, and if it would just work in Firefox I would be ready to go... Can't it be fixed to work in firefox? - The site I'm designing are going to have some pretty heavy AJAX programming on top of it so I would like to keep the underlying design as simple as possible to avoid future problems...

But thanks for the help so far Smile

kongknabe
Offline
Regular
Last seen: 16 years 1 week ago
Joined: 2005-11-23
Posts: 33
Points: 0

Emulate frames - help needed.

About the other thread in this forum you mention do you have a suggestion to search words i could use to find it, have tried to browse through the forum but haven't found anything yet Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Emulate frames - help needed.

I don't have access to Safari to fix any problems. However, you can search on position:fixed emulation for IE - the real problem browser. IE doesn't support use of opposite offsets in position absolute or position:fixed, both of which make the layout you are after very simple.

e.g.

#center { position:absolute; overflow:scroll, left: 100; top: 100; right: 100; bottom: 100;}

If safari can handle that, you shouldn't need to tweak things much to get the layout to work.

/edit, I couldn't find the post either. Smile The date on that page is Jun 30 and two variants (#1 & #2) are early july.

You might take a look at these:

http://www.cssplay.co.uk/layouts/fixed.html
others