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]

Originally Posted by H4KSY

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.

[mikmik]

Some guy name of wclew queried

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.

As far as I know, if PHP or ASP includes are used (were not talking frames here, just includes to a normal page), there is absolutely no problem getting the pages spidered. It was explained to me that spiders get served up the html as perfectly readable.
However, I am not very sure at all about javascript being readable, ie

document.write("[*]<p align='left'>Home")

the "Home would not be a readable link for Mr. Spider lol.
Some one else with knowledge would have to tell us one way or the other.

You are correct about the : type="text/javascript", in fact I think the 'language' part doesn't need be there, it doesn't go over so well for xhtml strict validation.

(inner, outer, how many html's are there? lol Just starting som of that DOM stuff meself, if that's what that is *hic* oh, excuse me LOL)

[ronniethedodger]

Originally Posted by mikmik

As far as I know, if PHP or ASP includes are used (were not talking frames here, just includes to a normal page), there is absolutely no problem getting the pages spidered. It was explained to me that spiders get served up the html as perfectly readable.
However, I am not very sure at all about javascript being readable, ie

You are correct on the ASP and PHP pages...and add in SSI (.shtml) pages to that mix too. The pages are "constructed" and then served. This is what they mean by Server Side programming and is part of the acronym for SSI (server side includes).

In the case of javascript (and vbscript) though, they are client-side programming and the menu will get constructed on the fly in the client browser. Since spiders do not read javascript (or any other form of client-side programming for that matter) they will not be aware of the links -- and thus cannot follow them.

The normal practice of implementing javascripted dynamic menus is to also back that up with standard Html text links (usually in the footer) for the spider to follow as well. A link to a sitemap is always a common thing to add to the footer also.

I use the SSI method myself. I have SSI include directives to include a standard header, footer, and an extensive navigation panel that runs down the right side of my page. When you get into the sub pages...I have an additional nav menu that gets included on the left side of the page that is more targeted to the specific category that you are in.

My actual pages now consist of nothing more than four include directives and one table for the page content. I actually probably could of done this with only three include files though....it is just that I always had plans to serve up different nav and footer files depending upon what area they were in. Just haven't got to implementing that yet.

[mikmik]

ronniethedodger wrote:

ASP and PHP pages...and add in SSI (.shtml) pages to that mix too.

Thanks for the explanation. Makes total sense, I just never noticed the comparison with client side script before. That puts it in perspective for me.

I thought that ASP was SSI.
But I also got a CGI error with PHP before.
I will look Google.
:o)

[H4KSY]

Thanks for the code!! That page is now W3C Validated :)

So the links will not be indexed by the spiders then. This doesn't matter for this page so much because the content has the links in it anyway but its something I will have to look at for the future pages.

How would I put the links in the footer?? Does that mean they wouldn't be visible?

Thanks Again,

R.

[sparky_t]

Hi H4KSY,

I don't no if this will help, but you can use this:

<input type=hidden name="footer" value="Your Text Here!">

to create HTML hidden footer tags. You can replace "your Text" with URLs but I don't know if the Bots will follow them.

Anyone know?

Sparky