[Solved] CSS code dilemma

[dongeorgio]

Question:
I am creating a page using a CSS template. I need the page divided into three invisible sections:

1. Logo and top links
2. Content
3. Footer

The purpose of this is so that I can change the logo/top links and footer ONCE and have that change AUTOMATICALLY reflected on EVERY page on the site. Otherwise, we’ll have to make any changes 200-300 times, which obviously isn’t feasible.

In the old days, this was achieved with simple HTML frames. Things are more complex now, and I’m not sure how we would use frames for HTML + CSS or if some other technique needs to be applied. I did try it the old school way and it looks awful.

The top links bar uses pulls from both the HTML and CSS files in order to work, so I cannot just point every page to the same CSS file – that alone will will not do it.

[virtual]

You can do that with a php include file. Read this http://www.tizag.com/phpT/include.php. The only problem with this is that you have to rename your files to .php and then to test them locally you will need to install WAMP, XAMP or MAMP depending on your OS. You can of course put them in a separate folder and test live online while you are developping.

[Bob]

Yeah I’d go with virtuals option, use php include. Basically, you just make 1 header file, 1 footer file, and with just 1 line of code you include those files in your html. So when you want to change the header, you only have to change the header file, and not those 300 pages.

[ImpInaBox]

Not sure how you’d do this in CSS. There is the CSS content feature but I’m not sure how well supported this is in different browsers and I can see it being an SEO problem. The only other way I can think of at present is to use background images but that doesn’t seem very satisfactory either.

There is another alternative – almost like the virtual’s PHP solution but not quite and that is to use SHTML which will let you include files. As far as I’m aware the including file and the included file are all basically HTML with a few extra juicy bits but I’ve never used SHTML in anger so I don’t know for sure. You might also need something set up on your server to handle it. Anybody else used SHTML for real?

[TheDoc]

We have a couple older clients who are still on SHTML using server side includes (SSI). But nowadays if we need to have an include we roll with good ol’ php.

[dongeorgio]

I spent all of yesterday trying to figure out how to create a PHP Include header file. I’m obviously doing something wrong somewhere.

Basically, I want the header to consist of our logo and the links bar. The links bar pulls from both the HTML and CSS files to work.

1. What exactly do I need to put in the PHP Include file? This, I suspect, is where I’m going wrong.

2. Does every HTML file need to be renamed .php? (I doubt this is the case, but I read some confusing wording somewhere that seemed to indicate as such. I figured I’d better ask just to be on the safe side.)

3. TheDoc posted this: < php include('link-to-file'); ? > (Without the spaces between < and >). So, I would include something like < php include('header.php'); ? > in (for example) index.html and whatever other files I need to display the header?

Thanks again,
Don

[virtual]

1 – This page walks you through it step by step
http://www.visibilityinherit.com/code/php-includes.php

2 – All the files that contain the need to be renamed to .php otherwise they will not parse the php code and your menu in this case won’t show up.

[dongeorgio]

Thanks so much.

Another quick question: Virtual, your linked tutorial shows how to add HTML links to a PHP file. Can CSS coding be added to the same file as well? I’m asking because my links bar uses both HTML and CSS to function. I tried adding both before to the same PHP file, but I couldn’t get it to work. I’m assuming that was human error on my part, so I’ll retry it later. But if there’s any advice you could give me, it would be much appreciated.

Thank you again to everyone here for all your help. I am a novice, as you can probably tell, and I’m truly grateful for the assistance I’ve received thus far.

Don

[virtual]

A php file can contain the same as an html file but it also contains php code which is parsed by the server. So basically you take the html file you are using with all it’s contents and links to css and/or js files, cut out the parts you want to use as includes and do as it says in the tutorial. Add the php includes code and then save it out as “whatever.php”.

The css code should be in a separate file and linked to from the “head” section of your file so there is no need for you to use php include for it. You should not be using css inline unless it is a one off change on one page only. This is how you link to your css file.

All your css goes in this “main” file which is in a folder called “css”.

[dongeorgio]

Success!

Thank you all SO much. You guys are AMAZING!

You have no idea how much I appreciate the help you’ve given me.

Don

[Author]

Posts