for expert of CSS alignment problems

[luigicosta]

I can not understand how to set the values ​​for align the image and field into Produc info

any ideas or suggestions are welcome

thanks

 

 

<div style="float: left; font-size: 24px; font-weight: bold; color: green; padding: 15px 0px 10px 10px;"><?php echo $products_price; ?> </div>
<div style="float: left; width: 336px; height: 64px;  padding: 0px 0px 0px 0px; background-image: url(/images/add-to-cart-bg.png);">
<div style="float: left; font-size: 12px; font-weight: bold; padding: 0px 0px 0px 0px;"> Quantita' </div>
<div style="float: left; width: 49px; height: 32px; padding: 0px 0px 20px 0px; background-image: url/images/backgrounds/qty-field-bg.png);">
<input style="float: left; padding: 0px 0px 0px 0px; name="qty" value="1" size="3" style="background-color: white; border: 1px none; text-align: center;" type="text"></input>
<div style="float: left; width: 206px; height: 52px; padding: 0px 0px 52px 52px;"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('buy-button.png'); ?></div>
</div>
</div>

 

http://www.footballshirtstar.com/product_info.php/maglia-calcio-inter-trasferta-stagione-2010-2011-p-32

[kantarou]

I don't really know what you're trying to achieve. The images on the page you're showing seem to be aligned correctly.

 

However using so much inline styling (in fact using any inline styling) is a very bad practice. Also, you should output images as images (<img> elements) and not as backgrounds of <div> elements. You should also provide "title" and "alt" attributes for such images (and preferably "width" and "height" too) so that your images look like this:

<img src="path-to-image" alt="t-shirt thumbnail" title="Adidas Football T-shirt" width="100" height="100">

 

In oscommerce you use the tep_image function for that. To align it, make the image a block-element via CSS and set its left and right margin to auto.

 

The Laughing Man, eh? ;)

[luigicosta]

I don't really know what you're trying to achieve. The images on the page you're showing seem to be aligned correctly.

 

However using so much inline styling (in fact using any inline styling) is a very bad practice. Also, you should output images as images (<img> elements) and not as backgrounds of <div> elements. You should also provide "title" and "alt" attributes for such images (and preferably "width" and "height" too) so that your images look like this:

<img src="path-to-image" alt="t-shirt thumbnail" title="Adidas Football T-shirt" width="100" height="100">

 

In oscommerce you use the tep_image function for that. To align it, make the image a block-element via CSS and set its left and right margin to auto.

 

The Laughing Man, eh? ;)

 

 

the image are not aligned correctly.....

take a look in web..... the write "quantita'" the text field and the image (add to cart) are very very unaligned

I do not know what to do ....

one thing is sure; hate css

[kantarou]

Well it's a complete mess.

 

I assume you want to align those 3 elements (button, input, quantity label) vertically.

• Put "quantita" inside a <span>,
  
• Take <input> and the button out of their common <div> container,
  
• Remove all the float properties,
  
• Give all 3 elements "vertical-align:middle;" property,
  
• Give their parent container (the gray background box) a "line-height:64px;"
  

CSS is an amazing tool. The sooner you understand it the better. To get you started, use a good browser, install the Firebug extension, and read some tutorials and examples at W3C School.

[al3ks]

@@luigicosta

 

It's best to put your styles into stylesheet.css under separate classes and specify these classes in your div tags, eg:

<div class="cartButton">......</div>

 

To adjust the alignments use margins, eg:

 

margin: -10px 0 0 5px;

 

This works like this: the first value (-10px) is the top margin of the element, the second is the right margin, the third is bottom, and last one is left margin. Adjust these to suit your needs.

 

- values are reverse direction.

[luigicosta]

ok ok ok..... thanks to all I solved the problem

<div style="float: left; font-size: 24px; font-weight: bold; color: green; padding: 15px 0px 10px 10px;"><?php echo $products_price; ?> </div>
<div style="float: left; width: 336px; height: 64px;  padding: 0px 0px 0px 0px; background-image: url(/images/add-to-cart-bg.png);">
<div style="float: left; font-size: 12px; font-weight: bold; padding: 24px 0px 0px 0px;"> Quantita'  <?php echo tep_draw_input_field('cart_quantity', '1', 'size=2'); ?></div>
<div style="float: left; width: 49px; height: 32px; padding: 0px 0px 20px 0px; background-image: url/images/backgrounds/qty-field-bg.png);">
<div style="float: left; width: 206px; height: 52px; padding: 9px 0px 0px 15px;"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('buy-button.png'); ?></div>
</div>
</div>