Basic Gameplan for a CSS based site

[LaserGecko]

Hi everyone,

I'm working on my first new website in quite awhile and definitely the first Web 2.0 one. Of course, I've been researching CSS and think that it's the way to go to provide the easiest way to control the look and feel of the entire site. I've always done my pages in a "code assistant type" program of one sort or another, rather than a WYSIWYG and am far from an HTML expert, but I do want to be able to fix things in Notepad. I've played around with Dreamweaver CS3, but was a bit frustrated by it. Now that I understand it all a little better, I think I know what I need to do. Please let me know if I am understanding this correctly:


The CSS files control the look of individual elements on the page. They do not control the content.
Frames bad, CSS good.
To use the examples on this site, copy the CSS to a style sheet and use the HTML code in the page while modifying as necessary for any directory issues for graphics, etc.
Each page has to have the header, columns, footer, etc. html code included in it. If you have ten pages, you have ten copies of the same information to change.
You can use Templates in a web design program to do this, then Search and Replace, or you can use Server Side Includes.


My server (hostmonster) allows SSIs, so I could have a "header.html" file and a statement like
<!--#include virtual="/header.html" --> in each page.

Can that "header.html" contain the DIV info or does the DIV have to go in the actual page to wrap around what the server inserts? I think it's the first case.

I'm pretty darned good with Filemaker Pro, so it's getting pretty tempting to make a new database to take care of all of this. It could automatically generate the "navigation.html" file when I add a new page.

Any thoughts? Am I reinventing the wheel here? It's not really going to be that big of a site, but I'd like to do it the right way.

When do you use a seperate .css file? Is it just a convenience thing?

If anyone knows a Fantastico script that can do this, let me know. I'm still learning my way around all this fancy new CPanel stuff.

Thanks in advance!

[TimFA]

Yes, you have it right.



Can that "header.html" contain the DIV info or does the DIV have to go in the actual page to wrap around what the server inserts? I think it's the first case.


I'm not totally sure, I'd guess yes since it works that way with PHP.



When do you use a seperate .css file? Is it just a convenience thing?


It sure is, you have one file (something.css), and you change one file and the entire site takes on the change.

[LaserGecko]

Thanks very much for the advice. I've been playing around with everything today and found that the SSI include command inserts the entire file verbatim. Very cool stuff.

I'm already starting to hate IE, so I must be on the right path!

Actually, I didn't word that part about the seperate sheets correctly. I've been using a seperate sheet all along, but have always wondered about the sites that use what looks like three standard names like "styles.css". It's just for organizing, right? Seems like it would be easier to have a master "styles.css" another one named "forms.css", etc.

Regarding the CSS Frames layouts. specifically http://www.dynamicdrive.com/style/layouts/item/css-left-top-and-bottom-frames-layout/

I had something halfway decent looking, then changed something and it all went in the crapper. (I'm still trying to figure out what I've done, actually.)

Is there a way to make the top "frame" take up the entire top of the window and not have the left frame extend past the bottom of the bottom frame? I changed the positions and sizes of everything to implement that and it all looked great, but then I saw the scroll bar on the main window.

I will try to find the non-screwed up example and post it.

Is this possible or should I put a graphic at the top of the left frame and make the top one appear to be continuous?

Actually, I just found the problem. I stripped out all of the style info from the template to its own file. Somewhere along the line, I deleted this bit:

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

It's working much better now!

[LaserGecko]

Arrrggg.

http://herpmist.com/csspage.shtml is the testpage.

Is there any way to keep it from sucking so badly when IE gets ahold of it? It looks pretty good in Firefox, but man, IE just destroys it!