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

images in a grid using DIV's instead of a table...

P: n/a
Greetings,

I'm attempting to layout a bunch of images in a grid using DIV's
instead of a table. I currently have a 3x6 table that I need to convert
to css. I've seen various example of a 3 to 4 column layout. Is this
the only way to accomplish this? To see the table in its current
format, please go here:

http://www.godofmod.com

What looks like a single image is actually a table comprised of 18
seperate images. Any assistance is greatly appreciated.

thanks

Jul 13 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Els
wattanabi wrote:
Greetings,

I'm attempting to layout a bunch of images in a grid using DIV's
instead of a table. I currently have a 3x6 table that I need to convert
to css. I've seen various example of a 3 to 4 column layout. Is this
the only way to accomplish this? To see the table in its current
format, please go here:

http://www.godofmod.com

What looks like a single image is actually a table comprised of 18
seperate images. Any assistance is greatly appreciated.
Do you need to use divs, or is just images good enough?
Just line the images up in the code, set margins and borders to 0, and
add a container to encompass them, with a set width, just wide enough
to hold one row. Then give the images "display:block;" and there
should be no space between the rows. Not tested.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 13 '06 #2

P: n/a

Els wrote:
wattanabi wrote:
Greetings,

I'm attempting to layout a bunch of images in a grid using DIV's
instead of a table. I currently have a 3x6 table that I need to convert
to css. I've seen various example of a 3 to 4 column layout. Is this
the only way to accomplish this? To see the table in its current
format, please go here:

http://www.godofmod.com

What looks like a single image is actually a table comprised of 18
seperate images. Any assistance is greatly appreciated.

Do you need to use divs, or is just images good enough?
Just line the images up in the code, set margins and borders to 0, and
add a container to encompass them, with a set width, just wide enough
to hold one row. Then give the images "display:block;" and there
should be no space between the rows. Not tested.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

==

Thanks for the quick reply! I'll give it a shot.

==========

Jul 13 '06 #3

P: n/a
Els
wattanabi wrote:
Thanks for the quick reply! I'll give it a shot.
So.. why did you post this same question again on the css-d list only
3 minutes after writing the above reply? Or are moises and you two
different people asking the exact same thing about the same site?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 13 '06 #4

P: n/a
I'm new to css so I'm looking for as many resources as I can find,
hence the crossposting on css-d. Thanks for your help:

http://www.godofmod.com/butt2/index.php

======================

Els wrote:
wattanabi wrote:
Thanks for the quick reply! I'll give it a shot.

So.. why did you post this same question again on the css-d list only
3 minutes after writing the above reply? Or are moises and you two
different people asking the exact same thing about the same site?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 13 '06 #5

P: n/a
Els
wattanabi wrote:
I'm new to css so I'm looking for as many resources as I can find,
hence the crossposting on css-d. Thanks for your help:

http://www.godofmod.com/butt2/index.php
Hmm.. why all the imageswap script stuff?
Compare your code with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css"
media="screen" />
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div{width:225px;}
a,img{float:left;}
a#swap:link,a#swap:visited{background-image:url(images/img_10.jpg);}
a#swap:hover{background-image:url(images/img_10_over.jpg);}
</style>
</head>
<body>
<div id="container">
<div id="line_1" class="mainTable">
<img src="images/img_1.jpg" width="37" height="45" /><img
src="images/img_2.jpg" width="39" height="45" /><img
src="images/img_3.jpg" width="44" height="45" /><img
src="images/img_4.jpg" width="36" height="45" /><img
src="images/img_5.jpg" width="34" height="45" /><img
src="images/img_6.jpg" width="35" height="45" /></div>
<div id="line_2" class="mainTable">
<img src="images/img_7.jpg" width="37" height="60" /><img
src="images/img_8.jpg" width="39" height="60" /><img
src="images/img_9.jpg" width="44" height="60" /><a href="#"
id="swap"><img src="images/spacer.gif" width="36" height="60"
border="0" /></a><img src="images/img_11.jpg" width="34" height="60"
/><img src="images/img_12.jpg" width="35" height="60" /></div>
<div id="line_3" class="mainTable"><img src="images/img_13.jpg"
width="37" height="63" /><img src="images/img_14.jpg" width="39"
height="63" /><img src="images/img_15.jpg" width="44" height="63"
/><img src="images/img_16.jpg" width="36" height="63" /><img
src="images/img_17.jpg" width="34" height="63" /><img
src="images/img_18.jpg" width="35" height="63" /></div>
</div>
</body>
</html>

Much less code, the effect is the same, and it works even if
JavaScript is disabled.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 13 '06 #6

P: n/a

wattanabi wrote:
I'm attempting to layout a bunch of images in a grid using DIV's
instead of a table.
Why not use a <table?

If it's essential that you have grid-based layout (1), then it's
legitimate to use the HTML component that renders in a grid-based
fashion (2).

(1) We can argue whether image slicing is a good thing or not, but
that's a separate question.

(2) CSS display: table modes for non-<tableelements aren't portable
across browsers.

Jul 14 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.