CSS - align images inside

Hi,

Well I'm trying to get myself into the practice of using CSS for layout
instead of using tables, so I thought I'd mess around with placing a couple
of images inside a background area, but already I have more questions than
answers.

See and example of what I am trying to do
http://www.special-editions.net/imagelayout.html

In the example each image is a hyperlink pointing to a different URL. I
would like to place the two images directly above each other so that there
is no horizontal gap between them. Also I'd like to centre the images
horizontally within the grey background panel so that the two images appear
as a single white rectangle with a black outline.

I've been pretty much guessing my way through this so far so I wouldn't be
surprised if I've got the whole notion of how to go about this, wrong - any
and all advice welcome

Neil

On Mon, 29 Mar 2004 15:46:15 +0100, "puk" <neilr.TakeThisOut@pages-uk.com> wrote:

 >Hi,
 >
 >Well I'm trying to get myself into the practice of using CSS for layout
 >instead of using tables, so I thought I'd mess around with placing a couple
 >of images inside a background area, but already I have more questions than
 >answers.
 >
 >See and example of what I am trying to do
 >http://www.special-editions.net/imagelayout.html
 >
 >In the example each image is a hyperlink pointing to a different URL. I
 >would like to place the two images directly above each other so that there
 >is no horizontal gap between them. Also I'd like to centre the images
 >horizontally within the grey background panel so that the two images appear
 >as a single white rectangle with a black outline.
 >
 >I've been pretty much guessing my way through this so far so I wouldn't be
 >surprised if I've got the whole notion of how to go about this, wrong - any
 >and all advice welcome
 >
 >Neil
 >
This works to do what you want:

<p align="center"><a href="http://MyLink1.com" target="_blank"><img
src="top.gif"
border="0"></a><br>
<a href="http://MyLink2.co.uk" target="_blank"><img src="bottom.gif"
border="0"></a></p><!-- ~MESSAGE_AFTER~ -->