: Recommend strategy to implement this design I'm trying to build a website (html only) for a design studio and I am trying to figure out what is the best way to go about it. Layour of a

@Gretchen104

I think you have two choices. You could use javascript to modify the contents of the left hand side when the right is clicked on, so that the page never refreshes. This is quick, but doesn't work for people who don't have javascript enabled.

Or you could just create a series of pages with the same text on the right - though you may want to highlight the "Home" or "Contact Us" text so that the user knows which page they're on.

Vote Up Vote Down

@Frith620

Have a look at using a CSS Framework to simplify laying out your webpages. Some popular ones to look at are Blueprint, YUI and 960. These will make it easy for your to make the two column layout you are looking for.

If you use only html, then you have to repeat the html of the design on every page of the website. This is fine for a small website but if the site gets large, and you want to make a change to the template, then you have to edit every single page.

Most html editors (such as Dreamweaver) have a template system where you can save the layout and navigation (without content) as a template file and then use that to build all your pages. If you want to make a change, you just edit the template file and all the pages change.

A more advanced option would be to use some kind of server side include or some very basic php to join together several files that contain your template and content.

Vote Up Vote Down

@Frith620

I would just make 2 divs, one for the navigation and one for the main content. since the navigation generally has the same amount of stuff in it i would make it fixed width.
just basically a tiny css file defining 2 divs with absolute position, one with fixed width.

div.navigation {width: 250px; position: absolute; right: 0px;}
div.content {position: absolute; right: 250px;}


css3 has a nav tag for navigation that you could use instead of the div.navigation.

Vote Up Vote Down