By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Recreatinging a sliced image page with CSS

P: n/a
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
ge***@wcgcamberwell.org.uk
Jan 28 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
"George Smiley" <gd***@hhotmail.comwrote in message
news:Dq********************@fe3.news.blueyonder.co .uk...
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.
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?
Personally, I would toss this entire idea. A page *that* simple requires at best, one
container DIV (not a slew of them) with the IMGs in rows. Every place you need to start a
new row of images you could simply float the first one left. It appears your images are
transparent GIFs which makes that job that much easier as you do not have to re-edit
images.

Seriously, semantically you should avoid extraneous DIVs. Just try a search on Google for
DIVless or "design without divs."

-Lost
Jan 29 '07 #2

P: n/a
Thanks for the advice.

I couldn't get the images as they were to line up in rows with css so I took
the easy way out and resaved the images so they did fit and align properly
in a much simpler table without spacers.

thanks again.
"-Lost" <sp****************@REMOVEMEcomcast.netwrote in message
news:fs******************************@comcast.com. ..
"George Smiley" <gd***@hhotmail.comwrote in message
news:Dq********************@fe3.news.blueyonder.co .uk...
>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.
>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?

Personally, I would toss this entire idea. A page *that* simple requires
at best, one container DIV (not a slew of them) with the IMGs in rows.
Every place you need to start a new row of images you could simply float
the first one left. It appears your images are transparent GIFs which
makes that job that much easier as you do not have to re-edit images.

Seriously, semantically you should avoid extraneous DIVs. Just try a
search on Google for DIVless or "design without divs."

-Lost

Jan 30 '07 #3

P: n/a
"George Smiley" <gd***@hhotmail.comwrote in message
news:c_*********************@fe1.news.blueyonder.c o.uk...
Thanks for the advice.

I couldn't get the images as they were to line up in rows with css so I took the easy
way out and resaved the images so they did fit and align properly in a much simpler
table without spacers.

thanks again.
I threw together an example a few days ago and then forgot about this thread.

Do you have a valid e-mail address? Your current one does not exist.

-Lost
Feb 2 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.