Converting to CSS

[H4KSY]

Hi All,

I am currently redesigning a site and removing the frames in hope to get higher SERP.

At current I have a nav-bar on the left with content loading in the right hand frame.

Now I am removing the frames and using CSS instead I want to know how I can keep a common Nav-Bar on each page without the need for repeating code?

Is there some way to create one page (nav-bar) & then just link to it from the other content pages to avoid having to change every page each time I add a link!

Thanks,

R.

[paulhiles]

Sounds as though your main problem is going to be site maintenance. CSS will significantly reduce the amount of formatting that you need to do... but the use of 'includes' can solve problems such as updating common elements on a page like your navbar. Instead of changing that menu on each and every page, you simply update the menu include file.. and hey presto! your whole site has the new menu! :o) So.... if your hosting allows either PHP or ASP then using includes is definitely the way forward.

By the way, we're always looking for contributions to the Table to CSS/XHTML discussion.. if you think your site might be a suitable candidate, why not contact myself or mikmik? or you can simply post the details here... giving a URL and a brief summary of how you envisage the new layout to appear.

Cheers,

Paul

[H4KSY]

Cheers Paul,

It seems our ISP does support PHP. I have not used this before but have just had a quick look on the net. I can see how to generate pages but not how to insert them into other pages??

Is there no way to achieve this using HTML/CSS ??

Thanks Again,

R.

[sijpie]

Yes it is very easy, I think Paul assumed you knew:

Say that you store all your css files in subdir css, and you have one for the nav bar called navbar.css then:

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

Your css style sheet can only include css statements. No HTML is allowed.

So where your current html looks like

<style>
... css statements ...
</style>

everything between the <style> tags can be moved to the css style sheet. The <style> tags in the html are then superfluous and can be removed. Any other inline styling can also be moved to a style sheet if you wish, and just called up using a class=xxx statement.

[paulhiles]

It seems our ISP does support PHP. I have not used this before but have just had a quick look on the net. I can see how to generate pages but not how to insert them into other pages??

Is there no way to achieve this using HTML/CSS ??

The only way to include pages into other pages in HTML is by using frames or iframes. What I was suggesting was that you break down your page design into elements. Decide which ones are fixed and repeatedly called, and code them as separate 'include' files. This technique of using 'include' files necessitates server-side scripting.. i.e. PHP or ASP. If your host allows PHP, then you need to do a crash course in PHP. The basics aren't too difficult, and the use of includes is one of the easiest parts to understand.

I'll give you a couple of links to get you started.
Sample (SSI / PHP) Template
PHP - Includes and Templates with PHP
PHP Include files
Maybe other members here would take the opportunity to visit your site and suggest how you might go about making your code more modular and easy to maintain?

sijpie (Jaap) has demonstrated how to link all of your pages to just one external stylesheet... so that's one positive step in the right direction! Post back here if there's anything you're unsure of!

Paul

[mikmik]

Don't forget that he wants a single file that can be edited and is reflected throughout the whole site.
I don't think you understand how easy it is, H4KSY.
You don't have to know any PHP, and you can use root URLs in your menu file.
The menu file is just a text file with the code for the menu in html, isn't it? And then just name it "menu.php"?
<? include("filename.php") ?>

I also used to convert my code from html into a javascript file, and then called i twith:

<SCRIPT type="text/javascript src="menu.js">
</SCRIPT>

<? include("filename.php") ?>

Also, there is asp - SSI's.

(tells ASP where the file is located relative to the root web directory)

The point is to just have one file to edit, and like I said, if you use root url's, it only takes one.

BTW, I just used a simple little online generator and plegged in my html for the menu (Link)
and took the output, ->notepad->save as = menu.js.

But it is to easy to use PHP.

Boy, I am all tuckered out now, and I still have to get to clssisy's email.
But I have to have a nap first, and dream about sijpie changing into a CSS wizard. Good night! >Bo)

[wclew]

Hi Guys,
I have a couple of random thoughts going through my head right now so I might not make sense, but I'll try. ;o)

First I have a question. If you include your navigation menu by any method above, will that effect your search engine spidering or in turn your ranking? The reason I ask is because you would only have one page with links on it instead of having links actually on every page.

You still seem to be reloading everything on every page this way. What if you use the include idea on your content instead of your navigation. You could put your include statement inside of a div, then you could use DHTML code on your buttons to rewrite the outerHTML of the div and change the src property. If that would work, that would simulate frames. How would that effect your search engine spidering or in turn your ranking?
Thanks,
Dennis

[H4KSY]

Thanks for all the replies guys,

I have managed to re-vamp a page of the site now without the use of frames.

I have used CSS for the nav bar formatting & so there is only about 25 lines of code repeated between pages.

Thanks alot for the code MikMik - that could be very usefull in keeping site maintenance down but I am very interested in any replies to wclew's question regarding the search engine rankings - as this is why we are removing the frames in the first place.

My collegue (sparky_t) is going to post up the one page that is now completed for youre review - all thoughts & opinions are welcome.

We have also W3C validated this page.

Thanks again to all,

R.

[H4KSY]

Okay - I think Ive cracked it!

using Javascript:

I have moved the code for the nav-bar to a .js file named navbar.js:

document.write("<ul>")
document.write("[*]<p align='left'>Home")
document.write("[*]<p align='left'>Commercial")
document.write("[*]<p align='left'>Domestic")
document.write("[*]<p align='left'>Supply Only")
document.write("[*]<p align='left'>Products")
document.write("[*]<p align='left'>About Us")
document.write("[*]<p align='left'>Contact Us")
document.write("[*]<p align='left'>Recruitment")
document.write("[*]<p align='left'>Current Vacancies")
document.write("[*]<p align='left'>Job Application")
document.write("[*]<p align='left'>Sitemap")
document.write("[*]<p align='left'>Glossary")
document.write("[/list]")

All the formatting is done in .CSS so theres not too much code in there

Then in the HTML page I just put:

<script language="javascript" src="navbar.js"></script>

I am quite happy with the way this works as I can just edit the navbar.js for each time I want to add a link and all pages will be updated :)

BUT...when trying to validate this on the W3C site it is asking for a TYPE=?? in the line above. Could anyone tell me what this should be??

so:

<script language="javascript" src="navbar.js" TYPE="?????**??????"></script>

Many Thanks,

Also - how will this affect the Rankings of this page

[wclew]

I think it's looking for type="text/JavaScript".
So your tag would be:
<script language="JavaScript" type="text/JavaScript" src="navbar.js">

Hope that helps.