Forum Home
Press F1
 
Thread ID: 134711 2013-07-31 10:53:00 converting frames to either CSS or PHP? John L. (5716) Press F1
Post ID Timestamp Content User
1350330 2013-07-31 10:53:00 I have a partially built website on my local drive that I designed in dreamweaver CS5. Works fine on local server.
Sounds good so far but I did it in HTML frames.
I went to publish it to my site at my web hosting company, FTP uploaded fine but man was the page mucked up. I'm sure the problem lies with the fact that it was done with frames.
So now I need to convert it to either CSS which will probably work
or preferably to PHP which my web hosting company (Openhost) prefers.

Any converters out there somewhere to save me a lot of new learning?

John L. 		John L. (5716)
1350331 2013-07-31 10:55:00 PHP, CSS and HTML all work together to create a website, it's not one or the other :)

Can you link to the original website, if its online? I'll poke around and see what the best solution is :) 		pcuser42 (130)
1350332 2013-07-31 22:13:00 PHP, CSS and HTML all work together to create a website, it's not one or the other :)

Can you link to the original website, if its online? I'll poke around and see what the best solution is :)

Thanks but no I can't at this stage. I have taken it down and attempted to use one of their templates temporarily.
I asked them can I alter the source code of one that almost suits. I could have easily done this but I was advised that yes I can but everytime I publish it will just be overwritten with the default code again. No help there. They recommended I try an opensource SCM as in wordpress. I experimented with uploading the worpress app and very quickly found it will not do what I want.
I don't want a blog. I want to design and publish a full business website.

FWIW below is the top level Frameset Source code:
As I say works fine on my local server but not on theirs?
What I actually get displaying on the remote server is the index.html frame only. Taking up the full screen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"www.w3.org
<HTML>
<HEAD>
<TITLE>3 column frameset document</TITLE>
</HEAD>
<frameset cols="*,70%,*" bordercolor="#000000">

<frame src="left frame.html" />

<frameset rows="*" cols="200,*" framespacing="0" frameborder="no" border="0">
<frameset rows="200,*" cols="*"border="0" frameborder="no" >
<frame src="logo.html" name="leftFrame" scrolling="none" noresize="noresize" id="leftFrame" title="Index" />
<frame src="index.html" />
</frameset>

<frameset rows="200,*" frameborder="no" border="0" framespacing="0">
<frame src="header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="Header" />
<frame src="page.html" name="mainFrame" id="mainFrame" title="mainFrame" />

</frameset>

<frame src="UntitledFrame-1">
</frameset>

<frame src="right frame.html" />

</frameset>

<noframes></noframes>

</HTML> 		John L. (5716)
1350333 2013-07-31 22:34:00 There's not really a 'conversion process' as such to migrate away from the evil that is framesets. There are a number of ways to accomplish the same thing (and all far superior to framing), but which is best for your specific situation depends on exactly what you need to achieve. Why were you using frames - did you simply want to have a static header/menu/something with loading the body content separately? inphinity (7274)
1350334 2013-08-01 03:49:00 There's not really a 'conversion process' as such to migrate away from the evil that is framesets. There are a number of ways to accomplish the same thing (and all far superior to framing), but which is best for your specific situation depends on exactly what you need to achieve. Why were you using frames - did you simply want to have a static header/menu/something with loading the body content separately?

Thanks for your input.
My initial need was for the information parts of the page to NOT expand right to the outer parts of the user's screen hence the Columns formatting of *,70,* this ensured that the page was always centred on the user's screen and didn't totally fill it no matter what the monitor size or what configuration the user's display was set at or opened at.

The next need was for the graphic logo, the banner and the menu system to remain at all times and for pages to be interfaced in and out of the display via the menu item selected.

The logo was to be top left of the display, set at whatever % I decided at final time of building for it to be. My initial setup which worked well on a temporary basis was for it to be 200px X 200px. This would be changed to % of display based when I was ready.

The Banner which had the site name and the slogan embedded in it was to take up the rest of the top of the display at the same % of the vertical screen.

The Menu system was vertical under the graphic logo and was the same width. This enabled sub menus to be displayed on hover without any overlapping.

As you can envisage this was very easy to achieve in frames and framesets. This was also, back when I first learnt, (yes back in the dark ages LOL) one of the common ways to achieve this.

Any ideas how to modify my frames code to achieve the same?

John L. 		John L. (5716)
1350335 2013-08-01 03:52:00 CSS can do all that much more efficiently :)

I'm on mobile at the moment, but I'll post some CSS rules to achieve that (I assume you've used CSS before and can link a CSS file?) 		pcuser42 (130)
1350336 2013-08-01 04:15:00 CSS can do all that much more efficiently :)

I'm on mobile at the moment, but I'll post some CSS rules to achieve that (I assume you've used CSS before and can link a CSS file?)

Thanks. Yes I am familiar but not an expert with using CSS but if you can point me in the right direction I'm sure I can find my way there.

John L.

Just as an interesting aside I found out about a wonderful group of what I think (in my opinion only) are possibly scammers.
I have been using openhost for a few years now but just their email service. I wasn't ready to do the work for a website.
I looked around at prices and found one hosting site that the prices were wonderful. 247 Christchurch
I then played with their web builder and found I could make things do pretty much what I wanted it to do because it allowed HTML editing of the code produced by it.
I thought absolutely fabulous. This is where I want to be. I had a query and so e-mailed them. I did get a reply to this. Which gave me the info I needed.
On their website there was an offer to transfer my domain name for free. I found out immediately that this form didn't work. So I rang them. got an automated answer machine. No problem left message but got no call back.
Hmm OK. I'll use the link in the e-mail to publish the build. Uh Oh. Invalid security cert even before getting as far as publishing trial. Now I'm getting suspicious.
I left two more messages over different days on the answer machine indicating I was considering shifting providers but needed to discuss some things with them.
No callback reply to either.
By this time I'm really getting both very frustrated and more and more suspicious.
When I arrived home after the weekend I did some further investigating and discovered a number of complaints about them.
Just shows no matter how good something looks on the surface even in this industry do some thorough checking before parting with money or ID details. 		John L. (5716)
1350337 2013-08-01 05:34:00 (Note: the following uses only HTML4 tags: HTML5 has more specific tags for these purposes)


Thanks . Yes I am familiar but not an expert with using CSS but if you can point me in the right direction I'm sure I can find my way there .

Okay, to start off you'll need to create a CSS file which every page will point to - I'm calling it default . css . On each page, link it with the following HTML in the <head> tag (change the path if necessary):


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


My initial need was for the information parts of the page to NOT expand right to the outer parts of the user's screen hence the Columns formatting of *,70,* this ensured that the page was always centred on the user's screen and didn't totally fill it no matter what the monitor size or what configuration the user's display was set at or opened at .

Assuming you have the content in a <div>, add an ID to this div like so:


<div id="content">
<!-- main content -->
</div>


Now, in your CSS file, add the following rule:



#content {
width: 70%;
margin: 0 auto; /* this centres the container */
}



The next need was for the graphic logo, the banner and the menu system to remain at all times and for pages to be interfaced in and out of the display via the menu item selected .

This is where PHP comes in :)

Take your original header HTML file and strip it down to just the image and a container <div>, like so:



<div id="header">
<img src="header . jpg">
</div>


Now on each individual page, insert the following PHP code:



<?php require("header . html"); ?>


Do the same with the menu, and ensure its container <div> has an ID of "menu" .

Note that this won't work on your local machine as PHP is a server-side language; you'll have to upload to the web server to test it .


The logo was to be top left of the display, set at whatever % I decided at final time of building for it to be . My initial setup which worked well on a temporary basis was for it to be 200px X 200px . This would be changed to % of display based when I was ready .

IIRC aligning to the top left is the default so nothing needs to be done here . :)


The Banner which had the site name and the slogan embedded in it was to take up the rest of the top of the display at the same % of the vertical screen .

Simply ensure its <div> container has the same width as the main content <div> . :)


The Menu system was vertical under the graphic logo and was the same width . This enabled sub menus to be displayed on hover without any overlapping .

Let's say your menu looks something like this:



<div id="nav">
<ul>
<li><a href="one . html">Page One</a></li>
<li><a href="two . html">Page Two</a></li>
<li><a href="three . html">Page Three</a></li>
<li><a href="four . html">Page Four</a></li>
</ul>
</div>


It's hard to tell exactly what needs to be done, especially without testing, but I'd start with the following CSS:



#nav {
float: left;
width: 250px;
margin: 5px;
}



As you can envisage this was very easy to achieve in frames and framesets . This was also, back when I first learnt, (yes back in the dark ages LOL) one of the common ways to achieve this .

These days frames are the worst possible way to achieve this as they are not user friendly, and also do not scale well to mobile (which needs to be accounted for in 2013) .

Once you've done this, if possible can you upload to a test server or somewhere so I can have a look to see if anything else needs doing? :) 		pcuser42 (130)
1350338 2013-08-01 06:38:00 Thanks pcuser42. I'm now printing your post out and will start work ASAP.
By the way I love your Avatar. I'm a corgi owner and that looks so much like one.
John L. 		John L. (5716)
1350339 2013-08-09 01:06:00 Hi again,
Thought I'd let you know where progress is.
Because I am working very slowly on changing the framesets approach to CSS HTML format I have done some alterations to the original framesets approach which ensures that the temporary top level page displays almost as it should. At Least on a PC with the browser fully maximised. Obviously it isn't optimised for tablet or PC. While it does display well enough to read it in a restored size browser window it isn't the best.

By testing on PCs other than my own I have also discovered that the beautiful flowing script I used in my banner doesn't display on others as it does on mine. I think because its not a truetype font and so unless it is loaded on the client's machine the banner text defaults to a plain print font. I'll therefore have to change this.

Also the page with the temporary info should have a blue faded to white from the top background, similar to the banner and the menu. I think I know where this has gone wrong.
FYI the website is http://k9college.co.nz/

Now i's back up I'm slowly working/experimenting at making the required changes on my local server to eventually upload. Trying to learn as much as possible as I go.
At least now it's back up the frameset approach makes it easy to see what each frame's code is. 		John L. (5716)
1