new/featured Columnar layout help

[crazycucumber]

My new site is live , but I have an issue with the layout for featured and new products that apear in a 3 by 3 grid on the main page , and on some category pages under neath the default rows.

If you take a look at www.tapes-direct.co.uk you will see the featured producs name rolls into each other in some resolutions , idealy i would like to pad these out restrict the text to similar width to the image or at least put a border around them.. . .

BUT as soon as I add a border , they wrap , plus because they align top , the boxes are all differnet sizes and it looks rubbish.

Any ideas on a fix or workaround for this greatfully accepted.

[kobra]

Try finding or adding these to your css

.centerBoxContentsNew {
padding 0.1em;
}

.centerBoxContentsFeatured {
padding 0.1em;
}

See if this renders a bit better or not

[crazycucumber]

Thanks for the reply , but still wraps under , as soon as you make the screen smaller than 1050 x ... ( using firefox web developer resize tool )

It's as if im using more than 100% of the screen , maybe as I had to push my sideboxes out to 220px , its not left with much room.

I hope to find a way to just make the text under the product image narrower , possible by putting it in its own td or div !

Thanks for any help.

[kobra]

Thanks for the reply , but still wraps under

Well, yes, if I am understanding correctly,. where do you think all that text is going to appear? I have viewed at 1024x768 and 800x600 and there appears to be correct rendering but a bit more space between them would not hurt. It looked like this:

High Performance - BLUE lane
 marking tape 50mm x 33M
          £9.44

Is this what you see and are concerned with?
The text is a div right now and I do not understand how a table will make it smaller??
you might try :

.centerBoxContentsNew {
     margin: 0.03em;
     }

.centerBoxContentsFeatured {
     margin: 0.03em;
     }

and adjust as you see fit maybe 0.05 or 0.02??

[crazycucumber]

ahhh , maybe I didnt explain well , and we are talking about differnt things ...

Some screen shots needed maybe !!!



YOu should be able to see the text running in to each other on this screent shot.

when I try to put margins , or padding on them it does this :





Sorry if not clear , or we are talking about the same thing , just im seeing different results !


EDIT : Embedding didn't work , sorry .. back to forum class !

[kobra]

Thanks for the pic's...I think that we are talking about the same thing as when I applied too much padding or margin it consumed too much space and moved the right most image down as your pic displays.

Back to your first image, this is not what I see at 1024x768 and can add 0.01 or.02 em without wrapping

[crazycucumber]

OK Yes I see that working now . as you say , not much `em` space to play with
would it help if I narrowed the right column a few PX , would that give me more padding room in the center column .

Thanks again

[crazycucumber]

In response to my own post , Ive changed the right column width down 20px to 200
and it doesnt make too much difference to the layout , and you still dont have much space to play with , of course em is a percentage thing , so increasing them had the same affect .


So kind of a new question , but would it be possible to limit the width of the text under each image to 100px for example ?

[crazycucumber]

Ok , Ive kind of frigged the code to get this to look a bit better , its not ideal , and would appreciate any feedback from you expert php, html , css people out there .

I changed the code in featured_products.php

 // show only when 1 or more
if ($num_products_count > 0) {
  if ($num_products_count < SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS || SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS == 0) {
    $col_width = floor(100/($num_products_count+0.9));
  } else {
    $col_width = floor(100/(SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS+0.9));
  }

Adding the +0.9 to the calculation to get the max available size ( i think thats what its doing ) so by increasing the products number , the division means more space for my products to live in ! and more padding available.

It really is not ideal , and if someone can help with leaving this bit of code original , and changing it so that the text bit of the product description goes into a fixed size area under the image , that would be fantastic.


Cheers

[kobra]

I actually noticed after being inspired by your post that this is auto dividing the available space to 33%. try finding this in your css and separate it out from it's current entry as it is defined with a margin. .centerBoxContentsFeatured

and placing it as a separate entry try this first:

.centerBoxContentsFeatured {
     width: 30%;
}

Now this should, due to float register all at 30% and left aligned so now play with adding either padding or margin and this can be all around or left & or right to center it up again.

.centerBoxContentsFeatured {
     width: 30%;
     margin: 0.5em;
}

When you get this sorted, do the same for the new tag & others as you might need.
You might first back out your file edit