Alternating data with differerent images on left

[damon2003]

Hi,

I have rows of data I want to be displayed, alternating colours and an image on the left, which is an incrementing number.

What is the bext way to do this without usnig tables. The image is quite small and there are several lines of text, so I want some padding of the text to the left, and the text not to wrap under the image. Can the text be padded and the images be padded separately?

thanks,

[XML-Master]

Just try to represent this data as a list by which you can easily display its content as table, the space should maintain between images and text. For an example:

CSS:

#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
#background-image: url(images/busy_white1[1].gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

#navlist ul { list-style: none; }

a{
margin-left: 1em;
}

HTML:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

[damon2003]

thanks.

How does the background image work? Is it suppose to iterate automatically?

#background-image: url(images/busy_white1[1].gif);

[XML-Master]

No, it would not iterate automatically.

If you want to use different different images for each and every corresponding text then I think you should use should generate DropCap type of thing.

For example:

INPUT
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer... df dfk sdf osdf dofiosdf dofkodsfkretlr tlkdfl tkdl;t dfktldf tkdfl fdlklk lskf dkgldfklfykldfk l dflkdflgk lgkldgk dfkkldkl5kl6 ker6kle letkl;k dflkdflgkl;fkl; sl;kg lgkdsl lgk gl klkglk</span>

CSS
.dropcap
{
float: left;
width: .7em;
font-size: 4em;
line-height: 83%;
}

[opifex]

use the <li> like you want to... set up the css for the image to float left, put your txt in a <span> with padding left set as needed...
to get the <li> to alternate colors on their own you can use :nth-child pseudo class if you don't have to wory about NON-modern browsers, i.e. IE
or you can just set up two classes and have them called dynamically on alternating <li>'s if you are loading data from a db.

BUT... since you seem to be dealing with data, why don't you want to use tables? TABLES are for displaying data... that's their purpose.