Site Design: Frames vs DIVs vs IFrames

Nephilim_X · Post by **Nephilim_X** » 2004-04-13 07:34pm

So a friend of mine test viewed a site, and she just -screeched- when she saw I was using frames and in no uncertain (or terribly polite) terms told me to get em off and replace them with DIVs. While the site I was showing her was never meant to be overly complex and was a quickie deal, when I finally go to redo my Robotech RPG Chronicles I'd like it to be the best it can possibly be.

Now, I'm not a total n00b, but I'm no expert. Is there any great advantage to divs? Also, what about iFrames?

I currently use Adobe GoLive for my site creation.

phongn · Post by **phongn** » 2004-04-13 07:57pm

Depends on what you want to do, really. Everything has their uses.

Frames have been deprecated in favor of using CSS-positioned DIV elements. I don't really like IFRAMES, but they have their uses as well.

Pu-239 · Post by **Pu-239** » 2004-04-13 08:05pm

Divs are just container boxes. Using them instead of frames just looks cleaner. An example of an iframe is the box beneath the form you enter stuff in on this message board.
Check out www.broken-llama.com for example of DIV usage [/blatant self promotion]

Nephilim_X · Post by **Nephilim_X** » 2004-04-13 08:39pm

Ah... and, is there an easy way to do these in GoLive? (Or dreamweaver if I have to)

Slartibartfast · Post by **Slartibartfast** » 2004-04-13 08:42pm

Sometimes frames can be useful, but lack of control over them tends to get really annoying (it's not a well implemented thing in HTML). Sometimes you just need them, often people use them because they think they look cool. If you're just using 'em as a layout better use tables, divs, whatever.

Most often, visitors prefer to scroll all the way back up to find a link than to have 1/3 of their screen devoted to "home" and "about myself" and "my hobbies" links.

Mad · Post by **Mad** » 2004-04-13 11:57pm

Frames are usually used to ensure a consistent navigation bar, so that when the bar is updated, it effectively affects all pages without having to manually update each one. I've seen a few sites use iframes to acheive this effect, but haven't really seen it pulled off well.

Currently, I use Server Side Includes, something like this:

Code: Select all

<div id="sidebar">
<!--#include virtual="sidebar.html" -->
</div>

Works pretty well. Alternatively, PHP would work. So when I switch over to PHP, I'll use something like this instead:

Code: Select all

<div id="sidebar">
<?php include 'sidebar.php'; ?>
</div>

And, of course, CSS handles all the positioning and formatting, allowing the actual HTML code to be easily readable.

Are there any other methods I haven't thought of that would also work well to accomplish this?

Pu-239 · Post by **Pu-239** » 2004-04-14 01:08am

I currently do what Mad does, but with a pure liquid CSS layout (which means if viewed on anything < (IE4, NN6), the layout will look extremely ugly. Not only that, if viewed below 800x600, the layout will get messed up- then again, anything below 800x600 is obsolete, and stuff is still readable in obsolete browsers, which is what counts (degrades nicely under lynx, unlike frames).

Using a pure CSS layout lets me drastically change the page by simply editing the stylesheet (haven't really exploited this other than color).

I'm planning to redesign it with XML for the content, then process with XSLT+Perl, since it is a mess in it's current state (and CSS alterations have limitations).

Comosicus · Post by **Comosicus** » 2004-04-14 03:24am

I used to go on a lot of embedded tables, that in the end brought nothing but trouble in the look of the page. Now I'm using a single simple table to help me position better the divs.

I didn't try yet to use absolute positioning as the current technique fits me well enough. And I like my pages to stay centered no matter the resolution and I usually keep them designed for 800x600.

Slartibartfast · Post by **Slartibartfast** » 2004-04-14 03:53am

Pu-239 wrote:I currently do what Mad does, but with a pure liquid CSS layout (which means if viewed on anything < (IE4, NN6), the layout will look extremely ugly. Not only that, if viewed below 800x600, the layout will get messed up- then again, anything below 800x600 is obsolete, and stuff is still readable in obsolete browsers, which is what counts (degrades nicely under lynx, unlike frames).

There can't really be a size too small, since even people with big screens can look at the page in a non-maximized window.

Not saying that you should make it small, just something to consider. Obviously people will maximize their explorers if they need to.

I think both dreamweaver and golive support templates, these are also great for having consistent layouts (without server includes or frames)

Pu-239 · Post by **Pu-239** » 2004-04-14 05:39am

I don't know, I could just go with a fixed 800px wide layout--- and the site doesn't really combust until you go to the opening gallery page- still usable though, just the layout looks fucked. I might consider Javascript to alter the CSS to make it look better at smaller sizes, though client side scripting is evil.

And one can center pages using only CSS- just put everything in a big div and set left and right margins to auto. I had to use a CSS hack for the margins on the site since IE doubles the size of a margin on a float for some reason - basically put display:inline in a float which is ignored by all other browsers according to the standard. Basically my site has a 3 column layout involving 3 container divs. Left sidebar is floated left, same with the body, and right sidebar is floated right. This layout is a liquid layout though. A fixed 800px wide is a lot easier though, since you can just manually place divs using position:absolute, without bothering with floats. The entire site only has a single table, and it isn't for layout.

Code: Select all

#contentcontainer{
	color: white;
	margin: 5px 215px 5px 215px;
}
#sidebarcontainer{
	float: left;
	margin: 5px 5px 5px 10px;
	width: 200px;
	display: inline; /*hack for IE*/
}
#sidebarcontainer2{
	float: right;
	margin: 5px 10px 5px 5px;
	width: 200px;
	display: inline; /*hack for IE*/
}

The CSS editor extension for Firefox is useful- it lets you edit CSS on the fly without refreshing. It's also kind of amusing to edit the CSS on Microsoft.com

.

Exonerate · Post by **Exonerate** » 2004-04-14 04:40pm

Personally, I prefer iframes. They're W3C compliant now, and a bit more versatile than frames...

It really depends on your target audience - if you're designing for a corporate website or something, you might want to reconsider, since some old browsers work funky with iframes. I'm not really a big fan of divs, I use tables whenever possible...

Slartibartfast · Post by **Slartibartfast** » 2004-04-15 03:41pm

Altavista used to use an iframe for its banners. It was kinda weird when you had a little box inside your page reading "Page not found"