Some CSS questions from a newbie

[DeathByPixels]

Note: I've been (on and off - depending on how much free time and energy I have available) trying to teach myself HTML and CSS, I'm getting there, slowly but surely.

Anyway, I have a footer, and the right edge of it also doubles as a "Top" button for linking to the top of the page (see screenshot). I've been trying to use CSS to place my images, rather than coding the images/tables in HTML, and wondered if there's a way of making the "Top" button take you to the top of the document, using CSS?

Here's my CSS code and my HTML code for my footer:

/* Footer */
#footer_left {
	background: url(/home/images/footer/shimmyst_green_footer_left.gif) left bottom;
	height: 100px;
	width: 50px;
}

#footer_middle {
	background: #fff url(/home/images/footer/shimmyst_green_footer_middle.gif) repeat-x bottom left;
	font: 8pt Arial, Verdana, Helvetica, sans-serif;
	color: #214304;
	text-align: left;
}

#footer_right {
	background: url(/home/images/footer/shimmyst_green_footer_right.gif) bottom right;
	height: 100px;
	width: 50px;
}

<!-- Footer -->
<table width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td id="footer_left">&nbsp;</td>
    <td id="footer_middle" width="700" height="100">Shimmering Mysteries &copy; 2006, All Rights Reserved.</td>
    <td id="footer_right"></td>
  </tr>
</table>
<!-- End Footer -->

Any ideas on how to achieve what I'm trying to achieve?

Many thanks in advance.

[jscheuer1]

The way to get an image to take you to the top of the page is:

<a href="#" onclick="window.scrollTo(0,0);return false;"><img src="top.gif" border="0"></a>

For compliance in the most browsers, even when javascript is disabled, it might be better to use the name of the page itself rather than # for the href attribute.

Positioning things using css rather than tables is a bit more complicated but, fortunately there are tons of templates (some better than others) available, for example, her is a listing of three column layouts:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

How exactly you go about laying out a page is an individual matter but, often it can be facilitated by using division elements float:left; broken up by other divisions clear:left; with some divisions used as containers of the floats that are neither floated nor cleared.

[DeathByPixels]

I've decided to go for a table layout instead of trying to do it all with CSS, until I find out more about tableless design.

Thanks for your help.