CSS Site Navigation

conorgriff

Hey guys, I'm making a website and I need some help on CSS. I want to create a page with a fixed-width navigation bar on the left, a full-width header and then a content pane using the rest of the window. Before now I've always used frames for this kind of layout. However I know I can use CSS for this also by using div's. The problem I can't seem to find an answer to is this. Is it possible to have the links in my navigation bar on the left open content in the content pane? In the frames layout I used the target="content" parameter for this but I can't seem to find how to do it with CSS, any help appreciated.
Conor

Adam

Are you trying to say that you don't want to reload the header and sidebar? The layout you want to achieve is very simple, I can't say I know how to do the target="contents" thing, but the layout is simple and you should be able to work it out if you know any CSS. Do you?

conorgriff

Yeah I want to do it without reloading the sidebar. I don't know a whole lot of css, just the basics really. It's just this thing that I'm stuck on, maybe it's not possible in css and I'll need to use tables/forms to achieve it. I know how to create the layout to look as I've described, it's just the loading of the contents pane that I don't know how to do.

wheres me jumpa

Go here for your layout.

http://www.ssi-developer.net/main/templates/

There isnt really a need for you to have just the centre frame reload. From an SEO point of view its not very helpful and always find this frame type setup frustrating from a user point of view.

conorgriff

So what is the solution to changing content of the page while maintaining the navigation bars and header? Duplicate that info on another page?

wheres me jumpa

Well if you create your layout first, eg header, left col, content and footer. Then in the header div, you can include an external file that contains your header information. Similar for your navigation in the left col and your footer information in the footer div.

So create an "include" directory and in here store your header, footer and nav files. Then call them in any specialised pages.

louie

conorgriff wrote:

So what is the solution to changing content of the page while maintaining the navigation bars and header? Duplicate that info on another page?

The solution is AJAX.

have a look at www.besecure2000.ie

democrates

louie wrote:

The solution is AJAX.

have a look at www.besecure2000.ie

Worth having a look at this before deciding if/where to use AJAX. In short the disadvantages can be reduced accessibility, SEO(afaik google can't navigate ajax pages to index them), security, privacy, and browser navigation while increasing your workload.

For the template problem I echo 'wheres me jumpa', includes are a simple and effective solution.

PS Instead of header.inc you could have template.inc with two functions, show_header() and show_footer().
EDIT: One advantage is that the script including the template can set the page title in a variable before showing the header, this is better for site navigation and bookmarking.

If include('includes/template.inc'); doesn't work on your webhost try virtual('includes/template.inc');

smcelhinney

Sounds to me like your original use of framesets was to overcome issues around managing the site, not having to change content or navigation more than once, worrying about persistent updating etc.

Fortunately, there are tools to do that for you. Look at the library and template functionality within DreamWeaver. Yes I know its expensive, so download a trial, play around with it and see if you could justify purchasing it.

There are other HTML editors with similar functionality. Bottom line is, dont let the necessity of managing a site impact how you build it in the first place.

That being said, if you want to stay away from editors, all of the above points around includes etc are very valid.

And no, Google cant read Ajax driven pages, as Ajax is event-driven, i.e requires input to render.

HTH,
Stephen

louie

democrates wrote:

Worth having a look at this before deciding if/where to use AJAX. In short the disadvantages can be reduced accessibility, SEO(afaik google can't navigate ajax pages to index them), security, privacy, and browser navigation while increasing your workload.

The main navigation on www.besecure2000.ie works with ajax and without ajax. There are ways arround this that works for every type of browser including search engines.

Have a look at this: Ajax or no Ajax

Back to the subject: using includes file SSI will be your best option.