what is the best way to do this?

[cybershot]

I am trying to create a new page without using tables. If you go to http://www.photobyiris.com/portfolio.html . you can see what i want to do.

I just want to re create the page in the middle with the red square and the six images with the text next to them. I have been able to get 3 images into a line by using the <ul> tag. but then when i add the text, everything goes bad. I got one image and text in using float:left on the image and the text, but when i went for number 2. again, everything went bad.

Any advice?

thanks

[laith]

I think a list will work fine for this. You could define a unique list item class for each image.

ul.list1, ul.list2 {
margin: … ;
padding: … ;
list-style: none;
}
ul.list1 li, ul.list2 li { font, padding, margin properties here }
ul.list1 li.image1 {
background: url(images/image1.gif) no-repeat 0 30%;
}
ul.list1 li.image2 {
background: url(images/image2.gif) no-repeat 0 30%;
}
etc. …

[Author]

Posts