Alternative to frames! Grrrrr!

@lankkeSep 17.2006

Hi there

I’m having an ongoing problem with a site I’m trying to build, I can’t seem to get the effect I want and it is really driving me nuts-

Basically, I have a rectangular border (which is a bunch of images that I have arranged as layers in a rectangular shape). Inside that rectangular space I need to be able to see an external html document (like a frame would allow). I will have links outside of the rectangle which will change the page displayed on the inside of the rectangle…. I hope I have made some sense.

The problem is, I can’t think of a way to do this without making a mess of the web page. I thought about setting the retangular border (the collection of gifs) as a background… but I some of the images are animated.

I would really appreciate some help here… if someone can suggest an alternative language to use, I will try doing so. I have only really used HTML and CSS styles sheets though, there must be a solution here somewhere.

Thanks guys

Lance

PS I forgot to say that the links that will change the page inside the rectangle, are included in the “border collage” of pictures and I want them to remain there. ie… I do not want a navigation bar…. I want to use the page as a navigation page with the content inside the rectangle being the “clicked links content”

to post a comment

HTML

17 Comments(s) _↴

@the_treeSep 17.2006 — #O.k. we'd like to know about the server that this site is to run on. Is it Apache, IIS or some other brand of webserver? Does it support PHP, ASP, Perl or some other scripting language?

It would also be pretty nice to see what your aiming for, if the site is currently online then linking us to it would be great, if not, then a similar site that uses whatever it is that your trying to do.

@lankkeauthorSep 17.2006 — #Hey thatnks for your reply

Yeah the sever supports php5.... I have the layout in gif format ..l. can I send it straight to you??

@the_treeSep 17.2006 — #O.k. that's probably enough to know. Let's say you had a file called [i]template.php[/i] which looked a little something like this:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title><?php echo $page_title ?></title>
 </head>
 <body>
 <!-- whatever the rest of the page looks like, around here, I guess. -->
 <div style="width: 400px; height: 400px; overflow: auto; margin: 20px; border: 1px solid #000;">
 <?php echo $page_content ?>
 </div>
 </body>
 </html>[/code]

You could then have lots of files with [i].php[/i] extensions (such as [i]index.php[/i] or [i]about.php[/i]) that form the actual contents of your site and they would look like this:

[code=php]<?php
 
 $page_title = 'My site: index.'
 
 $page_content = <<< CONTENT
 
 <p>This would be some content, I guess</p>
 
 CONTENT;
 
 include 'template.php';
 
 ?>[/code]

That should pretty much cover what your looking for, you can learn more about how to use PHP at [url=http://php.net]php.net[/url].

@lankkeauthorSep 17.2006 — #hey man

that helps a hell of a lot.

i have been trying to learn php ... but starting from scratch isn't an option for me just now.

I appreciate the suggestion man, it puts me in the right direction!!!1

Thanks again

@lankkeauthorSep 19.2006 — #Notice: Undefined variable: page_content in c:program fileseasyphp1-8wwwtemplate.php on line 14

I keep getting this message in the box where I want my content... any suggestions?

@the_treeSep 19.2006 — #If you could show us the whole code of the page your browsing to and of your template.php page, then I'm sure it wouldn't be difficult to solve.

@lankkeauthorSep 19.2006 — #This is the template I want to use... right after this I'll put the code to one of the content pages.... I apologise in advance as I am a green stick newbie to this... My Html skills aren't so hot either.

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title><?php echo $page_title ?></title>
 </head>
 
 <body>
 <div id="juicebox" style="position:absolute; left:69px; top:59px;"><img src="images/locksteady-info.gif" /></div>
 <div id="logo" style="position:absolute; left:345px; top:65px;"><img src="images/logopieni.gif" /></div>
 <div id="reuna" style="position:absolute; left:307px; top: 87px;"><img src="images/reuna.gif" /></div>
 <div style="width: 600px; height: 400px; position:absolute; left:355px; top:100px; overflow: auto; margin: 20px; border: 1px solid #000;">
 <?php echo $page_content '['page_content']' ?>
 </div>
 </body>
 
 </html>
 [/code]

...and here is one of the pages that will be the content inside the box (the div with the php in it).... this particular page was built using the dreamweaver gui.. sorry about the messy java script at the top

[code=html]<head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript" type="text/JavaScript">
 <!--
 function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }
 MM_reloadPage(true);
 //-->
 </script>
 <style type="text/css">
 <!--
 .style1 {
 font-family: "Courier New", Courier, mono;
 font-size: 14px;
 }
 -->
 </style>
 </head>
 
 <body>
 [code=php]<?php
 
 $page_title = 'My site: index.'
 
 $page_content = 
 "
 <div id="pic" style="position:absolute; "></div>
 <div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:3"><img src="images/hupparit1.gif" width="324" height="398"></div>
 <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:2; left: 395px; top: 10;">
 <p align="left" class="style1">Vetoketjuhuppari a.k.a loimi</p>
 <p align="left" class="style1">J&auml;mptist&auml; kierr&auml;tyskankaasta valmistettu vetoketjullinen huppari. Yksi tasku. Tilava vuoritettu huppu. Resorit hihansuissa ja helmassa. M-koon pituus olalta helmaan n. cm, leveys sel&auml;st&auml; cm, L-koon vastaavat mitat cm ja cm. Saatavana my&ouml;s kokovuorella.</p>
 <p align="left" class="style1">Hinta:</p>
 <p align="left" class="style1"> ilman vuorta 99&euro;</p>
 <p align="left" class="style1"> vuorillisena 119&euro; </p>
 </div>"
 
 
 
 CONTENT;
 
 include 'template.php';
 
 ?>[/code]

</body>

</html>

[/code]

I hope to learn a lot from this... thanks once again for all your help

@the_treeSep 20.2006 — #<?php echo $page_content '['page_content']' ?>[/QUOTE]Should be:[code=php]<?php echo $page_content; ?>[/code]

@TaschenSep 20.2006 — #First things first: layout your template and include your content file (not content and include template).

You need to wrap your content correctly (don't forget the semi colon to end a variable):
[code=php]$page_content = "some content";[/code]

There are two ways to wrap a variable

1: With single quotes 'content' faster but quotes need to be escaped before a variable can be added to the string like so - $content = 'some content'.$extras.'the rest of the content';

2.With double qoutes "content" - variables can be added without escaping the wrap.

If you use double qoutes within double qoutes (for example when declaring a class) you will need to escape them first using . Therefore:

[code=php]$page_content = "<div id="pic">content</div>";[/code]

Begin there using the classic echo 'hello world'; exercise.

@dthatsmeSep 20.2006 — #Can you do something like this without using PHP? I'm trying to replace my framed classified site and my pages are automatically generated as HTML files.

@the_treeSep 20.2006 — #First things first: layout your template and include your content file (not content and include template).[/quote]Why not? Loads of sites, including mainstream CMSs do it.There are two ways to wrap a [string]...[/quote]I'm not the #1 fan of the herdoc syntax but I don't resort to denying it's existance.
Can you do something like this without using PHP?[/quote]Well practically any server-side scripting language can handle something this trivial but if nothing is avaliable then you might want to look into XLST which, to be honest, is a fairly esoteric technology, but it is powerful if you want to use it.

@dthatsmeSep 20.2006 — #I have no clue what XLST is. I've never heard of it.

I'm getting the impression that I'm going to have to stick with frames. Since the html files are automatically generated, I can't use include files. Unless I can get them to be generated as PHP...

@the_treeSep 20.2006 — #See what I mean? Esoteric. You can check it out though: [url=http://www.w3schools.com/xsl/default.asp]w3schools.com/xsl/[/url].

What do you mean the HTML files are automatically generated? Surely there'd be some kind of server-side process behind that as well?

@dthatsmeSep 20.2006 — #I work for a newspaper and we use a company called Brainworks to handle our classified ads. They generate an HTML file for each catagory to be placed on the web.

@lankkeauthorSep 20.2006 — #the tree...

you are the man!

thanks for your help bro.... i might hit you up later on if i still have trouble... you seem to be the best teacher so far i've come across.... ill send you my band's cd free when we get signed!!!! LOL

Lance

@the_treeSep 20.2006 — #Sweet, gotta love new music. But seriously, these forums are here to help, don't be afraid to ask anything. ( So long as you search for an awnser first. ? )

[I]dthatsme[/I], IFRAMEs might be right up your street, look them up.

@lankkeauthorSep 26.2006 — #Hey the Tree!!!

Thanks to you my site is almost finished. I do have one problem.... maybe you could help...

On one of the pages I have an image and some text. I want to be able to swap the image with "back" and "next" buttons... preferably in php.

The problem is... I have been through many sites offering way over the top photo galleries... when all I want is for the user to have "next" and "back" buttons, to change through 15 gifs I have in seperate folder (that seperate folder is in the images/ file).

I hope I have made sense!!!!

Thanks

Also in #HTML _↴

Why doesnt the poinet change to a hand on my buttons?Pure Text Need Entry Box (field)

Success!

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

Tweet This

Alternative to frames! Grrrrr!

17 Comments(s) ↴

Also in #HTML ↴

Success!

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

Social

Version

17 Comments(s) _↴

Also in #HTML _↴