CSS and Frames...

[cusimar9]

Hi all,

I'm rewriting a simple website to use CSS for its layout. I'm basically trying to learn to write properly :D

However the website I'm rewriting uses frames, 3 actually.

I've found this example of emulating frames with CSS...
http://soiland.no/frames_with_css/

But it looks really complicated and I can't seem to do much with it. Also found loads of problems with compatibility etc

Can anyone show me a simple way to do it? Perhaps using 1 nav bar with a changeable main 'contents' section?

Or do you think that's not the way to do it?

[cusimar9]

As a matter of fact most websites I've seen don't seem to use frames at all (or any kind of CSS equivalent)

Take this example:

http://www.thelowryhotel.com/

As far as I can tell, they've reproduced the whole top menu and left bar onto every webpage and re-load it with every page.

Is there any way of loading a web page into a <div> tag? That way I wouldn't have to re-produce the menu on every page...

[CompGeek01]

http://glish.com/css/7.asp

If you don't put in the rightcontent area and you eliminate the "margin-right" in the center area, then you'll be able to emulate side by side frames.

[cusimar9]

Yes I saw that. But how do I load a webpage into content sections? I thought you could do it similar to how you would using frames?

I want to have say a menu on the left and only have to write it once...

[CompGeek01]

Can't do that with CSS/HTML. The easiest way to save time with that is with PHP. Write the menu and then 'include(menu.html)' into each "frame".

[cusimar9]

It looks like I can do the same with SSI... any advantages/disadvantages to doing that?

Also I've noticed I can't find any pages that make use of fixed menus, headers or footers... the whole page seems to scroll. Shall I just scrap my 'frames' way of thinking?

[CompGeek01]

Very few sites use fixed positioning because it isn't supported by IE. Frames were nice in the day, but keeping pages short, concise, and organized seems to beat them out in the current day.

[Hola hoop]

Lots of sites dont use frames, and i have heard of a few issues with them and diff browsers, but i always use frames and CSS. I think frames are extremly useful

A 3 frame layout would mean frame - right, frame - top and frame -middle (mainFrame by default)

All u goto do is name the frames well. When you write your intial pages u want displayed in the middle area (mainFrame) you can link from that and target instead of being _blank would be mainFrame, cause your targeting that particular area
This way your banner (frame - top) and your menu (frame - side) are always there (u can fix them to by using the scrolling "no" value in the frame code (where u give them their names). Only the content for the main part or mainFrame would change.

With frames, hardest part is naming them right and getting in right order. When u save this page it will ask u 4 times for 2 diff things.

Save - frame page, should be called Index.htm
save left frame
save top frame
save mainframe

I hope i made this easy to follow.

GL
:t

[kpm547]

CSS can replace the frame for the layout only. CSS is used for the layout of the page. So you can make your 3 div tags to hold the content.

The best and easiest way to then add the content is to use SSI. most servers have SSI enabled. That way you don't need any other scripting language. You just have to save your files as .shtm

You can then call up your menu script into the menu div tag with the following:

<!-- #include file="menu.htm"-->

# virtual gives a virtual path to a document on the server. You must access a normal file this way, you cannot access a CGI script in this fashion. You can, however, access another parsed document.

file gives a pathname relative to the current directory. ../ cannot be used in this pathname, nor can absolute paths be used. As above, you can send other parsed documents, but you cannot send CGI scripts.


That should work out. Then you can edit the menu.txt file and it will update in all you pages. Easy, sneezy.

[cusimar9]

I've been using Frames for ages, and I know all the tricks and fancy things to do with Frames.

I now know how to do it with SSI, but I must admit I don't think its going to be as convenient as frames.

For a start CSS won't allow me to have fixed position menus.

I don't know what to do to be honest, I could continue to use frames I guess, 99% of people would be able to see it...

[tantone]

Ditto kpm547.

CSS can be used for fixed position menus. It can get tricky when you start combining certain div's with fixed positions and certain ones with relative positions, mixed with z-index layering.

No offense, but frames is a novice way to go. When I see a page using frames for things like the header, side menu, and footer I immediately see a poor coder. On a personal preference, don't like having the header, menu, and footer visible while I'm browsing. If I see the header, I know I'm at the top. If I see the footer, I know I'm at the bottom.

Get your page working with solely CSS and foregoing the fixed position menus. Then dive into riveting them into position.

Take it one step at a time and you'll find that it's easy.

[cusimar9]

Well I was doing quite well last night, and I was trying to replicate a header like this:

http://www.gleneagles.com/

Could I 'eck get it to do it with divs, I tried for hours. Then I thought "I'll look at the code, see how they've done it" and lo-and-behold its done with tables.

[Hola hoop]

the DIV tags in html are used as dividers, but they are difficult to get fixed positioning. There is no faster way that creating a frame layout in html or especially dreamweaver. In under 40 seconds u can have your frames sized and named.

Div used with css, in my opinion, is best used within a frame/table or aligned cell (depending on your content), then u can give it the floating percentages for resize on any browser.

At the end of the day, if the result will look the same or just as good, why make life more complicated for yourself?

:t

[kpm547]

I have never really used frames because I don't like how search engines always seem to point to one of the frames and not the frameset page. They also seem to get scroll bars even when you don't want them. Just annoying.

I used to use tables for all my formatting. It was simple and easy. Now I see the benefits of using divs and css. So I've started rewriting one of my sites to use divs.

I did some checking around on other professional sites and still alot of the them are done using tables. I guess tables are just easier to use at the beginning, but I can see the advantages of divs once the page is set up. It will be great to be able to change the look of all pages by editting one file. I can't wait. I just have to find the time to recode all the sites.

I would definetly delve into css and divs. It is the latest and best thing. If standards get any stricter, you're going to wish you had learned it.

[kpm547]

Originally posted by Hola hoop
the DIV tags in html are used as dividers, but they are difficult to get fixed positioning. There is no faster way that creating a frame layout in html or especially dreamweaver. In under 40 seconds u can have your frames sized and named.

Div used with css, in my opinion, is best used within a frame/table or aligned cell (depending on your content), then u can give it the floating percentages for resize on any browser.

:t

you could still set up a page with your three sections, but instead of using tables or frames, use divs. Then you can put all sorts of whatever inside the three main divs. Should work.

[cedric]

Table based layouts are the dirty and old way to do things, frames are even worse.
doing your web pages using CSS for the layout and XHTML for the mark up is the way forward.

Using tables to control a page's layout is infact a misuse of tables. They are intended to display tabular data.

You can use absolute positioning in css or relative positioning with floats.
This leads to clean, easy to maintain pages. The idea is basically to seperate the layout from the content.

To see what I'm going on about read here http://www.alistapart.com/articles/betterliving/ and a few other articles on the site.

It may seem a bit complicated at first but it's miles ahead of table-based layouts.

[cedric]

Another article which may be useful http://www.alistapart.com/articles/doctype/