Frames and Framesets or ???

[OmniX]

This is problem one of the most annoying concepts I have come around to after using several internet programming languages.

I have frames set out like so:
11111
23334
55555

I hope people can understand that lame drawing :p
Now what I wish is that all the frames stay in that layout when present in each browser, firefox, ie, safari, etc and do not change like I have at the moment. Same code 3 different browsers 3 different layouts :(
Any idea how to get this done so there all the same across all browsers?

I have used pixel based, percentage based, any other ideas?
or maybe best just to get a tag all together?

Thanks, Regards X

[ingeva]

This doesn't look very hard, but I wouldn't use frames if I could avoid it. I would use divs instead.
With frames, define three of them, above each other:

11111
xxxxx
55555

Define the "xxxxx" frame as a frameset with three frames: 2, 3 and 4.

Didd this help?

[OmniX]

So your saying throw frames out all together?

But I require 2 navigation menus, 1 main navigation menu and one sub menu...

So how would you code that whole thing in divs?

Dont forget I require them to work like frames and I dont want the pages reloading everytime and so forth?

I experiment with iframes but I couldnt specifiy the x and y values.

[ingeva]

The concept of frames may disappear from the Web altogether, but it will take several years so using frames will still be a convenient solution for a long time. However, it's by many considered to be a bad one. I've personally used frames but have now gotten rid of them altogether. By re-using much of the code in a website, you can utilize the browser's caching so that reload times are kept to a minimum.
To achieve this you might need to use somewhat advanced scripting, both on the server and client sides, and you might want to use sessions and cookies as well.

There's a "half way" solution: You can use two frames where one is invisible (zero size). This is used to load HTML content from the site, and place it in the "div"s on the visible page by using JavaScript "innerHTML". Thus only the changed code is loaded, like you want to achieve, and the programming of the site will be easier and much more flexible. It all depends on how well you master JavaScript code. And of course, use of CSS.

With this solution you get rid of, to a large extent, the rigidity and difficulty of maintenance as you will experience with "regular" frames.

AJAX might also be a way to go, but I haven't gotten that far myself .... :)

[OmniX]

Ya I can see what your seeing if I could understand how to do it with divs I would its like...

You know how you have those websites with a border around it and centered in the middle of the page?

Or if you just cut out the side borders so you only utilize the middle part?

How would you do that?

I thought frames do this only what else?

Thanks, Regards X

[ingeva]

I would define margins:
If I have a "div" that I want to center, I define its margins like this:

margin: 1em auto 2em auto;

This example gives me a space of 1em above, 2em below, and automatic margins that would center the div horizontally. If it's inside another div, it would be centered in the outer div.

You should define sizes of elements as "em"s or percent. NEVER use px -- it's still allowed, but it's oldfashioned and inflexible. If you use percent, you can have sizes of elements automatically adjusted according to the size of your window, and if you use ems all you have to do to change the size of all elements with "em" size is by adjusting the font-size of "body".

For an example, check out my side http://upandforward.com , and adjust the width of the browser window. Text and image sizes will follow. There are no restrictions for looking at the html code if you want to, but the original php code will normally not be available.

I had another site which might be a better example because it did something like you are looking for, but it broke a stupid law. I was simply not allowed to tell the truth, and I'm just an old fool who still prefers the truth beats anything else.

[OmniX]

Ok I think you got me on the write track so if I have used margins to center the image now what do I do if I want to open another frame in that window, use iframe?

I use pixels never em because im always trying to judge against images not font sizes, should I be used em instead?

Thanks, Regards X

PS: I have alot of work today but I aim to get started on this sometime today

[ingeva]

I feel that I haven't answered your previous question in full. Most elements can have borders. Define a nice one with shadows like this:

border: .2em outset #00b;

which defines a border, 0.2em thick, that's lighter to the top and left, and darker to the bottom and right. Here the color is light and dark blue.

For three divs placed inside an outer div (for the middle "frame") you would define
float:left;
for all of them, or possibly
float:right;
for the last one.

If you use pixels for sizes you might have to change it 101 places if you want to change the layout of your site, so if you want a lot of maintenance work, that's what you should do. Otherwise, except for the <body> element, use em or percent for sizes. They are valid for all kinds of elements. For images, specify only the width; the aspect ratio will be kept and the picture will not look stretched. This way you can make images of different sizes occupy the same horizontal space -- or you may use height instead if you want to.

Iframes are as "bad" as frames. They represent a solution that's easy to implement but hard to maintain, and will be deprecated with time. The best solution is to adhere to web 2.0 standards, but I can't advice on that yet since I've just started studying it.

I warmly recommend the book "CSS, the missing manual" that you can find on Amazon. It's worth many times the cost.

I would use W3C's validity check to check for HTML errors. I would also convert all old HTML code to XHTML, which means you separate contents and layout completely. That's not possible with frames.
W3C can also check your CSS files separately.

Just as I use only one set of XHTML I use one CSS file for all browsers. Under normal circumstances you can code so they look the same in all newer browsers. This could mean that you may have to use "double divs" some places to get margins and padding right. Otherwise, specifying three floating divs like above, you only need to specify the with in percents, for instance 20, 60, 20. I would make the total slightly less than 100 to make sure that the rightmost one is not moved below the others.

At last: Do NOT worry about download times. You'll be surprised how fast everything goes if you can utilize the cache. The cache doesn't have to be large. Mine is only 8MB, which is more than sufficient even for fairly large pictures.

[OmniX]

After reading your post I am alot more informed now. Thanks.

But your post begs the question, what do I use instead of frames?
(Yes I dont like them but what else can be used to open a webpage inside a webpage?)

Thanks, Regards X

[OmniX]

Ok I have been trying to use the method you suggested and it works for now BUT when I fix it and it look aligned.

Still begs the question what am I to use for my navgiation bar?
What am I going to use for my window that opens those links from the naviagtion bar?

This why I thought frames are the only answer?

You help me answer this and then ill convert from frames to divs forever!!! ;)

[ingeva]

I don't think you can replace frames, but you can change your way of thinking. Frames do have some advantages, but they are responsible for maintaining oldfashioned constructs. As mentioned before, a truly interactive web page can probably only be achieved with AJAX since that allows you to change only the changed part of a page, but you might be surprised by seeing what caching actually does for you. If the most part of a page is unchanged, it will be taken from the cache instead of from the net, thereby achieving what you want to, but in a better way.

By removing frames altogether you'll save yourself from a lot of cumbersome maintenance work later.

[OmniX]

Heres a few examples of what I would like to accomplish:
http://www.greenhamnaturalbeef.com.au/
http://www.quincy.com.au/

How have this been accomplished frames, ajax, ???
Because I very much doubt they incorporate ajax?
Yet they have backgrounds that are stunning!!!

[ingeva]

I can imagine one good use of frames, but I'm afraid it would be somewhat dependent on the browser in use. Standard solutions however, should not be.

I understand your request for a solution where you don't have to download the whole page every time someone clicks a menu entry, but there's really no need. Caching will make sure that most or all unchanged content will not be downloaded again.

If you insist on this, I would make a compromise: Let one frame be completely hidden, and load changed elements into it before copying them to their destination by assigning it using InnerHTML.
Thus you can load only one div at the time if you wish, or actually any single object which has an ID. This takes some work and knowledge of JavaScript and the DOM. It's not really hard however; I did that several years ago when I was just learning JavaScript.

I think this could be done even more elegant with AJAX however, because it would allow you to scrap the frames altogether.
Every hour you spend on learning these things will pay you back with interest. It takes some work and a lot of dedication, but you could end up being a real guru! :)

For my own sites I have to a large extent gotten rid of this "elegance" and I use mostly php for the "heavy" work. That way most of the contents of the website must be reloaded for every change, but the speed is so fast you would seldom notice that there has been a change at all, except it you watch and observe the contents changing.

A simple function for modifying the sizes of all "em" sizes elements
here: Use <body onload="once()">:

<script type="text/javascript">
var H, W, B4=false;

function once()			// Executed only once.
{	if (B4) return;
	B4 = true;
	window.onresize=resize;
	resize();
}

// Match body font to size of window.
// Percent of width: Define the size of "1.0em"

function resize()	// Set font relative to window width.
{	if (window.innerWidth)
	  W = window.innerWidth;
	else
	  W = document.body.clientWidth;
	P =  Math.floor (W/33);			// ca. 3 percent constant
	if (P<12)P=12;					// Smallest size.
	document.body.style.fontSize=P + "px";
	document.body.style.visibility="visible";	// Make sure it can be seen.
}
</script>

The "innerHTML" element is used in a similar fashion to modify contents. You can use visibility to switch visibility on/off.

Oh; a last comment: The pages you used as examples are so excruciatingly slow that I'm really wondering why they bothered with this (framed? Haven't looked at the code) system in the first place. I'm convinced that they both would have been smoother and faster using a more modern, standard solution.

[OmniX]

So your telling me just to copy and paste my frame and menu code in every webpage and just change the content?

But if I wish to not reuse code then use use ur solution to reload, that correct?

PS: I have a cold and my decision making isnt the best at the moment, so sorry if I seem lost

[ingeva]

I don't know how you have organized things, but menues can be handled very elegantly with JavaScript and/or CSS. The latter is often preferred so you really have to study what CSS can do. It's amazing!

I would also suggest that you look into what you can do with php on the server side. If you don't do php programming I can't help you much. It's one of the clues (NOT the only one!) to better, faster and more efficient web programming.

I lost my previous post. Couln't find it again when I wanted to do some editing. Now I found it again because I received a notice. Are there two different threads on the same subject?

[ingeva]

I lost my previous post. Couln't find it again when I wanted to do some editing. Now I found it again because I received a notice. Are there two different threads on the same subject?

Hehe, sorry about that. There were more "pages".
I'm not used to this forum. It does things a little differently
from what I'm used to! :)

[OmniX]

ingeva thanks for all your insight so much, I have been sick and also havent had any thread notifcations still :(.

So I will take in your input and hopefully put it to good use :)

If anymore info you can suggest be much appreciated in the mean time ill get started on my project with your suggestions.

Thankyou so much for your help :)

[OmniX]

I have been tolling around with the use of the divs tags like you told me but they still refuse to work on both firefox and internet explorer havent tried on others (they work on one not the other).

Any ideas?

What do you call the affect I am trying to get?

Maybe I can google it?

[ingeva]

What do you call the affect I am trying to get?

Maybe I can google it?

I have no good name for it. A JavaScript, and particularly AJAX expert might have a very nice solution for you but since you're not that (And I certainly am not!) I think that either you should leave the idea or find someone who could help you do the programming,
because I think it costs more than you'll gain.
Personally I like to do such programming myself because I learn a lot from it, and I can maintain the site myself. Plus, and that's no disadvantage, I can define functions that I can use generally, and not only for one site. I have a small library of those! :)