Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help me align item photo & shopping cart info

    It seems on 1 page there is a lot of mis-matching going on with my item photo & item shopping cart description/checkout feature

    http://www.compbrewer.com/components/

    Can anyone help & suggest a way to easily clean this page up so everything looks "even" with its data?

    Thanks.

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    Blackpool
    Posts
    55
    Thanks
    7
    Thanked 1 Time in 1 Post
    Quote Originally Posted by JohnnyScience View Post
    It seems on 1 page there is a lot of mis-matching going on with my item photo & item shopping cart description/checkout feature

    http://www.compbrewer.com/components/

    Can anyone help & suggest a way to easily clean this page up so everything looks "even" with its data?

    Thanks.
    A very easy way would to put it into a table although it could get annoying if you wanted to change things at a later date.
    Subscribe to a channel dedicated to helping people learn HTML, PHP & CSS.
    http://www.youtube.com/user/RanTutorials

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could I just put each picture & buying options in their own table so it would be easier to edit instead of putting ALL of the items in a single table?

    Or which way would be the best option?

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,004
    Thanks
    15
    Thanked 236 Times in 236 Posts
    It appears to already be in a table. I don't do much with tables but I seem to recall that if you apply the style vertical-align: middle; to a TD it will do what you want for the picture.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    For your fiirst table try this:
    Code:
    <table width="420px">
    <tbody>
    <tr>
    <td valign="top" width="110px"><strong>Bubbler Commercial Series</strong>  <form id="cartButtonForm_5_3" class="Cart66CartButton" method="post" action="http://www.compbrewer.com/store/cart/"> <input name="task" id="task_5_3" value="addToCart" type="hidden"> <input name="cart66ItemId" value="5" type="hidden"> <input name="product_url" value="http://www.compbrewer.com/components/" type="hidden"> <span class="Cart66Price Cart66PriceBlock"> <span class="Cart66PriceLabel">Price: </span> <span class="Cart66CurrencySymbol Cart66CurrencySymbolbefore">$</span><span class="Cart66PreDecimal">49</span><span class="Cart66DecimalSep">.</span><span class="Cart66PostDecimal">95</span><br />
    <span class="Cart66CurrencySymbol Cart66CurrencySymbolAfter"></span> </span> <span class="Cart66UserQuantity"> <label for="Cart66UserQuantityInput_5_3">Quantity: </label> <input id="Cart66UserQuantityInput_5_3" name="item_quantity" value="1" size="4"> </span> <input value="Add to Cart" class="Cart66ButtonPrimary purAddToCart ajax-button" name="addToCart_5_3" id="addToCart_5_3" type="submit"> </form> <div id="response_warning" class="alert-message warning_5_3" style="display: none;"> <p><strong><span class="message-header">Inventory Restriction</span></strong></p> <div id="message_warning" class="warning_message_5_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_error" class="alert-message alert-error error_5_3" style="display: none;"> <p><strong><span class="message-header">Inventory Failure</span></strong></p> <div id="message_error" class="error_message_5_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_success" class="alert-message success success_5_3" style="display: none;"> <p><strong><span class="message-header">Success!</span></strong></p> <div id="message_success" class="success_message_5_3"></div></div></td><td width="190px" valign="top"><strong>Cyclone Commercial Series</strong>  <br />
      <br />
      <br />
      <form id="cartButtonForm_6_3" class="Cart66CartButton" method="post" action="http://www.compbrewer.com/store/cart/"> <input name="task" id="task_6_3" value="addToCart" type="hidden"> <input name="cart66ItemId" value="6" type="hidden"> <input name="product_url" value="http://www.compbrewer.com/components/" type="hidden"> <span class="Cart66Price Cart66PriceBlock"> <span class="Cart66PriceLabel">Price: </span> <span class="Cart66CurrencySymbol Cart66CurrencySymbolbefore">$</span><span class="Cart66PreDecimal">149</span><span class="Cart66DecimalSep">.</span><span class="Cart66PostDecimal">95</span><br />
    <span class="Cart66CurrencySymbol Cart66CurrencySymbolAfter"></span> </span> <span class="Cart66UserQuantity">
     <label for="Cart66UserQuantityInput_6_3">Quantity: </label> <input id="Cart66UserQuantityInput_6_3" name="item_quantity" value="1" size="4"> </span> <input value="Add to Cart" class="Cart66ButtonPrimary purAddToCart ajax-button" name="addToCart_6_3" id="addToCart_6_3" type="submit"> </form> <div id="response_warning" class="alert-message warning_6_3" style="display: none;"> <p><strong><span class="message-header">Inventory Restriction</span></strong></p> <div id="message_warning" class="warning_message_6_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_error" class="alert-message alert-error error_6_3" style="display: none;"> <p><strong><span class="message-header">Inventory Failure</span></strong></p> <div id="message_error" class="error_message_6_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_success" class="alert-message success success_6_3" style="display: none;"> <p><strong><span class="message-header">Success!</span></strong></p> <div id="message_success" class="success_message_6_3"></div></div></td><td valign="top" width="110px"><strong>12 Volt DC Heavy Duty</strong><br />
        <br />  
        <form id="cartButtonForm_7_3" class="Cart66CartButton" method="post" action="http://www.compbrewer.com/store/cart/"> <input name="task" id="task_7_3" value="addToCart" type="hidden"> <input name="cart66ItemId" value="7" type="hidden"> <input name="product_url" value="http://www.compbrewer.com/components/" type="hidden"> <span class="Cart66Price Cart66PriceBlock"> <span class="Cart66PriceLabel">Price: </span> <span class="Cart66CurrencySymbol Cart66CurrencySymbolbefore">$</span><span class="Cart66PreDecimal">99</span><span class="Cart66DecimalSep">.</span><span class="Cart66PostDecimal">95</span><br />
    <span class="Cart66CurrencySymbol Cart66CurrencySymbolAfter"></span> </span> <span class="Cart66UserQuantity"> <label for="Cart66UserQuantityInput_7_3">Quantity: </label> <input id="Cart66UserQuantityInput_7_3" name="item_quantity" value="1" size="4"> </span> <input value="Add to Cart" class="Cart66ButtonPrimary purAddToCart ajax-button" name="addToCart_7_3" id="addToCart_7_3" type="submit"> </form> <div id="response_warning" class="alert-message warning_7_3" style="display: none;"> <p><strong><span class="message-header">Inventory Restriction</span></strong></p> <div id="message_warning" class="warning_message_7_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_error" class="alert-message alert-error error_7_3" style="display: none;"> <p><strong><span class="message-header">Inventory Failure</span></strong></p> <div id="message_error" class="error_message_7_3"></div> <input name="close" value="OK" class="Cart66ButtonSecondary modalClose" type="button"></div><div id="response_success" class="alert-message success success_7_3" style="display: none;"> <p><strong><span class="message-header">Success!</span></strong></p> <div id="message_success" class="success_message_7_3"></div></div></td>
    
    </tr></tbody></table>
    For the last 2 tables try to use the classes that are used for the1 1/2 Cam lock table namely <div class='one_third'> and <div class='two_third last'>.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •