Grid Layout Assistance Needed

Hi All

I would like my product layout to look something like on this website http://www.dealsdirect.com.au/c/business-office/

I have been looking through the forums for the past 1 hour and have not found anything to help me...

Basically i just want boxes around all the products and for them to all line up....!

Can anyone please assist me?

Thanks

We'll have to see what you have now to be of any help.

Sorry here is a link to my site https://www.truwater.com.au

I thought i might give some more info about my issue....

I have looked for .centerBoxContentsProducts in the stylesheets but i can not find it....

So i used .centerBoxContentsNew to center the texts on the new products homepage which worked fine

and

.centeredContent to get the products in all the categories centered.

.centerBoxContentsNew {
text-align:center;
margin-top: 10px;
margin-bottom: 10px;
width:auto;
}
.centeredContent {
text-align:center;
width:auto;
}

Now when i add a border to .centerBoxContentsNew (border 1px solid) it seems to mis align everything (see jpg.)

Also when i add a border around cit works but i cant get them to align evenly and it also adds a border to reviews and search sidebox's (see jpg.)

Basically i want all the products to align evenly similar to https://www.dealsdirect.com.au

So i figured that .centeredContent is not where i center products text :( I have tried several others but they dont seem to center the text...

Can someone please assist?

If you don't see .centerBoxContentsProducts in the stylesheet, just add it and style away.

The border height issue is a limitation of div/CSS layout capabilities. Divs will not automatically take the same height as their neighbors; this is one place where table layout can do something divs cannot do. To reliably get same-height boxes, you will have to code a table layout, or specify the height of all of these divs in the stylesheet like

.centerBoxContentsProducts {height: 230px;}

making sure that none will need to be taller than that. That does mean that if you have a whole row of short product displays, they will all have extra space.

Thanks for the reply!

I just did what you said and added the centerboxcontentproducts to the stylesheet.css and it didnt do anything do i need to delete the previous lines i have been using to center?

I also added the height to the previous tags and when i add a border it still goes all funny.....

OK i have jumped the gun a bit...

I just changed the style sheet to what you said above and it seems to have worked for all the products in the categories... the only think i noticed is the line thickness thin around the edges and think on the lines products join! Is there a way to fix this?

Also the new products on the homepage i cant get to align properly.... Please help this has been killing me for the last 12 hours :blink:

And one more thing is it possible to align the produxt centered within the boxes?

Thanks

You need to define "all funny". Adding a border will increase the width of each item, and may force them to not fit in the rows desired. If you are getting say 3, 1, 3, 1, that is the problem.

Yes, the other classes that cause centering will still be in effect unless you delete them.

If you specify a border on an element, you will get that border all around it; they don't merge when two are next to each other. You probably want to add something like

border-left-width: 0px;
border-bottom-width: 0px;

gjh42:

You need to define "all funny". Adding a border will increase the width of each item, and may force them to not fit in the rows desired. If you are getting say 3, 1, 3, 1, that is the problem.

Yes, the other classes that cause centering will still be in effect unless you delete them.

Please read my last post...

as i said i can get the borders around the products in the categories but the thickness is not corrent all the way through.
Is there a fix for this? I cant get it to work on the hompage where the new products are..... :wacko:

All funny.... like the jpg in the a few posts above it turns the products into 2, 1, 2, 1 etc..

gjh42:

If you specify a border on an element, you will get that border all around it; they don't merge when two are next to each other. You probably want to add something like

border-left-width: 0px;
border-bottom-width: 0px;

Ok i just tried that and its getting closer to what i want but it seems it has fixed the lines where products meet but removes the lines on the left edge and bottom edge... :( Please see jpg!

Yes, that will happen. You need more detailed class tags to be able to specify distinctions between top/left/other elements in the grid. That would involve some recoding. I did some work on it, but ran into the brick wall of div height making it impossible to have a fully automatic flexible height divider system without using table layout. If you are willing to specify a fixed height to the elements, the divider layout you want can be done. I shelved development before doing the detailed coding, but it is not difficult in concept.

To get this layout immediately, you would be best off using Column Divider Pro from Free Addons. It uses lots of table/spacer elements in what seems a clumsy fashion, but it does the job. From what I have seen, it only puts divider lines between the elements, but if it does not have an option to put them around the outside as well, you could add a border to the whole wrapper of listings.

If you want a fully gridded box around the listings, you could make a wrapper div for the listing elements and give that a border-left and border-bottom.

gjh42:

Yes, that will happen. You need more detailed class tags to be able to specify distinctions between top/left/other elements in the grid. That would involve some recoding. I did some work on it, but ran into the brick wall of div height making it impossible to have a fully automatic flexible height divider system without using table layout. If you are willing to specify a fixed height to the elements, the divider layout you want can be done. I shelved development before doing the detailed coding, but it is not difficult in concept.

To get this layout immediately, you would be best off using Column Divider Pro from Free Addons. It uses lots of table/spacer elements in what seems a clumsy fashion, but it does the job. From what I have seen, it only puts divider lines between the elements, but if it does not have an option to put them around the outside as well, you could add a border to the whole wrapper of listings.

If you want a fully gridded box around the listings, you could make a wrapper div for the listing elements and give that a border-left and border-bottom.

Ok i have just installed the column deivider pro that you recommended and it seems that its squishd my products please have a look at my new products and category products...

Thanks

Ok i have fixed the squished products, now back to what i wanted to make it look like...

How do i add a box around the item and center it both vertically and horizontally?

Thanks for your patience

.centerBoxWrapperContents table {border: 1px dotted #555555;}

Adjust as required.

You appear to have gotten the listing elements nicely centered already.

gjh42:

.centerBoxWrapperContents table {border: 1px dotted #555555;}

Adjust as required.

You appear to have gotten the listing elements nicely centered already.

Ok i added that to the stylesheet but all that does is add a box around the entire products page not the individual products?

OK... a really close look at the Dealsdirect site (faint lines!) shows that what you are after is not a solid grid, but separate boxes around each product, with space between them.

Sorry for all the running around; all you need for this is to specify the border on .centerBoxContentsProducts, as well as height and a margin:

.centerBoxContentsProducts {border: 1px solid #999999; margin: 3px; height: 260px;}

Since this will make the products add up to wider than the space available, you will need to edit a file to reduce the assigned width of products. I'll have to go look that up and get back.

In your Column Grid version of /includes/modules/your_template/product_listing.php, find this section:```php
// Used for Column Layout (Grid Layout) add on module
$column = 0;
if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
$col_width = floor(100/$num_products_count) - 0.5;
} else {
$col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
}
}

floor(100/...) - 0.5
to
floor(100/...) - 1.5
```php
// Used for Column Layout (Grid Layout) add on module
  $column = 0;	
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  }
```Adjust the 1.5 as required to work with the margin you want.

There are several ways you can tweak this calculation; experiment if you wish once you understand the logic.

gjh42:

In your Column Grid version of /includes/modules/your_template/product_listing.php, find this section:```php
// Used for Column Layout (Grid Layout) add on module
$column = 0;
if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
$col_width = floor(100/$num_products_count) - 0.5;
} else {
$col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5;
}
}

> floor(100/...) - 0.5
> to
> floor(100/...) - 1.5
> ```php
// Used for Column Layout (Grid Layout) add on module
  $column = 0;	
  if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
    if ($num_products_count < PRODUCT_LISTING_COLUMNS_PER_ROW || PRODUCT_LISTING_COLUMNS_PER_ROW == 0 ) {
      $col_width = floor(100/$num_products_count) - 1.5;
    } else {
      $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 1.5;
    }
  }
```Adjust the 1.5 as required to work with the margin you want.
> 
> There are several ways you can tweak this calculation; experiment if you wish once you understand the logic.

Thanks for the advise can i just ask what exactly does the above do? I have been playing around with it for the past hour and i have not seen any changes :S

Also i have any question if you have a look at the picture a have attached of the new products you will see that they dont size properly how can i get them to stay the same size all the time evenly spread vertically and horizontally like the products in my categories and dealsdirect?

It seems that doing the mod to product listing you mentioned above has made the products go to the left in ie7 and not firefox :dontgetit

The calculation sets the percent width for the individual products. Changing from 0.5 to 1.5 means only a 1% change (about 5px) per item, so you might not notice it. It will probably make no difference anyway with the Column Divider Pro mod still installed; that change is needed when using the plain Column Layout Grid mod.

The product varying width issue may be due to modifying the CDP code. I don't know how that code works in detail, so can't advise on it. If you still want to use that mod, I suggest you post in its support thread for help; otherwise, uninstall it and install just Column Grid, and see if that clears up the problem. It will give you smaller gutters between the products, at any rate.