converting a table layout to CSS

[DavidB]

I have been lurking in the shadows for a while, and am now in need of
assistance.

I have been creating pages for an in-house project using tables for the
layout. You can see an example at
http://www.drburrows.com/deskmanual/desk_manual_index.html

I have been taking an online class that has included sections on using
CSS for controlling page layout, and so have tried my hand at converting
the above referenced page to CSS. What I have gotten so far can be found
at http://www.drburrows.com/deskmanual/testpage_with_styles.html

Below is a copy of the stylesheet that I am using.

The two things I have questions on are:

1. In the menu box <div id="menu">, the links display at the top of the
box, and I would like them more centered vertically. I have v-align set
to middle, to no effect.

2. Also in the menu box, I have the menu height set at 600px; I would
prefer the height to scale with the content of the page, so that it ends
at the footer box.

TIA
--
David Burrows
VIP Technical Support
www.volcano.net
(209) 296-7574
888-9VOLCANO

stylesheet:

body {font-size: 10pt;
font-family: Verdana, sans-serif;
color: Black;
background-color: #ffffcc;
}
h1 {font-size: 2.5em;
font-family: serif;
color: Black;
text-align: center;
}
h2 {font-size: 1.8em;
font-family: serif;
color: Black;
text-align: center;
}
h3 {font-size : 1.5em;}
p {text-indent: 0.5in;}
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:active {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
#banner {
float : right;
text-align : center;
width : 90%;
background-image : url(../images/bgcolor1.bmp);
}
#menu {
float: left;
height: 600px;
width: 10%;
vertical-align : middle;
background-image : url(../images/bgcolor1.bmp);
}
#textcol{
float: right;
width:90%;
background-color: #ffffcc;
}
#footer {
text-align: center;
background-image : url(../images/bgcolor1.bmp);
}

 

[Lauri Raittila]

I have been lurking in the shadows for a while, and am now in need of
assistance.
Surely...

at http://www.drburrows.com/deskmanual/testpage_with_styles.html

The two things I have questions on are:

1. In the menu box <div id="menu">, the links display at the top of the
box, and I would like them more centered vertically. I have v-align set
to middle, to no effect.
http://www.student.oulu.fi/~laurirai/www/css/middle/

2. Also in the menu box, I have the menu height set at 600px; I would
prefer the height to scale with the content of the page, so that it ends
at the footer box.

Use em unit to width of menu, that way your links dont overflow it.

You could absolutely position the menu, and make the background
differently:

body, #content {background:ffc;}
div {backgroud:#90f;margin-left:10em;}
#menu {position:absolute;top:0;left:0;width:10em}

<div><h1>H</h1><h2></h2><div id="content">content</div><div
id="menu"></div><div id="footer">footer</div></div>

Or if you might have longer menu, float, and use same way to colour it.