Jump to content

Archived

This topic is now archived and is closed to further replies.

luigicosta

for expert of CSS alignment problems

Recommended Posts

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

Share this post


Link to post
Share on other sites

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? ;)


"There is something enduringly seductive in random, explosive acts of no consequence"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


"There is something enduringly seductive in random, explosive acts of no consequence"

Share this post


Link to post
Share on other sites

@@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.


Find this post helpful? Click the 'Like this' button. :)

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

×