Instead of using tables it would be much better to wrap each row in a div and float the images left then put the description/price etc. in a span and float it left then style the span to go under the images.
Here is a quick example of the html you could add to the post (make sure you are using the HTML editor and not the visual:
<div class="product-row">
<img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/Teal Silky Falls<br />Price: $40.00<br /><a href="#">Details</a></span>
<img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/TealSilky Falls<br />Price: $40.00<br /><a href="#">Details</a></span>
<img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/Teal Silky Falls<br />Price: $40.00<br /><a href="#">Details</a></span>
Then add this to your css:
.product-row img { float:left; padding:10px;}
span.description { float:left;margin-top: 180px;margin-left: -150px; }
Here is a screen shot of what the above html and css look like:
http://c3mdigital.com/wp-content/uploads/2010/08/product-listing.png
Thanks, but it didn’t quite work: http://theotherscene.com/silky-falls/
Where do I put the css? in the style.css? I placed the code on the end of that file.
Put it in the style.css file
I’ve done that and double checked the code and I still do not know why the images look like steps. Any thoughts?
I forgot that the WordPress post editor adds an <br /> at the end of each line which causes the step down.
Add the images all on one continuous line to prevent it like this:
<img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/Teal Silky Falls<br />Price: $40.00<br /><a href="#">Details</a></span><img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/TealSilky Falls<br />Price: $40.00<br /><a href="#">Details</a></span><img src="http://theotherscene.com/wp-content/uploads/2010/08/blacktealsilkyfalls4-150x150.jpg" width="150" height="150" alt="picture here" /><span class="description">Black/Teal Silky Falls<br />Price: $40.00<br /><a href="#">Details</a></span>
That works…initially. Then when I begin to change the images, it throws everything off. I am only changing the urls in html, not replacing the image in visual. This is getting exacerbating. Thank you for your help. I’m going to see in NextGen plugin might solve this issue.
You also might want to look at the WP e-Commerce plugin.
At this point, I want to be as simple as possible. I will look at that plugin and see how to use it, but for now am going just with simple paypal cart. Thank you! Hope you have a great day! =)
