• I am trying to post a table set up to show some products. I’m finding that the code resets itself constantly. I keep changing, saving, everything is great, go back, change some more, save, it’s back to where it was or worse. Is there an easier way of making a thumbnail table to show products? Thanks.

    Referencing to this page: https://theotherscene.com/silky-falls/

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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="https://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="https://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="https://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:

    https://c3mdigital.com/wp-content/uploads/2010/08/product-listing.png

    Thread Starter GypsyNightshade

    (@gypsynightshade)

    Thanks, but it didn’t quite work: https://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

    Thread Starter GypsyNightshade

    (@gypsynightshade)

    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="https://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="https://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="https://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>

    Thread Starter GypsyNightshade

    (@gypsynightshade)

    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.

    Thread Starter GypsyNightshade

    (@gypsynightshade)

    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! =)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Trying to make a table’ is closed to new replies.