Create a 2 column web page layout with navigation menu

Create a 2 column web page layout with navigation menu - HTML / CSS code

:: "2 column layout with navigation menu using a CSS list based linking structure..."

We will now create a standard 2 column web page with a simple list of links down the left column. Simply copy and save the 2 files below: style-basic.css ,2-col.html 2 col layout with left hand menu

Style Sheet with List styles - again... copy and save as: style-basic.css

HTML with list based menu code - NEXT copy and paste this code below into notepad - name it 2-col.html

Open and view

With your 2 files saved in the same folder you will now open them in a browser. Simply locate the folder on your harddrive - right click on 2-co.html and click open with IE or another browser you wish. The file will open as a "web page"

Of course to make the links active you must add a real URL instead of the "#". Something like this:
<a href="your_destination.html"> your destination </a>

Cool But Limited...

Now you got a navigation menu so you can link between pages. But...we are limited.

You see, the navigation menu is built right into our page which can cause MAJOR headaches from a website maintanence perspective.

Why?

if your site grows to say 200 pages, you have to update each page every time you need to add a link to the menu!. That would be so wrong...

Lets build smart. Why not use an Include file that references all the links to our menu?

***We'll use classic ASP for this simple and common navigation. You'll need a host that supports ASP (.asp file extensions) to get this going.***

One little line of code pulls the navigation menu into each and every page. Here's how... navigation include file

Review the web building process: build web site free