Hi,
I'm a relative newcomer to css although I really do believe in its
philosophy and power. I'm even currently teaching web authoring with css to
a group of beginners.
However, I trying to undo my bad html and css on my own pages and I'm
setting myself the challenge of recreating some of the pages with css.
http://www.wcgcamberwell.org.uk/
This link shows a set of images which was created with an image program
which sliced a large image and put the whole lot plus shim into a horrible
table. Ironically it looks fine in IE but it looks a real mess with Firefox.
My new page goes something like this.
The HTML goes like this:
<div id="container">
<!-- Services button -->
<div id="services"><a href="services.html" target="_self"><img
name="services" src="images/sitemap/services.gif" alt="services" border="0"
height="104" width="97"></a></div>
<!-- Worship button -->
<div id="worship"><a href="worship.html" target="_self"><img name="Worship"
src="images/sitemap/Worship.gif" alt="Worship" border="0" height="104"
width="99"></a></div>
<!-- Prayer button -->
<div id="prayer"><a href="prayer.html" target="_self"><img name="Prayer"
src="images/sitemap/Prayer.gif" alt="Prayer" border="0" height="114"
width="87"></a></div>
<!-- Studies button -->
<div id="studies"><a href="studies.html" target="_self"><img name="Studies"
src="images/sitemap/Studies.gif" alt="Studies" border="0" height="106"
width="92"></a></div>
<!-- WCG button -->
<div id="wcg"><a href="camberwell.html" target="_self"><img
name="GlobeCross" src="images/sitemap/GlobeCross.gif" alt="GlobeCross"
border="0" height="139" width="140"></a></div>
<!-- People button -->
<div id="people"><a href="people.html" target="_self"><img name="People"
src="images/sitemap/People.gif" alt="People" border="0" height="113"
width="83"></a></div>
<!-- What's New button -->
<div id="whats_new"><a href="whatsnew.html" target="_self"><img name="What's
New" src="images/sitemap/WhatsNew.gif" alt="What's New" border="0"
height="105" width="138"></a></div>
<!-- Links button -->
<div id="links"><a href="links.html" target="_self"><img name="Links"
src="images/sitemap/Links.gif" alt="Links" border="0" height="112"
width="80"></a></div>
<!-- Contacts button -->
<div id="contact"><a href="contact.html" target="_self"><img name="Contacts"
src="images/sitemap/Contacts.gif" alt="Contacts" border="0" height="109"
width="143"></a></div>
The nearest I've got to what I want is using this css.
/* Sitemap Styles */
#container {
position: absolute;
width: 410px;
height: 410px;
margin-left: auto;
margin-right: auto;
left: 210px;
top: 33px;
/* border: 1px solid #000000;
*/
}
#services {
position: absolute;
left: 19px;
top: 1px;
width: 97px;
height: 104px;
}
#worship {
position: absolute;
left: 164px;
top: 1px;
width: 99px;
height: 104px;
}
#prayer {
position: absolute;
left: 300px;
top: 1px;
width: 87px;
height: 114px;
}
#studies {
position: absolute;
left: 20px;
top: 156px;
width: 92px;
height: 106px;
}
#wcg {
position: absolute;
left: 135px;
top: 138px;
width: 140px;
height: 139px;
}
#people {
position: absolute;
left: 300px;
top: 151px;
width: 83px;
height: 113px;
}
#whats_new {
position: absolute;
left: 0px;
top: 306px;
width: 138px;
height: 105px;
}
#links {
position: absolute;
left: 167px;
top: 298px;
width: 80px;
height: 112px;
}
#contact {
position: absolute;
left: 267px;
top: 304px;
width: 143px;
height: 109px;
}
</div>
But I want the whole grouping to stay in the centre of the page whatever the
width.
I also have another couple of lines of text to go underneath which are
currently underneath the images. I'm just tackling one thing at a time.
Can anyone help please?
Thanks
Geoff Stilwell
geoff@wcgcamberwell.org.uk 
