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

wattanabi

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

Subscribe Reply

4596

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

wattanabi

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

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

wattanabi

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

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

Andy Dingley

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

Similar topics

1975

Gallery of images and alignment

by: Fred | last post by:

I've written a number of "image gallery" pages before, but I'm trying to do something a little different. All the images are rectangular (these are just pictures from my camera), and the...

HTML / CSS

6089

Space introduced between images

by: DM | last post by:

If I put three images next to each other (each within an anchor tag) they all line up horizontally as expected with no space between them. I.e., they're sitting flush up against each other. ...

HTML / CSS

7532

seamless images tables in xhtml strict and css

by: Peter Maas | last post by:

The XHTML file below creates a 2x2 matrix of square images. There is always some space at the bottom borders of the cells (when rendered with Gecko and KHTML, not with IE) and I've found no way so...

HTML / CSS

2779

preloading images not working?

by: Geoff Cox | last post by:

Hello, I am still having problems - apologies if the answer is in previous postings! I now have, in the header, <sctipt> var myimages=new Array();

Javascript

1710

sizeable grid

by: Jesse Aufiero | last post by:

I was wondering if anyone knows how to get a datagrid to size as the browser is resized such that the datagrid's borders would appear anchored to the browser edges. The datagrid should have a...

ASP.NET

1911

Grid headers in a div

by: John Wilson | last post by:

My app produces some long datatables to display in a grid. So I put them in a div so users can scroll. But the grid headers scroll out of view. I would like to stop them doing this. Can I fix them...

ASP.NET

117

18408

grid structures: TABLE/TR/TD vs. DIV

by: phil-news-nospam | last post by:

Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...

HTML / CSS

7839

centering images within a <div>

by: rsteph | last post by:

I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes,...

HTML / CSS

13299

trouble with tinyMCE images

by: matheussousuke | last post by:

Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...

Javascript

7125

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7002

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

7165

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

6887

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5462

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4590

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3093

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3085

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1419

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp