Grow your CSS skills. Land your dream job.

simulate frames

  • # April 4, 2008 at 4:27 pm

    Hello All,
    I am pretty much new to CSS and I was wondering if there is a way to simulate a frames layout using only CSS. For example; if I have two DIV’s, One being a left positioned side-bar with a bunch of links listed and the other main DIV floated to the right. Can I have any of the link HTML page(s) render in the main DIV as can be done using frames?
    Any help would be appreciated.

    # April 4, 2008 at 5:12 pm

    I prefer using php for that. But if you don’t have php running on your server or you want to do it without php, maybe a combination css and javascript is an option? You could try something like this (made if very quickly):

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Here is home

    Here is about

    Here is contact

    If you want to know how to do this by php, take a look at New Screencast: Working Modularly With PHP

    # April 4, 2008 at 5:17 pm

    Thanks Edwin.
    I do not have PHP. I will try the Java and see how it performs. I was kindda hoping that there would be a much easier way of doing it though. Its just that I was trying to avoid frames completely and use 100% CSS but my research is telling me that there is no way of doing it using ONLY css. Seems that frames do come in handy I guess.
    Your input is appreciated.

    # April 4, 2008 at 6:56 pm

    That’s a great solution Edwin!

    I think frames is a really outdated solution for something like this, there are tons of ways of handling it without using them. If the content in each of the main areas is small enough that it would be reasonable to load them all at once, you could use something like the tabbed box example I posted:

    http://css-tricks.com/examples/SimpleTabbedBox/

    Instead of literally having "tabs", you could use CSS positioning to put the selectors in your left sidebar, but the content would still swap out instantly like in the example.

    # April 4, 2008 at 7:30 pm

    Thanks Chris. I’ll try that as well as the java solution. :P

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".