Convert from DW to using CSS

[Robin Clark]

I am brand-new to hand-coding HTML, but I am determined to quit using DW and start to use CSS and javascript that I code by hand. I have a very simple webpage that I am going to try to re-implement this weekend using CSS. Here is the webpage that I am attempting to redo:

http://www.robinzclark.com/aboutUs.html

I am very proficient at Java, but I am new to javascript and CSS. I want each page to have the following sections:

header
left side navigation bar
two content rectangles to the right of the left side navigation bar
footer

In the header will be the gif logo.

In the left side navigation bar will be ten buttons that exhibit rollover behavior.

In one of the content rectangles will be a jpg image, in the other content rectangle will be text.

In the footer will be a different gif logo.

I am a bit overwhelmed with all of the CSS tutorials. Can you offer me some advice on how to accomplish this task?

Thank you very much.

[ronaldb66]

Two options...

There are two commonly used, simple techniques, each of which have their pros and cons:[list=1][*]Float the navigation section left, and set a left margin on the content section to make room.
Pro: works with any combination of longer content, shorter nav or vice versa.
Con: nav must be before content in the source: bad for text browsers and screen readers, bad for search engines.[*]Aboslutely position the navigation in the top left corner of a wrapper around the content an navigation sections; again, use left margin to create room.
Pro: nav can be behind the content: good for text browsers, etc.
Con: nav can never be longer than the content or it will spill over the footer.[/list=1]
There are dozens more, but you'll really have to do some digging; try the sticky on top of the forum.

Update:

Read this article on Mezzoblue: Friday challenge; it decribes an alternative with all floats and the correct source order!