Framesets vs. CSS and i-frames

@jochemDec 05.2003

~~[b]~~According to many, framesets are ‘not done’.[/b]

One reason might be that W3C does not accept the elements ~~[i]~~frameborder[/i] and ~~[i]~~framespacing[/i].

The only alternative seems to be CSS. But for CSS div’s, external HTML should be loaded, which takes JavaScript. And some 13% of all browsers do not support JavaScript or have it disabled.

What about i-frames/i-layers. Might that be the answer?

I don’t get the point against framesets. Could someone please explain to me what the ultimate method for page designing is?

Cheers, Jochem ?

to post a comment

HTML

110 Comments(s) _↴

@jochemauthorDec 05.2003 — #There has been an ongoing discussion on the use of tables for the cause in the thread http://forums.webdeveloper.com/showthread.php?s=&threadid=19830. I fully agree that tables are not the way to go. And I also agree that CSS is a great thing. I use it all the time. The point is that I want to avoid using JavaScript.

Cheers, Jochem ?

@ray326Dec 05.2003 — #The best arguments against frames are that they break the navigation that users typically expect on the web, especially bookmarking, and that they are more expensive to maintain because you're always futzing with the "bean counting" of targeted navigation.

@jochemauthorDec 05.2003 — #always futzing with the "bean counting"[/quote]What's that? ?

@toicontienDec 05.2003 — #When you say "loading external HTML," you want to completely emulate a frameset using DIVs. I'd say the answer to that is don't. If there are common elements on a page that will remain and only the content changes (like what would happen when using framesets), you're better off using a server-side method such as Server Side Includes or the PHP require statement.

That way, you don't have to worry about the "bean counting" of targeted links. What ray326 was trying to say is that, when using frames, you need to specify a target for the <a> tag so that an HTML document will load in a different frame. This can become frustrating when updating pages on your site in the future.

By using SSI or PHP includes, the browser gets 1 HTML file under 1 URL, and links don't need a target attribute to get pages to load correctly. This gets around two problems: users can bookmark any page and no target attributes are needed that might cause future maintenance frustrations.

@jochemauthorDec 05.2003 — #Hmm... both arguements don't convince me. But I have to be honest, I don't have any knowledge of SSI or PHP.

I have no problem with targeting since I keep my navigation scructures plain and simple.

Second, I want users to bookmark my default page only. I use a script that forces any opened HTML page to redirect to my default page. (I opened a thread in this forum asking if that can be done without JS: http://forums.webdeveloper.com/showthread.php?s=&threadid=22812) On top of that, the default page is a two-frames page, one of which is just 1px high. The site will load in the larger frame. As a result of that the address in the address-bar will always be ..../default.htm.

Cheers, Jochem ?

@toicontienDec 05.2003 — #Hey, to each his own. There's nothing WRONG in my opinion with using framesets. I just don't prefer it. My question concerning only wanting users to bookmark one page is, why?

When they click on a bookmark, they've got to go through the site's navigation system to get to the page they actually wanted to bookmark. The whole point of bookmarking a page is to have the ability to go back to that page in one click.

@jochemauthorDec 05.2003 — #Personally, I look at my website as a whole, not just stand alone pages. Getting back to your favourite page within the site should be no problem if your navigation structure is as easy as it gets. Unless you have a very complicated website with hundreds of pages I think there is nothing wrong with bookmarking the default page.

Anyhow, I am glad to read that at least you personally don't have anything against framesets. Wonder how the others out there think of this...

Cheers, Jochem ?

@DaveSWDec 05.2003 — #The other thing is, if you use frames to separate navigation from content, you make life difficult for search engines too.

@jochemauthorDec 05.2003 — #How come?

@DaveSWDec 06.2003 — #Well, let me put it like this.

1) Search engine finds page.

2) Search engine links to page

3) Page appears without frameset.

4) User browses to page and wonders why there's no menu etc.

5) If javascript is used to redirect them to the homepage they either have to find that page again, or javascript may be disabled (13% of users)

Also

1) Search engine arrives at site

2) Instead of being told information about the company, it is told 'Sorry, but frames are required to view this site.' So the most important page, the first one, is wasted. Therefore affecting search engine rankings.

That's my understanding of it anyway.

Cheers

Dave

@TomDenverDec 06.2003 — #But I have to be honest, I don't have any knowledge of SSI or PHP.[/QUOTE]

It's actually a lot easier than you think. I know very little PHP and found out just how easy it was to use PHP to "include" content on a page.

Let's say you have a top or side navigation for your site that is the same on every page. You can create a file, let's call it "header.htm". In that file, you have the HTML code for the navigation, and that's it. Don't close the body or html tags in the header.htm file. Save that file and close it. Now in other files on the site that you use the same navigation on, add this line:

<?php include 'header.htm'; ?>

What this line does is add the content in your header.htm file in place of the php line you just added. That's it, nothing else to it....assuming your server allows PHP that is.

When you view source a page like this in the browser, you won't see the PHP code, you'll see the code from the header.htm file, and then rest of the pages code. It presents both files together as one file, so it doesn't break bookmarking like frames can.

@jochemauthorDec 08.2003 — #'Sorry, but frames are required to view this site.'[/quote]I agree Dave, I thought I would get around that problem by inserting good META tags. Not perfect, I know. But, it's Tom's input that sounds really interesting to me. So, if I would build a page with div's, would it be possible to load external HTML into them with a simple PHP line like this? It get's me curious...

Cheers, Jochem ?

@DaveSWDec 08.2003 — #The trouble with using meta tags is that google compares the page contents to the meta tags... and if they don't match... then it's right to the back of the line...

the php line can be used anywhere, not just in divs. So long as your server supports php.

@jochemauthorDec 08.2003 — #Very interesting stuff here, including the Google bit. Thanx guys, I'll get into in and start redesigning my page!

If I understand well:

1. I just leave the </body> and </html> tags of the .htm pages I want to include. The rest remains the same.

2. I create a page with divs in which I load the .htm files using the PHP code. This page will be a .php file.

May I conclude here that, for those who do not wish to get into SSI too much, the ultimate way to design a page is the method described above? Because that is what this thread is all about.

One thing though, a .htm file that does not include </body> and </html> will never pass the W3C validator I suppose...

Cheers, Jochem ?

@DaveSWDec 08.2003 — #as I understand it the data to be included can be any file format you wish - even .txt

@jochemauthorDec 08.2003 — #It gets better and better... Keep talkin'!

Cheers, Jochem ?

@jochemauthorDec 08.2003 — #Should these to be included HTML pages contain the opening <html> and <body> tags? Should they contain <meta> tags in the header? Would any of you know about a good tutorial site on this?

Cheers, Jochem ?

@DaveSWDec 09.2003 — #What I do when I use php includes:

<doctype....>

<html>

<head>

<title>I leave this on the page so I can change it on every page - important for search engines</title>

<?php include 'headcode.txt'; ?>

</head>

<body>

<?php include 'top.txt'; ?>

<div>

Content specific to page - basically anything on the page that only occurs on this page.

</div>

<?php include 'foot.txt'; ?>

</body>

</html>

Then headcode.txt will simply contain

<link href="simple.css" rel="stylesheet" type="text/css">

<link href="favicon.ico" rel="favicon">

top.txt will contain

<div id="menu">

<img src="pic.png" alt="welcome to..." width="" height="">

</div>

and foot.txt will contain

<div id="footer"

<a href="privacy.php">Privacy Statement<a>

</div>

The external files simply slot into the code on your page, so they only contain the code you would copy out of that particular bit. Repeated stuff - like menus, css files, etc is moved out and included at the server.

Having an include at the top allow you to add your charset meta tag in on every page, etc. If you leave the basic header html code on the main page you can add meta tags specific to your page.

You can also do it with anything above your specific page content in one include, and anything below it in another.

And that's my idea of a tutorial. Any good?

@TomDenverDec 09.2003 — #Jochem, the file you want to include does not need to have the normal HTML page stuff in it. It doesn't need a doctype, or an opening html, head, title, body tag, unless you want those in it. The content of the file to be included literally replaces the <?php include 'header.htm'; ?> line in your other html files. So you have your doctype, <html>, <head>, <title>, etc in your normal HTML page, and then use an php include to add your navigation from an external file.

Another common use for it is for the end of your HTML pages. Many sites have footer information there, like how to contact the company, some navigation links, etc. For example, this site uses some footer information on these pages, that I assume is the same on every page.

@jochemauthorDec 14.2003 — #Hi Tom and Dave,

Now here we have a turorial indeed. It seems to be just as simple as it seems. If this really [i]IS[/i] the ultimate solution, then how come I've never come accross it before?

I'll get into it the comming days and keep you posted. Thanks to all for joining this thread. Talk to you later.

Cheers, Jochem ?

@jochemauthorDec 14.2003 — #For navigation purposes... How do I change one, or even two divs from another?

Cheers, Jochem ?

@TomDenverDec 14.2003 — #Jochem, I don't understand your question ?.

@jochemauthorDec 14.2003 — #If I created one default page like described above, there would be several divs in it. One might contain a menu, while another might contain text. How can I change the contents of the text div from the menu div? Do the divs have a name to target?

Cheers, Jochem ?

@ray326Dec 15.2003 — #That's what the 'id' attribute is for.

@DaveSWDec 15.2003 — #I think I see what you mean, but the answer is that you make a new html (or in this case, php) page.

so my index.php would have this code:

<doctype....>

<html>

<head>

<title>Page Title</title>

<?php include 'headcode.txt'; ?>

</head>

<body>

<?php include 'top.txt'; ?>

<div>

Content specific to page - basically anything on the page that only occurs on this page.

I would link to products using <a href="products.php">Visit our products page</a>

</div>

<?php include 'foot.txt'; ?>

</body>

</html>

Which would then use hyperlinks to get to products.php

<doctype....>

<html>

<head>

<title>Products Page</title>

<?php include 'headcode.txt'; ?>

</head>

<body>

<?php include 'top.txt'; ?>

<div>

We sell the following products:

- Computers

- Computers

- And more computers!

</div>

<?php include 'foot.txt'; ?>

</body>

</html>

This method isn't like frames, where content changes within one page. You make all the pages you need and use the includes to insert repeated code - like the menus.

Is that any clearer?

I guess the reason you won't have come accross the method before is that not all servers support php - so you can't go round telling everyone, 'use php for your navigation' - because they may not have php available.

Hope this helps

@jochemauthorDec 15.2003 — #I am trying to get a very basic version of php include to work. So far no luck. I have attached the code below.

[b]1.[/b] Why does a vertical scrollbar show up in IE and not in Moz and NS?

[b]2.[/b] Why does the text in Body.txt not show?

Cheers, Jochem ?

[upl-file uuid=ab1f9408-1208-455b-9d4a-33f94ab58289 size=901B]test-1.zip[/upl-file]

@jochemauthorDec 15.2003 — #I realize that this is slowly becomming a thread that should be posted in the PHP section. For now I would be happy to receive an answer within this thread. If it becomes more specific later on, I will post a new thread in the PHP forum.

Cheers, Jochem ?

@TomDenverDec 15.2003 — #Your example works if you change body.txt to body.htm. I don't see a scroll bar in either IE6 or Mozilla with your example. I'm far from an expert on PHP, but I always include .htm files, not .txt ones. I think you should be able to include .txt files as someone mentioned earlier, but it doesn't work in your example, and .htm does.

Not to be picky, but in your CSS you use color names (black, red, etc.) instead of the hex values sometimes. I'd switch them to hex if I was you. I don't think it will validate with HTML 4.01 if you don't, but of course it will still work.

What's with the spacer.gif? Is this for some NN4 fix to make the browser not suck? Your div tags have the size set, with margins, padding, border, etc., so I don't think the spacer.gif is needed. I couldn't see a difference in IE6 or Mozilla by removing that image.

@jochemauthorDec 15.2003 — #That's kinda weird Tom, because I really DO see a scrollbar in IE6. And changing Body.txt to Body.htm both as a filename and in the PHP file does not make the text show up. May all this be because I'm working off-line? (My current ISP does not support PHP.)

Thanks for the note on the CSS. I have changed it.

The spacer.gif is just an extra. I know it is not nessecary.

Cheers, Jochem ?

@TomDenverDec 16.2003 — #Jochem, yep you have to have this on a web server that supports PHP. You can do that offline, but you'd have to download, install and configure Apache and PHP on your computer. It's all free software, but it's time consuming to setup.

You can maybe find a free host that supports PHP just so you can test and learn PHP on it. I'd stay away from free hosting for any legitimate site you want to run, though. They usually place ads and other crap on your site. If you've got some money to spend, a cheap PHP host is http://www.jatol.com. You could get a host plan for a full year and register a domain name for around $45.

@jochemauthorDec 16.2003 — #OK, I'll go find myself a new host.

Cheers, Jochem ?

@jochemauthorDec 18.2003 — #If I understand well PHP include can be usefull to load the initial content into the various DIVs on the [i]DEFAULT.PHP[/i] page. One DIV would contain [i]HEADER.PHP[/i], another would contain [i]MENU.PHP[/i] and a third [i]WELCOME.PHP[/i]. But then...

[b]1.[/b] How do I change the content of the DIV with [i]WELCOME.PHP[/i] loaded into it from [i]WELCOME.PHP[/i] to [i]PAGE-X.PHP[/i] by clicking a link in [i]MENU.PHP[/i]?

[b]2.[/b] How do I change the content of two or more DIVs simultaneously by clicking a single link?I would link to products using <a href="products.php">Visit our products page</a>[/quote]Thanks Dave, but that doesn't make it any clearer to me. Each DIV has an ID, so wouldn't I have to target a certain ID, just as with targeting frames? I want to do it without the use of JavaScript. Please post an example script.

Cheers, Jochem ?

@DaveSWDec 19.2003 — #Basically we're not explaining how it works properly. It works like normal html pages - where you would have the entire page, including menus, headers, footers etc, and you would normally have to change each page individually. Except that the php allows you to reuse the repeated codem, and alter every page at once.

It has nothing in common with frames. You don't target the divs. it just allows you to reuse bits of code.

Is that clearer?

@jochemauthorDec 19.2003 — #Aha, I think I got the point. The entire page containing all the DIVs is simply being replaced by another. Somewhat like target="_self".

Then you reload all the elements in it you want.

Doesn't the reloading of, let's say background images, cause the page to slow down or flicker? Or does the caching make it go smooth?

Cheers, Jochem ?

@DaveSWDec 20.2003 — #Yes, It does go slightly slower, but as you say, they are cached so they only flicker. But it's far more accessible to search engines etc, so it's worth it, I reckon.

@jochemauthorDec 24.2003 — #Great, I am building already. Now I can't wait for my PHP account to be activated...

Cheers and merry X-mas, Jochem ?

@jochemauthorDec 26.2003 — #The one thing about this method is that it takes a host that supports PHP. So is there another way to achieve the same goal, like an ASP include or maybe even a HTML solution? ASP is totally unknown to me.

Cheers, Jochem ?

@russell_g_1Dec 27.2003 — #Hi everyone.

Jochem, you're going to need some kind of server side scripting available on your host's server for any of this stuff to work. It's possible to do this kind of thing with php, asp, etc.

I use classic ASP to achieve something very similar to what you are trying to do. Although I do it the other way around to what everyone else seems to be saying.

I create a single "template" asp file. This contains all the header, menu, footer etc. The only bit that is missing from this file is the main content that is specific to each page.

To get the content in the middle, I include another couple of asp pages at the start of the "template". These other pages contains various bits of vbscript, to generate all the info for different pages. I then call a single subroutine in one of these files from the template where I want the stuff to appear.

I've attached a simple example to make it a bit clearer. You can view the results of using this at [URL=http://www24.brinkster.com/reactance/]http://www24.brinkster.com/reactance/[/URL] .

Also, if you want to just play around with asp then I recommend www.brinkster.com, despite the adverts.

[upl-file uuid=873c45bd-3d30-4d8f-8a17-46dbcecfb742 size=63kB]example.zip[/upl-file]

@IncaWarriorDec 27.2003 — #i don't like framesets because they can make big lines and even scrollbars across your site. Iframes are nice, and on my site i use an IFrame for a sidebar that changes everynow and then, so i don't have to update every page. Is there any way just to insert some html?

@russell_g_1Dec 27.2003 — #IncaWarrior, read the rest of the thread if you want to find out.

@jochemauthorDec 30.2003 — #Russel, thanx for your ASP example.

It looks as if the body text is being included by using [i]<%writemainsection()%>[/i]. Then, the code [i]<% function GetText(id) %>[/i] is being recalled to eneable txt files to be included. Is that correct? What else is there to it? I get the impression your example holds more that just the core needed.

What is the [i]init.asp[/i] file for? What are you debugging here?

[i]<% sub WriteMainSection() %>[/i] does not seem to be part of the core coding, correct?

Could I call an external txt file for anything, like META tags and such, which is possible with PHP?

Cheers, Jochem ?

@IncaWarriorDec 30.2003 — #Well does anyone have a way similar to the php method, only without php? ASP would be ok

@russell_g_1Dec 30.2003 — #IncaWarrior

Includes are done in asp in the same way as php. just stick  in your page where you want it.

jochem

You are right that the example I gave you does more than just include a bit of text. It's the basic structure I used for creating a whole site, I've just cut a lot of bits out.

I meant to remove the debug bit, it just set a variable that meant that the id numbers for each piece of text were displayed (helped in working out where things were coming from).

The WriteMainSection could almost be replaced in the example, it previously did call other routines that did more than get text out of a file, like reading and writing to and from an access db.

The contents of init.asp could be placed anywhere before the call to writemainsection, I only put them in a separate file to make it neater. It's only used to set a couple of variables at the start of page execution.

And yes, you can dynamically change anything in the html with asp or php. So you could have a routine called writemetatags which looks like writemainsection but called from the head part of the html.

Sorry about how much I typed there. :-)

@russell_g_1Dec 30.2003 — #Remembered something else.

That example I gave is entirely dependant on js for anything to work. This could easily be changed though.

@IncaWarriorDec 30.2003 — #ah the asp version of that works perfectly for me! now just to change the link names so they all have .asp extensions...

@jochemauthorDec 30.2003 — #If an ASP include works just like a PHP include, why would one choose one or the other?

Cheers, Jochem ?

@IncaWarriorDec 30.2003 — #well i guess it could depend on what your server supports.

Seeing that PHP was mentioned i'm guessing that there's probably some compatibility problem with blind french people on cellphones or something

@russell_g_1Dec 30.2003 — #There is more to asp and php than simple includes

@jochemauthorDec 30.2003 — #I understand that each language has it's own specialties, and that depending on other features you'd want on your site you'd choose the appropriate language. But in this case, where it's only about including external content, would it make any difference? I guess not, but I'd like to hear it from others too.

Of course your server or ISP should support either PHP or ASP to get any of these methods to work.

Cheers, Jochem ?

@russell_g_1Dec 30.2003 — #Just out of interest, what kind of content are you thinking of including in this site?

You'd probably be suprised how often a db comes in useful.

@jochemauthorDec 30.2003 — #txt files

Basically just text and images plus a menu.

@russell_g_1Dec 30.2003 — #So there's no repeating structure to anything? no news page? no page of links to other sites?

If there's nothing like that then a load of files is probably best.

@jochemauthorDec 30.2003 — #Have a look at www.alpinetrekking.com/test to see what it should look like. This is the old Frameset version (where you will also find the image swap mentioned in my other thread). I am now playing successfully with an ASP version.

I can imagine that in a later stage I will want to make use of the powers of PHP and/or ASP. For now, it's all about getting rid of Framesets. Basically, I am looking for [b]the perfect way[/b] to build websites in general.

Cheers, Jochem ?

@jochemauthorJan 01.2004 — #[b]HAPPY NEW YEAR TO YOU ALL !![/b]

I have decided to go with the ASP option since my current ISP does not support PHP. See www.alpinetrekking.com/asp for the result. All works fine, but two divs in the HiRes section (INDEX and TEXT) are not in the right position. I've looked them over and over again but I can't find my mistake. It most probably lays in the [i]Style_Divs.css[/i] file. Please help me out! The files are attached.

What remains is my question which language would be the ultimate choice for designing the perfect website: ASP or PHP. So far I have learned that a div's page with SSI includes is the way to go. But is the choice between SSI languages like ASP and PHP fully dependant of the other possibillities the languages offer, or is one just a better option than the other?

Wishing everyone an inspirational 2004, Jochem ?

[upl-file uuid=63e71f4b-31be-47d3-b195-6f440c6edf9e size=70B]removed.txt[/upl-file]

@m_hemertJan 01.2004 — #Hi there !

Interesting topic, but I wondered the following.

I don't see anyone mention the Function of a technique or language.

A server-side language is a wonderful solution to present loads of information on a website. I'm very charmed of "puking" website-content out of a database into a browser using a server-side language. Personally I use asp.net to do so.

However, creating navigation and that kind of stuff is a client-side problem I suppose. Therefore, I don't see a link between PHP and navigation or framesets or tables.

I can be wrong, and would be happy to hear from you experts !

[email][email protected][/email]

Mark van Hemert

@jochemauthorJan 01.2004 — #Hi Mark!

Thanks for joining in. Mark is a personal friend of mine, my ISP and my one and only ICT guru. Without him I'd be completely lost. I told him about this thread and now he wants to learn about the subject too. So guys, teach us big time! The audience is listening...

Cheers, Jochem ?

@PeOfEoJan 01.2004 — #jochem, if your host supports asp.net and asp classic learn .net instead. It is far more powerful, much faster, and easier to use (in my opinion).

@jochemauthorJan 01.2004 — #.Net is completely new to me, although Mark gave me a brief demonstration a while ago. I don't think I'm ready yet to learn it (time is a precious thing), unless there would be a very simple include method like the ones we discussed before. Like with ASP and PHP, I am willing to learn more about it when I come to the point where I'm gonna need the powers of it. But for the sake of this thread, please go ahead and tell me more about the power of .Net and share it with the world!

Have you found any mistakes in my asp-setup?

Cheers, Jochem ?

@PeOfEoJan 01.2004 — #well asp classic uses vbscript which I do not like. asp.net uses actual vb6, and asp.net can use c# j# and tons of other languages. asp.net is also object oriented and asp classic is not. asp.net also brings a whole bunch of new things to the table, some new server variables for example. It also has the xml web service and mobile controls. It is just a whole lot more powerful then asp classic. asp.net is the newest version of asp but since it was so different (yet so similar ? ) to asp classic it needed it own format so the two could run side by side so people would not be forced to recode all of their old pages once they installed the .net framework on their server. To do an include in asp.net it is exactly the same as in classic



or

@jochemauthorJan 01.2004 — #If I understand well asp.net is great for complicated websites where a lot of functionallity is needed, like databases. .Net is more like a suite of design tools, isn't it?

[b]1.[/b] Is asp.net also the best solution for simple websites?

[b]2.[/b] How does asp.net relate to PHP or other Server-Side languages? Is it better?

[b]3.[/b] What does [i]virtual[/i] stand for in ?

[b]4.[/b] Does the x in .aspx mean it is asp.net?

By the way, thanks to Mark I downloaded the asp.net [i]Web Matrix[/i] application from http://www.asp.net/webmatrix/default.aspx?tabIndex=4&tabId=46 yesterday, but I haven't looked at it yet.

Cheers, Jochem ?

@PeOfEoJan 01.2004 — #asp.net is better then asp for all sites. It allows you to make powerful web aps with greater ease. i can use it for simple pages, like the main page of my server, or complex sites like my clan's site. The x is just for expantion or something is the next version of asp so they gave it a little x. Virtual is just for an include within that virtual directoy so I can write virtual="default.aspx" where if I did it the other way I would need to put include="somedir/dfault.aspx". asp.net is more powerful then asp classic so it can give other server side languages a run for their money. The only problem with .net is when you use validators and some other conveiniance controls it spits up java script which can make the site a little less functional, and it spits up invalid html. But you can work around that by just codeing it the longway (which isnt that much longer)

@jochemauthorJan 01.2004 — #All that sets a whole new light on the discussion in this thread. First, Framesets didn't seem that bad after all. Then, PHP include turned out to be the better way to go. Then it was ASP and now there is asp.net. It's obvious that the opinions of this forum's users differ. I hope that one day I can close this thread drawing a final conclusion...

Okay, I will change asp to aspx so I will be able to add more features to my pages in the future. And I will ask Mark to show me around in [i]Web Matrix[/i] so I can learn more about the powers of asp.net and .Net in general.

For now, you could do me a great favour by downloading the asp-test I uploaded earlier today and help me find the bug.

Cheers, Jochem ?

@PeOfEoJan 01.2004 — #I will later on. I have to go now. If you want more pro .net propoganda click the why asp.net link in my profile ?

@jochemauthorJan 02.2004 — #I completely revised my asp-test, although still with ASP and not asp.net. I still have problems with the positionning of the div's [i]INDEX[/i] and [i]TEXT[/i].

Cheers, Jochem ?

[upl-file uuid=27f93274-a4ad-4277-bf5d-d1f389b2b45f size=44kB]asp_include_revised.zip[/upl-file]

@PeOfEoJan 02.2004 — #I think you are doing too much work. Even if a user has hi or low res you cant guarantee their browser window size and other things. Plus you are using java script to detect it which makes it inaccessable. If I were you I would just make it fluid, in the end it is less work. www.bluerobot.com has some good framework fluid and centered layouts

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

that too, just basic boxes that can be modified up the ying yang to suit your needs. for just an include, asp or asp.net can do it, it is not important either or, because on something like that you will not see a speed diference or a code difference. That is one example where asp.net and asp are exactly the same.

@Sux0rZh_jc0rzJan 02.2004 — #peofeo, i agree with you on the detecting resolution and such, im tired of websites that are stationary, and most times you have to scroll anways cause they make it exactly 800 px wide and my screen is 800 px wide and 5 px are taken up by IE's borders in a maximized window, also this happened recently where someone i know wrote code that bounced the user between 4 webpages before they finally reached a webpage coded for them, when it probably wouldnt work anyways if they resized the browser, when people can just create scaleable webpages, or webpages like www.ryanbrill.com where it centers and ergo doesnt look tiny on large screens.

@jochemauthorJan 02.2004 — #I agree that stationairy websites can be anoying when you need to scroll anyway. Still, I chose to build one this time, since the background images cannot resize nor repeat. My future websites will most probably not be stationairy though.

To prevent unwanted scrolling in different browsers, I made sure the canvas size is cross-browser safe. I created a tool a while ago to test this: www.alpinetrekking.com/canvas.

Yes, for the redirect JavaScript is needed, unless you would know of a non-JavaScript sollution... But, I also added a noscript part.

The resolution redirect hardly causes any extra work, since the [i]only[/i] difference lies in the stylesheet and a couple of background images. All other files are the same.

Cheers, Jochem ?

@m_hemertJan 02.2004 — #Hi Guys !

I read lots of truth in here, Asp.net IS powerful, Framesets ARE a good solution for navigation and JavaScript makes your website Inaccessible ! (I told you that many times in history Jochem).

The solution Jochem is looking for, isn't a Development-Suite like WebMatrix or Microsoft Visual Studio.Net or PHP. I think he's really looking for Flash MX ! His problem is positioning, navigation and that kind of stuff. Flash creates vector-oriented sites, no matter what resolution, free navigation, it's heaven Jochem !

Do I make this problem more complicated ? I love that !

yours sincerely,

Mark

@PeOfEoJan 02.2004 — #I think framesets are bad. The look bad and are inacessable. I use an iframe on my site so I might be a bit of a hippocrit but I am working on a new layout. But using a server side language is not a layout tool, client side css can be used for that. Server side languages are used for data bases, server variables, web services, sencative scripting that the client can handle, so on and so fourth.

@m_hemertJan 02.2004 — #Ok,

For what it's worth, I will write a piece about some general things, I think that the following information can be very helpful for Jochem, and all the others who are wondering which direction to choose. The problem is, that the most of us are starting with a problem to solve, looking for a solution in stead of taking a look at the tools and their features.

What do we need in a Web-Site ?

1. Markup / Design

2. Content

3. Intelligence

4. Order

1. Markup and Design are CLIENT-SIDE !

Use HTML, Javascript or Flash !

2. Content can be integrated with the client-side. We all made a website which was made up with HTML and nothing but HTML. If there are loads of content, we can store our content in a database, and use a SERVER-SIDE tool to present the data. We still need CLIENT-SIDE stuff to present the SERVER-SIDE data !!!!!

3. Intelligence can be approved by a application, which is web-enabled, Client-Side OR Server-Side ! Games van be made with Javascript, Database-applications are best made with something like .Net

4. Order your site with framesets or what you like, but my conclusion is the following:

Know your tools ! Take a look at all of them and find the correct balance between them !

In my work you will always find a mix of Client-Side, Server-Side, javascript, framesets and .NET !

The trick is to use the right tool for the right function !

Greetz,

Mark

@PeOfEoJan 02.2004 — #Client side scripting is bad, java script is bad. It is inacessable, so is dhtml. Use of these should not be realied apon for site functionality but rath for effects that are not important. CSS can reduect server stress and end up being less code then tables. What is left, the html that the server outputs if you are using a server side language. You are not seeing beyond data bases, server side languages can do a whole lot more then that, they are basically all of your scripting, because doing it client side makes your site inacessable. Flash might be a great tool, but I have never used it so I do not know. But I would rather not use it and just go with the traditional methods. Why do you like framesets so much? The same functionality can be acheived with includes and if you like scroll bars divs with auto overflow, it is more accessable and it looks better.

@m_hemertJan 02.2004 — #Client-Side Scripting isn't bad, for some functionality you just NEED it ! A website which is made with Visual Studio.Net contains lot's of javascript. Some actions made by the visitor of your site can't be mentioned without client-side script.

I'm not a frameset-freak, but I never used the alternatives. I just took a start using aspx and it's like heaven ! My websites are as much as possible stored in databases, and I love the features of the .Net - Framework.

Jochem told me about Div-layers and I believe it's a better solution than framesets, I will take a look at it as soon as possible.

The start of this discussion between me and Jochem was his need to do some tricks with frames and navigation. He came up with PHP. At that point, I told him about the variety of tools and suites to build websites. I think this is a good way to study the meaning of the tools and what to use them for.

@PeOfEoJan 02.2004 — #You do not need java script at all for functionality. I reccomend not using things like required feild validators and regular paging because it ouputs java script as a matter of fact. A site does not need java script at all for functionality it is actually quite the contrary. All neccessary scripting to a sites functionality should be done server side while cosmetic affects like drop down menus (if you have backup nav) can be done client side for the sake not not having to refresh the page.

@DaveSWJan 03.2004 — #Apparently search engines aren't too fond of databases.

@jochemauthorJan 03.2004 — #Mark, I agree with you that one should choose the tool that best suits one's needs before starting to design anything. For me personally that indeed means that there is no reason for me yet to get into .Net. I'd still like you to show me around a little more though...

I also agree that Flash looks great due to it's vector technique. What I dislike about it, is that it takes a plugin. New browsers have it built in but older ones don't. And I am not expecting any user to download it just to view my website.

What I disagree with is the use of Framesets, since Search Engines don't handle them well. Something I learned from this very thread.

PeOfEo, I agree with you that JavaScript and DHTML, although capable of creating great effects, should not be used for any important parts of a website. (I know, I used it myself for redirecting. Bad boy!)

[i](...) it is more accessable and [u]it looks better[/u].[/i][end quote] Very true and yet to be discovered by Mark!

[i]You do not need java script at all for functionality.[/i][end quote] Do you know an alternative method to redirect, like ASP or PHP?

[i]I use an iframe on my site so I might be a bit of a hippocrit.[/i][end quote] An iFrame can be a great solution. I use one to place a rather complex banner on a site that is managed by someone on the other side of the world. All he needs to add is a little piece of HTML (an iFrame) which links to a mini-website which I control and which is on my server. Since he does not use ASP or PHP an include is not an option.

Then, there is something unknown to me: CGI. What about it?

The question posted in this thread is what is the best method to build websites in general. Going with Mark's input there is none. He is basically telling us that it all depends on the functionality needed. That sounds very logical and I have to agree with that. It's just very true and it could be a final conclusion. So does that close this thread? Not quite yet. Since most of us will be working on more basic websites, advanced functionalities like databases, become less of an issue. So I guess we can say that for designing a basic website there are two choices to make:

[b]1.[/b] Do I build an all client-side website (tables, framesets, Flash), or do I build a combination of client-side and server-side scripting (PHP, ASP, ASP.net)?

If one decides to go with server-side scripting, there's another choice to make:

[b]2.[/b] Do I choose a HTML lay-out design (tables, framesets) or a CSS design with PHP or ASP includes?

Looking purely at lay-out methods, I personally feel comfortable using CSS divs with PHP or ASP includes. Very simple and yet very effective. PHP or ASP? Just the same. One can go either way, again, depending on other functionalities needed, and wether your server supports PHP or not. When more complex functionality is needed for your website, I can imagine that ASP.net is the way to go. And for stunning looks: Flash is the answer.

There's one more thing that matters: how do Search Engines deal with the method you choose? Here are some interesting articles on it:

http://www.alistapart.com/articles/seo

http://www.google.com/webmasters/guidelines.html

http://www.webposition.com (the free trial version holds a great tutorial!)

Cheers, Jochem ?

@jochemauthorJan 03.2004 — #Apparently search engines aren't too fond of databases.[/quote]How come?

@jochemauthorJan 03.2004 — #Wow, 2004 views of this thread! Happy new year!

@jochemauthorJan 03.2004 — #But guys, what remains is that I really don't get what I did wrong in the asp-test I uploaded before on page 5 of this thread. Could anyone help me out?

Cheers, Jochem ?

@PeOfEoJan 05.2004 — #It dies because you are using a client side detect for one. Besides using that, when I just open your default I have no problems. What is your problem? You do realize an include will not work on your machine, you need to be running a server side page from a server to test. Do you run xp pro? If so install iis so you can run asp pages from your box like I did. You can't just open it like an html file. Also why wouldnt a search engine like a data base? They are everywhere. How could a spider tell if you use one, all it would see is a server side url, like a .php or .asp. Would it see a tiny bit more lag (unnoticable to the average user)

@PeOfEoJan 05.2004 — #[i]Originally posted by jochem [/i]

[B]

I also agree that Flash looks great due to it's vector technique. What I dislike about it, is that it takes a plugin. New browsers have it built in but older ones don't. And I am not expecting any user to download it just to view my website.

Do you know an alternative method to redirect, like ASP or PHP?

An iFrame can be a great solution.

Then, there is something unknown to me: CGI. What about it?

[b]2.[/b] Do I choose a HTML lay-out design (tables, framesets) or a CSS design with PHP or ASP includes?

Looking purely at lay-out methods, I personally feel comfortable using CSS divs with PHP or ASP includes. Very simple and yet very effective. PHP or ASP? Just the same. One can go either way, again, depending on other functionalities needed, and wether your server supports PHP or not. When more complex functionality is needed for your website, I can imagine that ASP.net is the way to go. And for stunning looks: Flash is the answer.

There's one more thing that matters: how do Search Engines deal with the method you choose? Here are some interesting articles on it:

http://www.alistapart.com/articles/seo

http://www.google.com/webmasters/guidelines.html

http://www.webposition.com (the free trial version holds a great tutorial!)

Cheers, Jochem ? [/B][/QUOTE]
I got tired of deleting text. CGI is a dinosaur first of all, it is still used but it has been around forever and I think some of the newer technologies might offer more power. But using cgi with php should work out fine.Bout flash, can you make a fluid layout with it? You can do a redirect server side, in asp and asp.net it is response.redirect("theotherpage.html").

I suggest making layouts client side with css and then using a include yes, infact I am making one right now just like that where there are only 3 lines of code per page for the includes and the rest is content. http://quasi-ke.servebeer.com/layout/index.html is what it will look like when it is done. I am going to try to avoid iframes as much as possible because they will scroll when the content is too big, they do not always aggree with me and where I want to put them, and they are less accessable then an include. You can acheive the same affect with an iframe and an overflow:auto; div w/ height and width specified. Anything I missed? Oh yea, try to get into css instead of tables if you want to use html 4.01 strinct that is, it is the valid way to do it, and it will save you on bandwidth if the css file is external.

@jochemauthorJan 07.2004 — #PeOfEo, thanx for getting back to me.

Yes, I am viewing my asp-test online. All looks as wanted, except those two divs. [start quote][i]when I just open your default I have no problems.[/i][end quote] Well, online you'll see what I mean. And it's got exactly the same files. www.alpinetrekking.com/asp I just can't figure it out.

You're saying that spiders don't see databases because they only see the server side url. Does that mean that any .txt or similar include will not be seen either?

So, basically CGI is not something to get into, right? Then let's just not waste our time on it and forget about it.

[start quote][i]Bout flash, can you make a fluid layout with it?[/i][end quote] As far as I know, yes. But I don't know much about Flash.

[b]response.redirect("theotherpage.html")[/b] Would you be so kind to give me the full code for a redirect based on screen resolution?

By the way, I tried viewing your new page but it wouldn't open.

I agree that iFrames are far from perfect, but in this case it was the best option. One can set an iFrame not to scroll, like I did. www.alpinetrekking.com/canvas holds the same iFrame banner (Alpine Trekking).

And finally, tables are indeed ment for table data. Not for page lay-out.

[b]Does anyone out there want to put some fresh wood on the fire to keep this discussion going?[/b] Please share your ideas on the perfect webdesign with us.

Cheers, Jochem ?

@DaveSWJan 07.2004 — #Well here's a page that refers to search engines not indexing databases: http://www.searchenginewatch.com/links/article.php/2156181

And there's another one here: http://library.albany.edu/internet/search.html

@jochemauthorJan 08.2004 — #In another thread I read that some older browsers do not support Z-indexes. That could cause a big disadvantage to the CSS + includes method. Does anyone know a website where I can check which browsers support which verion of CSS?

Cheers, Jochem ?

@PeOfEoJan 08.2004 — #well I wouldnt redirect based on resolution, I would make a layout that works at all resolutions, it is less work. But as far as I know there is no server side way to get resolution, you can get a browser and os, but I have not seen res. You would need java script to do it, what is part of the reason why I wouldnt use it. All browsers read css differently. The ones that do not support it will just display your content, which is good. You can look at the browser hack chart in my sig to see which hacks to use when though, because sometimes it is neccessary to use these hacks to send different values to different browsers, it is a little bit less work then doing a server side browser detect and work just as well.

@jochemauthorJan 08.2004 — #pitty...

What about CSS enabled browsers?

@PeOfEoJan 08.2004 — #they work fine ? what about them? ie 6, 5.5, 5 (ie 5 - .5 will need box modle hacks most likely), opera mozilla, netscape, konquere, etc.

@jochemauthorJan 08.2004 — #What do you mean by "box modle hacks"?

@TomDenverJan 09.2004 — #[i]Originally posted by jochem [/i]

[B]In another thread I read that some older browsers do not support Z-indexes. That could cause a big disadvantage to the CSS + includes method.[/B][/QUOTE]

PHP is server side, doesn't matter what browser anyone uses, even the dreaded NN 4. If Z-index is a problem with your includes....then don't use z-index. I don't know why you'd need to use it anyway for includes.

@PeOfEoJan 09.2004 — #[i]Originally posted by jochem [/i]

[B]What do you mean by "box modle hacks"? [/B][/QUOTE] The are ways of sending a different value to ie5 and 5.5 (other browsers have them too) to correct their box model because they are not compliant and will mess stuff up, it will be off in size or alignment etc. For example:

<i>
 </i>img.test { 
 position:relative;
 top:-30px;
 left:-7px;
 float:right;
 }
 i{content:""/*"} /* ie 5 cant see the following */
 img.test { 
 position:relative;
 top:-30px;
 left:-10px;
 float:right;
 }

You put one value out there that all browsers can see then you put another one out there that overwrites the first one that only complient browsers can see. That way everyone is happy.

@jochemauthorJan 09.2004 — #Tom, I don't use Z-indexes for includes, but I do use them for other stuff.

PeOfEo, I didn't quite get that. Could you please explain a bit more?

By the way, I have reason to believe that the lay-out problems of my asp-test may be caused by a server problem, publishing the wrong data to the web. I have contacted my host.

Cheers, Jochem ?

@PeOfEoJan 09.2004 — #ie 5 and 5.5 would not see the code after that jumble of characters, however the better browsers would, so therefore they display the second value rather then the first so that makes it possible to send one value to one browser and another to all the other browsers. That is the idea behind browser hacks.

@jochemauthorJan 10.2004 — #Do I understand well that the invalid code [b]i{content:""/*"}[/b] will confuse older versions of IE so they will stop reading the CSS any further, and that newer versions will choose the second [b]img.test[/b] rather than the first?

If older browsers stop reading indeed as of that invalid code, should the hack be all the way at the bottom of the CSS?

Cheers, Jochem ?

@PeOfEoJan 10.2004 — #it only stops it from reading the next block with that particular hack. There are tons of hacks, there is a small chart of some widely used ones in my signature. I keep my hacks at the bottom though just because... thats where they go... there really is no reason, I was just thinking if something goes horribly wrong (like a hack explodes kill some small children) the rest of the css will be intact. But that css for the hack is not actually invalid, the validator is just like whatever its valid ? ,

css: http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.quasi-ke.servebeer.com/layout/index.html

html: http://validator.w3.org/check?verbose=1&uri=http%3A//www.quasi-ke.servebeer.com/layout/index.html

@jochemauthorJan 10.2004 — #How important is it to use these hacks and how do I know when to use them? Would you know of a good online tutorial on this subject?

Cheers, Jochem ?

@PeOfEoJan 10.2004 — #THEY ARE NICE TO HAVE AROUND. YOU WILL KNOW WHEN ALL BROWSERS DISPLAY YOUR SITE FINE BUT ONE. LIKE IF OPERA AND MOZILLA DISPLAY FINE, BUT IE HAD SOMETHING A SMIDGE TO THE RIGHT OR SOMETHING THAT IS WHEN YOU USE A HACK. GENERALLY YOU USE THEM FOR 5 AND 5.5 BOX MODEL, THINGS WILL BE OFF 5 TO 30 PX WITH THAT THING SO YOU COVER IT WITH A HACK. YOU DO NOT NEED HACKS, BUT THEY HELP A LOT WHEN YOU HAVE IMAGES FOR BORDER ETC. THERE ARE PLENTY OF SITES DEVOTED TO THEM, JUST HUNT AROUND, YOU CAN FIND MANY LINKED ON THAT HACK CHART IN MY SIG. I KNOW MY CAPS LOCK IS ON, I AM JUST SEEING HOW OBNOXIOUS THIS IS.

edit: spelling corrected

@Paul_JrJan 10.2004 — #[i]Originally posted by PeOfEo [/i]

[B]ABNOCTIOUS (SP?)[/B][/QUOTE]
[i]Obnoxious.[/i]

@PeOfEoJan 10.2004 — #where would I be without paul my little spelling fairy ?

@Paul_JrJan 10.2004 — #[i]Originally posted by PeOfEo [/i]

[B]where would I be without paul my little spelling fairy ? [/B][/QUOTE]
Lol! ?

@AlbatrossJan 10.2004 — #[i]Originally posted by toicontien [/i]

[B]Hey, to each his own. There's nothing WRONG in my opinion with using framesets. I just don't prefer it. My question concerning only wanting users to bookmark one page is, why?

When they click on a bookmark, they've got to go through the site's navigation system to get to the page they actually wanted to bookmark. The whole point of bookmarking a page is to have the ability to go back to that page in one click. [/B][/QUOTE] I use framesets. Although on one Web site I am starting to drift away from it. I am planning on turning that particular Web site into an online sourcebook for a game I play (and yes, I do have permission from the copyright holder to do this ? ).

Frames are useful, as long as they are not abused or used improperly.

@PeOfEoJan 10.2004 — #[i]Originally posted by Albatross [/i]

[B]I use framesets. Although on one Web site I am starting to drift away from it. I am planning on turning that particular Web site into an online sourcebook for a game I play (and yes, I do have permission from the copyright holder to do this ? ).

Frames are useful, as long as they are not abused or used improperly. [/B][/QUOTE] I just find frames plain annoying. Iframes are much less annoying in my opinion.

@jochemauthorJan 11.2004 — #In the beginning of this thread I learned that Framesets shouldn't be used because search engines cannot find the pages they contain. Mark however told me that is not true. So, what is the truth?

Good to know that IE hacks are there to be used when needed. Thanks for the info.

If I am not mistaking, an ASP code can be recognized by the use of [b]<%....%>[/b] or the text [b]RUNAT="SERVER"[/b]. The include [b][/b] looks more like a JavaScript comment. What makes that this include method is ASP?

Isn't a webbot also some kind of include which can be used within a HTML file?

Cheers, Jochem ?

@jochemauthorJan 11.2004 — #There is indeed a little problem with the server hosting my site, but that is not the cause of the positioning trouble I am having with my asp-test. Would someone please be so kind to help me find the bug? The explaination of the problem and the downloadable zip-file are on page 5 of this thread. See the online result at www.alpinetrekking.com/asp.Thanx a million!

Cheers, Jochem ?

@PeOfEoJan 11.2004 — #well you need to tell us what the bug is. Framesets are indeed bad for search engines, they do not like them and it will drop you rating. I do doubth that they can see content (in iframes too) but even if they can, they still frown apon them. The asp, asp.net includes have the same syntax as ssi.

@jochemauthorJan 11.2004 — #The bug... that is to be found!! But what is causes is that the divs INDEX and TEXT are out of position. I think I must have made a mistake in either the stylesheet or the Welcome.asp file. I just can't find it.

But  is client-side, isn't it?

Cheers, Jochem ?

@PeOfEoJan 11.2004 — #<!-- is a comment <!-- # is a [b]server side[/b] include. SSI in asp. I did not see the bug when I downloaded it though. What are you going for though layout wise? 3 cols, 2 cols, 1 col top nav, what is the basic layout you want?

@jochemauthorJan 11.2004 — #I am not thinking in cols. Should I? The site simply exists of several positioned divs with content.

There is an outer div containing the outer images. Within that div there is a border div creating the black border. Inside that one are the divs containing menu, text etc.

Cheers, Jochem ?

@PeOfEoJan 11.2004 — #well hen I say cols, I mean like a left nav bar and right content etc. Think of it like a word doc, how is it oriented.

@jochemauthorJan 11.2004 — #The MENU div contains the main menu. It will open an asp-page containing a sub-menu in the INDEX div. This sub-menu is for navigation within the subject.

The point is that the INDEX and TEXT divs are now positioned outside the border, which is obviously not what I want.

Please note that I edited my last post!

Cheers, Jochem ?

@PeOfEoJan 11.2004 — #well look at the layouts on http://www.bluerobot.com. What if you modded those?

@jochemauthorJan 12.2004 — #Finally, I found the bug!!!

I closed one div-tag too many in the Menu.txt file.

Cheers, Jochem ?

Also in #HTML _↴

Upload Form HTML Code for a link Customise Scrolling Layers

Success!

Help @jochem spread the word by sharing this article on Twitter...

Tweet This

Framesets vs. CSS and i-frames

110 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Framesets vs. CSS and i-frames

110 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

110 Comments(s) _↴

Also in #HTML _↴