I wrote an article about how to emulate frames with CSS. And this article prompted a question from Alistair who asked:
With a frame, you can use the name as a target for a link from another frame. For instance, I have some links in a panel on the left of my page, and I want to use these to control the content to the right of the page.
And he wants to know how to do that without using frames.
The short answer to this question is "You can't". CSS is intended to define the way the content looks - not the functionality behind what happens when you click a link.
As I've mentioned before there are three layers to Web design:
- content (the XHTML)
- presentation (the CSS)
It's a good idea to separate these three layers, but when it comes to emulating frames in the fashion Alistair is asking for, you have to use the separate layers because CSS alone won't do it.
Why Not Use Frames Instead of CSS
When looking at this question, the first thing I ask Alistair is "why don't you want to use frames?" Frames provide the functionality that Alistair is looking for without having to go any further or reinvent the wheel. There are many good reasons to use frames, and one of the best is that they do exactly what Alistair is asking for. Frames provide a way to link into sub-sections of a Web page without a lot of extra coding.
If You Can't or Won't Use Frames and Must Use CSS or Something Else
There are also many good reasons to avoid frames, and some Web designers just don't like them. Personally, I don't really like frames, so I don't use them very much.
If you can't or won't use frames on your Web site, but you want that same frames functionality there are two ways to do it:
- iframes or inline frames. To use iframes, just give your iframe a unique id, and then target that iframe in your links. Here's an example of using iframes.
I Recommend Using Frames Instead of CSS to Fake Frames