Is it possible to use CSS to update parts of an HTML page in a way similar to frames?

Question

Is it possible to use CSS to work like frames?

What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.

Is it possible to create this effect with CSS?

Thanks.

Answer 1

Using frames is usually a bad idea

To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.

However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.

When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.

But, actually, frames are incredibly bad for your usability.

• Your users cannot bookmark individual pages
• Printing is broken
• Standard features in a browser like open in new tab often breaks
• Users cannot copy/paste the web address for a specific page for sending to a friend

Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.

These languages have ways of creating standard elements such as your navigation menu without the use of frames.

Answer 2

No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name

<iframe name="my_iframe" src="xyz.htm"></ifram>

and then be targeted in a link.

Answer 3

I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.

Answer 4

You could probably do something with the overflow part of CSS.

If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.

This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.

I have never tried this and it might need javascript to get it to work fully.