Frame to CSS

[MTAKASHI]

I have started designing my web pages using MS Frontpage and using Frames. then I saw many articles/advices that I should use CSS instead.
So, I found a 3-column CSS at http://www.pmob.co.uk/temp/3colfixedtest_explained.htm
and from there I created a test.css and test.htm files. See attached files (I saved them as TXT files because this site does not seem to allow css or htm file upload).

There are some problems:
1. Using Frontpage 2002, sp3, I opened the test.css and changed some
colors. At Normal view of test.htm to which test.css is linked, it shows
texts, not like preview. Normally Normal view shows a screen like
Preview, but you can edit the content. Why doesn't this work?
2. In preview screen, the left column shown the specified background
color only at the top portion where there is a text. Can that BG color
stretch all the way down?
3. When reviewed in Firefox 2.0.0.9, it does not show exactly like
preview. why?
4. I want to have the footer always at the bottom of screen and the
content within the main body scrolls if it is long. How can I do it?
5. I want to place hyperlinks in the left column, and the result of
clicking shows up in the main body. The result in the main body is a
htm file and it should be created with an external css link. It also has
hyperlinks and they show results, which should be also a htm and css
external link, in the main body, too. How to do these? I was told that I should create different pages for them. That is fine with me. but how to crete css pages where business name at the header and hyperlinks at the left column in such a way that they are consistent throughout pages and can be changed easily via CSS? When I type in some texts in test.css's header for example, it does not show up in test.htm. I am a beginner in CSS.

[markbrown4]

Hi MTAKASHI, and Welcome to Sitepoint

The first three queries are to do with Frontpage's rendering in the preview pane, Basically Frontpage cannot be used to predict what the page will look like at all in browsers.
Frontpage is really really outdated now, and I highly reccomend using Dreamweaver if you are looking for a wysiwyg tool or using a good text editor with syntax highlighting like Crimson Editor (there are many free online tools)

4. I want to have the footer always at the bottom of screen and the
content within the main body scrolls if it is long. How can I do it?

There is a FAQ at the top of the CSS forum on sticking footers at the bottom of the window, and here's another one of Paul's example pages that seems to do what you are wanting.
http://www.pmob.co.uk/temp/fixedfooter_mine.htm

5. I want to place hyperlinks in the left column, and the result of
clicking shows up in the main body.

Olny frames do this type of behaviour and they should be avoided at all costs
Create separate pages and load the whole page again,

That is fine with me. but how to crete css pages where business name at the header and hyperlinks at the left column in such a way that they are consistent throughout pages and can be changed easily via CSS?

All your pages can share the same stylesheet and have access to the same styles, e.g.

#leftnav a { color: green }

All you need then is to give the same id to the leftnav's that you want to look the same. e.g.

<ul id="leftnav">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
</div>

On any page that is linked to the stylesheet wherever a link is found somewhere within an element with id="leftnav" the styles will be applied.

Hope it helps

[Paul O'B]

and here's another one of Paul's example pages that seems to do what you are wanting.
http://www.pmob.co.uk/temp/fixedfooter_mine.htm

That example is a little old Mark and this one is an updated one that runs in standards mode.

http://www.pmob.co.uk/temp/fixed-header-footerx1.htm

MTAKASHI if you want the header, footer and navigation html to be duplicated on many pages then you should also look at Server Side Includes (SSI).

http://uk2.php.net/include/
http://httpd.apache.org/docs/1.3/howto/ssi.html

Also read the CSS faq as it contains a lot of information that you will need to know before you can embark on all of this if you want to do it the right way. Then look in the html forum and read the three stickies at the top to understand about doctypes and valid code.

There are no quick fixes if you want to do this right and you must understand the medium you are choosing. Frontpage users often think its their right to put web pages up with little effort and that's OK for the kid in his attic, but if you want a professional product then you need a professional approach and take the time to learn the basics.

CSS is about separating presentation from content so you should avoid using presentational mark up such as font tags (align="") and the like and i notice you have peppered some of these in the mark up already.

The marquee tag isn't well supported cross browser and is disliked by 90% of web users because it is distracting so be warned if you use it. I also note that you have lost the doctype from your code and have also mixed in html within your stylesheet. These are fundamental issues that you need to learn first or you will just keep running into problems.

The faq as I mentioned above will cover most of these issues so take the time to study.

Hope that helps

[MTAKASHI]

Thanks for your reply. Re: your example of #leftnav, I understand the css controls the appearance of the leftnav.. color, font, etc.... but in my case and in many cases I see at various web sites, the header, nav bar and footer contain same contents, such as the same logo and company name at the header, same set of href's in nav bar, and a copyright notice at the footer for example. If I keep generating new pages with different main text body, but the same header, nav bar and footer, then, if I want to modify the logo, or any element within the header, nav bar and footer, I have to go to and change all separate pages. Is there anyway to simplify this? For example, any way to create a header.htm file and it shows up in all pages which specify that file as a header, so that if we need to change the content of the header, I only need to change that one file header.htm?

Hi MTAKASHI, and Welcome to Sitepoint

The first three queries are to do with Frontpage's rendering in the preview pane, Basically Frontpage cannot be used to predict what the page will look like at all in browsers.
Frontpage is really really outdated now, and I highly reccomend using Dreamweaver if you are looking for a wysiwyg tool or using a good text editor with syntax highlighting like Crimson Editor (there are many free online tools)

There is a FAQ at the top of the CSS forum on sticking footers at the bottom of the window, and here's another one of Paul's example pages that seems to do what you are wanting.
http://www.pmob.co.uk/temp/fixedfooter_mine.htm


Olny frames do this type of behaviour and they should be avoided at all costs
Create separate pages and load the whole page again,

All your pages can share the same stylesheet and have access to the same styles, e.g.

#leftnav a { color: green }

All you need then is to give the same id to the leftnav's that you want to look the same. e.g.

<ul id="leftnav">
  <li><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
</div>

On any page that is linked to the stylesheet wherever a link is found somewhere within an element with id="leftnav" the styles will be applied.

Hope it helps

[MTAKASHI]

Thanks for your reply. I studied a tutorial of css at http://www.westciv.com/style_master/...ial/index.html, and I learned a lot there.
About SSI, is this the only,or best way to repeat a header, footer, etc thorough multiple pages? I know nothing about SSI. Any tutorial I can study?

That example is a little old Mark and this one is an updated one that runs in standards mode.

http://www.pmob.co.uk/temp/fixed-header-footerx1.htm

MTAKASHI if you want the header, footer and navigation html to be duplicated on many pages then you should also look at Server Side Includes (SSI).

http://uk2.php.net/include/
http://httpd.apache.org/docs/1.3/howto/ssi.html

Also read the CSS faq as it contains a lot of information that you will need to know before you can embark on all of this if you want to do it the right way. Then look in the html forum and read the three stickies at the top to understand about doctypes and valid code.

There are no quick fixes if you want to do this right and you must understand the medium you are choosing. Frontpage users often think its their right to put web pages up with little effort and that's OK for the kid in his attic, but if you want a professional product then you need a professional approach and take the time to learn the basics.

CSS is about separating presentation from content so you should avoid using presentational mark up such as font tags (align="") and the like and i notice you have peppered some of these in the mark up already.

The marquee tag isn't well supported cross browser and is disliked by 90% of web users because it is distracting so be warned if you use it. I also note that you have lost the doctype from your code and have also mixed in html within your stylesheet. These are fundamental issues that you need to learn first or you will just keep running into problems.

The faq as I mentioned above will cover most of these issues so take the time to study.

Hope that helps

[Paul O'B]

If I keep generating new pages with different main text body, but the same header, nav bar and footer, then, if I want to modify the logo, or any element within the header, nav bar and footer, I have to go to and change all separate pages. Is there anyway to simplify this?

I have answered this twice for you now and the links are already in my post above.

You can use Server Side Includes (SSI) which are independent files that are called into the page on loading. You just update the one file and your whole site reflects the changes made. You just make individual html files for the common sections of your sites such as headers, footers and nav.

Read the two links I put on my previous post for more information and then google "SSI" for millions of more examples

[Paul O'B]

About SSI, is this the only,or best way to repeat a header, footer, etc thorough multiple pages?

You can do a similar thing with PHP includes but it is basically the same approach.

The only other methods are to use and editor such as Dreamweaver that can create pages based on a template. This allows you to make global changes by adjusting just the template. The downside is that you then need to upload all the pages of the site that are affected unlike includes where you just update the includes themselves.

[MTAKASHI]

I have created a CSS file and header, navbar and footer htm files as well as shtml files for insertion. Some of my web pages I created sometime ago utilized Frames and tables to list projects, then, when you click any one of the listed projects, it goes to the selected project page, which shows a series of thumbnail pictures and clicking it shows a large image on the same page. Please see attached files. I can go ahead to revise these files and remove Frames and then set up to insert the htm file into a shtml file. Is it still appropriate to use tables in the similar way for these purposes? Or any other better ways to achieve the same? If possible, I would like to control each box(table) sizes showing photos and and their layouts globally. Is is possible? Is it what CSS can do?

[Paul O'B]

Hi,

Its hard to see from those empty html pages exactly what you want but I would suggest you look around and see how others have made image galleries and then you can get an idea of what can be done.

You can create a gallery without tables but it depends on exactly what effect you are going for. If its a simple list of images and captions and description then css can do this easily.

CSS play has a lot of advanced galleries that show the sort of thing that advanced CSS can do.

You may need to break your questions down into one topic at a time as I can only answer this in general terms. It does seem however that firstly you should look into CSS in a little more detail so that you understand what you are trying to achieve and learn the means to accomplish it.

Sorry to be so vague