CSS and HTML - Can CSS files generate HTML?

Question

I am making a website that is styled using CSS, in two DIVs. One 'Header' DIV which is always the same, and a 'Content' DIV that changes.

In my CSS file, is it possible to write the HTML with all the links that stay in the header, so I just need to call (or similar) on every page, instead of having to write out my header content every time? Would also help in editing only one source, as I often leave out pages by mistake.

I don't want to use frames, so looking for an alternative.

Thanks, Brett

Answer 1

It isn't possible to achieve that using CSS, because CSS can't handle any events, it's simply a "refrence" for the browser to know how to style your web-page, it's done, however, using AJAX. I suggest you to take a look on jQuery lib, it'll speed up the process tremendously, however - the main disadvantage is that the search crawlers won't be able to index your page correctly, so it'll be bad by an SEO perspective.

It's possible, if you have the time, to make an index-able version and an AJAX one, that's what we did for a mobile project here.

jQuery AJAX API

Answer 2

CSS can't help you to do this.

You can make ajax loading of content. You can make one index.html and lot of 'content' files (about.html, contacts.html, etc). And in index.html you can load another .html in content-div (for example with jQuery method .load())

Another way - you can make little templating engine in php (or another server-side language)

Answer 3

The usual options for doing this client-side are an iframe, or some javascript that does DOM to add content (perhaps loaded from an external file). Or some javascript that creates an iframe. Or an iframe that creates some javascript. Some permutation of those odious techniques.

CSS does have the content property, but i think it's limited to plain text. I don't know if you can use it to pull in HTML, either using a string or URI.

As others have mentioned, the most common approach is to do it server-side. You can do this bottom-up with includes, or top-down with things like Tiles and SiteMesh.

Answer 4

Depending on the server and server side languages supported, this can be done.

Some servers will let you use Server Side Includes, for example. With others you could specify "block" of HTML for a header (for instance) that will be part of a site wide template.

What is not possible it to achieve this with purely CSS and HTML.

Answer 5

This is why you usually have some server side code running, which will insert the common header e.g. php include, SSI or other templating framework. If that's not an option, you could write JavaScript which writes out your header each time to a specific DIV. Although I don't think that's great from an SEO perspective.