Join or sign in Register for your free TechRepublic membership or if you are already a member, sign in using your preferred method below. Use Your Email Use FacebookUse Linkedin

Framed style Layout..with CSS

Locked

Since the standard way of using css and tables leaves a lot to be desired, from the navigation viewpoint at least.

here is an xml/xhtml & css script that creates a framed layout, allowing for navigation to be kept onscreen no mater how much the page content scrolls.
yet it doesn’t have the “frames” that a lot of people hate to see.

http://www.webreference.com/programming/css_frames/

since it seems that webrefernce.com isn’t being reliable,here is the Author’s own site,
where he has far more css stuff than just a frames layout, like dynamic menus in css. ( yes, css not javascript )

http://www.cssplay.co.uk/layouts/index.html

Topic

Bah! Frames

In reply to Framed style Layout..with CSS

Frames are just plain ugly! I use CSS and Tables together which can make a frame look but I hardly use it.

Nice tutorial you posted up.

Richard.

but the

In reply to Bah! Frames

problem with the tabled layout is the loss of access to the navigation for the site.

if your site(s) pages are all only one screen of data ( proper design ) then this isn’t a problem, if there is scrolling involved then you are making functionality of the site suffer by losing the navigation links.

Tables, NO! Frames Worse!

In reply to Framed style Layout..with CSS

Frames are a distasteful way of doing websites and should be avoiding like the plague.

And if you are using css then don?t bother with tables.

Please Elaborate

In reply to Tables, NO! Frames Worse!

I’m overhauling a personal web site. I’ve seen lots of posts objecting to the use of frames and tables, but none seem to specify why. What’s distasteful about them and why should they be avoided?

it’s a result

In reply to Please Elaborate

of people over using them when they first came out, that’s why people don’t like frames and tables.

this discussion is a tabled layout, as are most sites, and the drawback is evident when you get longer discussions, as well as longer articles, where there are several screens of data to scroll through, with no navigation links in them.

this same attitude is also affecting people’s appreciation of flash sites. over used tech kills the appreciation of it.

using a fixed division to keep specific content, like navigation, always available is good for site usability, the heavily nested tables a lot of sites use for layout is just bad coding.

problem is

In reply to Tables, NO! Frames Worse!

most site designers are using css with nested tables, creating the lousy navigation of a site issue, as well as horrible code.

using css, you can keep any section, like header with site banner and navigation visible in the browser, no tables, no frames, frames functionality.

tables only to present something like the contents of a spreadsheet, where the rows and colums are required. not for general site layout as most seem to be doing… of that’s dreamwaever / fronpage doing that.
( better a table than to include a file that the browser cannot open )

Frames….ARRRRGH !!

In reply to Framed style Layout..with CSS

Frames are horrible. They use up precious screen space, and make it impossible for the average user to bookmark specific pages on your site. I could go on, but the bookmark issue alone is a show-stopper for me.

so does flash

In reply to Frames….ARRRRGH !!

cause nothing but problems for bookmarks.

and javascripted sites.

yet I bet you use both of those without a second thought.

multimedia web design is almost always flash driven, which is bad design from the outset.
if I can’t view a site in lynx, then there is nothing on it to view.

lynx, text only browser.

It’s just CSS, not frames really

In reply to Framed style Layout..with CSS

I read the comments and I think that they are wrong. It’s a style, not a frame page. I mean that the comments that the members wrote talk about the tag. And this tutorial don’t talk about that.

yup

In reply to It’s just CSS, not frames really

I know, this tutorial I found and linked to is just pure css in an xml/xhtml page.

no bookmark issues, no loss of screen space to borders etc.

Link Is Down

In reply to Framed style Layout..with CSS

Any chance you could post the source here?

hmm

In reply to Link Is Down

it isn’t down for me.

posting the content would be a violation of the terms for the site hosting the tutorial, so I can’t copy it over to here.

Frames is bad, framedesign can be good

In reply to Framed style Layout..with CSS

There are advantages with frames. Mainly when building shopping sites which requires a fixed menu and item/section pages which must be scrollable.
By using css one can avoid problems that search engines when it comes down to finding pages within the frameset. This method gets rid of that.
I think it was a great example, and I would love to have this example made with the menu on the lefthand side instead of just a “frameset” with a top content and bottom. So, instead a “frameset” with static top, static bottom, auto-scroll on a lefthand menu and auto-scroll on the content.
– jonah

something like

In reply to Frames is bad, framedesign can be good

the same person did here?

http://www.cssplay.co.uk/layouts/frame.html

Sort of…

In reply to something like

But in that case there is no bottom “frame”.
My thought was having a shopping site look … like http://www.netonnet.se, where you have a fixed top, bottom and menu “frame” and a scrolling section/item “frame”
– jonah

No scroll wheel?

In reply to Framed style Layout..with CSS

Nice technique, thanks for sharing that.

I notice though, at least on Firefox, that the frame region does not respond to the scroll wheel. That seems like it could annoy some users accustomed to their scroll wheels.

yeah, I’ve noticed

In reply to No scroll wheel?

that gecko bug myself.
reported it to the mozilla developers.

it’s also commented on the site.
since it’s complete with the mozzila browsers, and there are 2 of the 4 examples on the ccsplay url that the scroll wheel does work it’s a css and xhtml issue most likely.

i must be missing something cause…

In reply to Framed style Layout..with CSS

“By far the most sought after use of CSS is to emulate the dated html ‘frame’ layout”

if the frame look is dated why emulate it? besides, shouldn’t the discussion center around user experience and not be based on looks alone?

for the

In reply to i must be missing something cause…

functionality of keeping navigation links visible.
since web designers have decided to ignore the one screen of data = one page rule in site design.
if the page scrolls, the navigation leaves the screen without some sort of mechanism to lock part of the screen.

Right, but…

In reply to for the

Right, but doesn’t frames do that? And better. I think that the example shown (the holy grill), appears better than it actually is because the links in the menu are non functional.

It appears that the intent is to change the content of a div when the user chooses a menu item. Everyone I know will want to hit the back button (instead of selecting where they were from the menu). When the user hits the back button, they don’t go back to the Sausage page; they go back to whatever web site they leave your site.

Of course, you could fix this by making everything but the content for each page an included header and then have a different file for each page. But then the whole screen would have to load each time the user followed a link. In which case, it would have been better to frames so that only the content part loaded and the back button still worked.

Of course with frames, you don’t get the cute fingers and nose hanging over the content, but then again, you don?t have the fingers and nose blocking the content.

Not to mention the fact that (as noted on the demo page) this technique doesn?t work in IE5 whereas using frames would work in IE5.

I understand that some people don?t like frames, but then again, I would argue that if the content of your site is good, even people who prefer not to see frames, will find your site useful. But if your content is not good, inventive workarounds to have frames with using the frameset tag will not win over the people who don?t care for frames.

Even still, it is a slick bit of coding. One advantage I can think if is that the coder doesn?t have to worry about making sure he/she gets the targets right because links will never cause a framed site to show up in one of its own frames. ? And that is one thing that annoys me about some frames based sites.

[Author]

Replies