how to simplify CSS website/pages please.

April 2, 2008 7:59 PM

I'm new to CSS. I've gotten some CSS I like and modified it so that now I have a site that is simple but all CSS. Now that I have all the pages identified, and the main page designed how we want it to look, I want to make the rest of the pages.

I know it is not proper to copy the main page and just change the part that varies, because when the menu changes, you have to modify all the other pages! (not good!)

So I need to make pages for the tabs. There is one tab that has something, but when you look at it, it is a text file and looks like crud.

I visualize even that tab loading below the top menu and next to the edge of the left menu area.

So, I have been searching and searching and never have found informtion on how to make a "template". In my programming days, I'd include other files, but not sure how to make that work here.

The other thing I need to consider for this is eventually, we want a login for the users so that they can only see their own credit. But for now, this is usable.

What I am wondering is if anyone out there knows what to do, if there is a step by step site that explains how to do this? I'm lost, but not incapable. :)

Thanks for any assistance. I really appreciate it.

posted by wildpetals to computers & internet (16 comments total)

You might want to look into PHP. CSS and HTML alone don’t give you the ability to create templates. What you need is a server-side programming language.
posted by ijoshua at 8:05 PM on April 2

Yep, PHP, or some server-side language, to create a server-side include. You might already have PHP running - to check, place <?php phpInfo(); ?> and only that code on a page, upload it to your server, and then check it out via a browser. If you get a bunch of stuff about PHP on the page, you're golden. Then, it's simple:

1. Create an "includes" directory.
   
2. Make a new document. Keep it completely blank.
   
3. Cut the code for the tabs from your page and paste them into the new, blank document.
   
4. Call the new document "tabs.html" and save it in the "includes" folder.
   
5. In the original document, where you cut the tab code out, write:
   <?php include("includes/tab.html"); ?>
   
6. Upload both pages, and use your browser to look at the original page.
   
7. In future pages, write the line for the include where you want the tabs. Done!
   

posted by Bora Horza Gobuchul at 8:26 PM on April 2

With plain html files, there is really no other easy way to do it, to be honest. Just make a copy of the front page, change the items that vary, change the coloring of the "tab" in the menu for that page, and you are done. Since you have only five other pages, making changes to the menu shouldn't be so bad. (Though I just finished an update project where I had to change the navigation interface on 200+ flat html files, which sucked, so in theory you are certainly correct.)

You really do want something like PHP instead, which will allow you to create a template file, with included headers and footers that are separate files. If you then wanted to change the navigation bar, you would change the header page only, and it would be reflected across your site.

To be honest, I would suggest that you look into a simple CMS like Wordpress, Textpattern or similar. It shouldn't be hard to adapt your nice design to a WP template, for example. Not only would that take care of the templating aspect, it would simplify content management for you as well.

But if a CMS is too much for what you want right now, then modifying your flat html files to .php files instead - with an included header file where your navigation bar resides - will do what you want.

Good luck!
posted by gemmy at 8:29 PM on April 2

Oh, sorry, one thing - you'll need to re-name the suffix of your original page from .html to .php to have this work. This is also true for the test page I mentioned to determine if your server is running PHP - call it "test.php" or something similar.
posted by Bora Horza Gobuchul at 8:29 PM on April 2

As a complete moron when it comes to building Web pages, I have found php to be a godsend when it comes to repeating information such as menus on multiple pages. A simple "include" can pull together any number of files that you can change in one location.
posted by dg at 8:34 PM on April 2

The best option is what Bora Horza Gobuchul mentioned.
Given below is hot to do the same thing using HTML.

http://www.boutell.com/newfaq/creating/include.html

I hope you can understand what I'm saying.

1. from the current web page just cut the HTML code for the menu.
2. Create a new file called "menu.html" and paste that code over there. (no need to add or tags)
3. Then include the file where the HTML code for the menu used to be.
(I can't add the include syntax to the post since it's not been properly. but follow the link for that)

Now it doesn't matter even if your site has 10 or 20 pages. When you want a new menu item just add it to the menu.html file.

Actually I would recommend you to create separate html files for header, footer and anything that's common between the sites.

I even included file called "stat.html" just before the closing body tag to add the Google Analytic code.

Just send me a mefi msg if u run in to any probz.
I'll be glad to help you out.
posted by WizKid at 9:06 PM on April 2

I have used both php includes and .shtml server side includes, and I much prefer php includes, its worth the extra effort to not have to deal with relative paths (if you use document root).
posted by [insert clever name here] at 9:26 PM on April 2

With just a tiny bit of PHP knowledge you can also set variables and use if statements so that the includes can vary slightly between pages, e.g. to highlight the current section in the nav bar.
posted by malevolent at 11:57 PM on April 2

They might mean a lower-level template, just a way to cut and paste content into a copy of a skeleton file and have all the pieces look decent. Just put a bunch of blank lines in the middle of the file with a [div id="body"] (with angle brackets, and a closing [/div] with angle brackets as well). So, two tags in the middle of a bunch of whitespace. Paste file and set the fonts in the CSS, which is something you learn in any tutorial straight off.
posted by rhizome at 12:59 AM on April 3

Echoing everyone that says Get A CMS. I've used Wordpress, it's got a great little support community and it's extremely flexible if you're not afraid to touch the PHP. But honestly, most CMS's will help you do exactly what you're saying.
posted by theiconoclast31 at 3:02 AM on April 3

On an unrelated point, why not test your template in Firefox using this HTML validator extension? Your HTML produced 11 warnings, all of which are really easy to fix. Before you break up your HTML into modules, you should fix these... the validator will explain exactly what needs fixing and how to do it.
posted by le morte de bea arthur at 4:19 AM on April 3

I've got a site where I've basically done what you want to do using PHP includes and some other very low-key scripting.

My approach is to create each page as products.php, contact.php, etc, and to include the header and footer information using something like this

<?php $title="Products";
include "./header.incl"; ?>

That $title= bit allows you to pass data into your header.incl file, which might contain the actual html HEAD element. So in header.incl, you would have a line like this:

<title>return engagement: <? echo $title; ?></title>

Now, this all works. But I agree it's probably better to use a CMS for this than to mess around with these includes and such. The only reason I'm doing it is because my site is old and crusty and not really worth migrating to a CMS.
posted by adamrice at 7:51 AM on April 3

I do validate. I have the valiator link on the site on the left for me to use to easily check. I just have not had the time to finish it up. :) thanks for noticing though. Also... I am trying the PHP suggestions, but my hosting is a windows server so that doesn't work. sigh......

I am loving everyone's input. Part of what I'm trying to do here is to learn how to do this before I go to a management system. I'm a geek.... what can I say.
posted by wildpetals at 8:31 AM on April 3

also worth noting, if you give the body tag on each sub page a unique id

ex:
<body id="home">, <body id="newItems"> ...

and then each menu item a unique id

ex:
<li id="menuHome"><a href="#" accesskey="1" title="">Home</a></li>
<li id="menuNewItems"><a href="#" accesskey="2" title="">New Items</a></li>

you can then style the tabs to automatically select for the page you're on.

for isntance:

#home #menuHome {background:#619E00}
#newItems #menuNewItems {background:#619E00}
posted by nihlton at 10:34 AM on April 3

Can I ask what this meant, [insert clever name]?

>I have used both php includes and .shtml server side includes, and I much prefer php includes, its worth the extra effort to not have to deal with relative paths (if you use document root).

I'm scratching my head.
posted by AmbroseChapel at 3:59 PM on April 3

windows server - not a problem.

review all the comments above about PHP, and use ASP instead.

ASP include (or whatever the equivalent is) works the same.

Best part, the include files for your project can be simple HTML inside, no need for actual ASP code other than wrapper tags around the HTML.
posted by MTCreations at 7:18 PM on April 30