Problems with Sub-Category Pages

Hi there

I've done lots of looking in the threads but can't find anything relating to this specific problem.

My sub-categories don't seem to be displaying correctly, in terms of showing 3 per row. This actually varies from sub-cat to sub-cat.

Information to help:

1. Using version 1.3.8a
2. the website is https://www.wargamesheaven.co.uk (still populating it)
3. the specific problem can be seen if you
   (a) click on Gaming Aids you see 2 sub-cats and then the third on the next row
   (b) click on sci-fi miniatures you see 3 sub-cats on a row and the fourth on the next row
   (c) if you then go "down a level" by clicking on Urban War/Metropolis you get four sub-sub-cats per row.
   (d) as I wondered if this was something to do with image size I have used the same image for all the dice sub-cats but, if you click on dice, you will see that this is putting 2 sub-cats per row.

I'm confused! Can anyone PLEASE help me here.

If there is any information you need to diagnose this, just let me know.

Thanks for your help.

Guy

HAve you looked at:

admin>>>configuration>>>maximum values>>>

"Categories To List Per Row"

Hi there

The categories to list per row is set to 5, though if I change it, say to 3, the problem persists (just wrapping at a different point).

cheers
Guy

Your centre column is not wide enough to accommodate the number of cats you wish to display across the page.

Try reducing the width(s) of the left and right columns, or slightly increasing the width of the main_wrapper (see the stylesheets).

You could also try making the category images less wide.

... there are a few variables at play here... adjust them and it will probably solve your problem.

Hi

Tried changing the mainwrapper, upped it from 1000 to 1200px and the problem still persists, even though I have reduced the number of sub-cats per row to 3.

I don't want to reduce the width of the side boxes as this causes text wrapping AND when I did do it, I still didn't get the sub-cats showing properly.

cheers
Guy

This may be a problem relating to padding and / or margins in your css...

If I take this declaration in your Stylesheet:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: left;
        padding: 5px;
	}

and change the padding to 0.5px

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: left;
        padding: 0.5px;
	}

... I get THREE category descriptions across the page...

Whooopee! :smile:

Just changed that and it's looking pretty good. Thanks a lot.

Seeing as how you are a superstar and have fixed my problem, can I ask another question?

If I want to centre the images/text for the listed sub-cats (but leave the heading left aligned), which of those items in the stylesheet should I change? I had a look but have so far been unable to decipher the names.

This is the right bit of the sheet I think (it is the one I just amended)
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: left;
padding: 0.5px;
}

Don't worry if not. Thanks again
Guy

Basically, when working with CSS, there are a few groundrules that are helpful to know.

1. In many template-driven websites, style ID's and classes that exist in the core code (html, php, whatever), are NOT NECESSARILY declared in a stylesheet. ZC is no exception, so there will be occasions when you look at a bit of code and see something like:

... and when you look for it in the stylesheet, it ain't there.

That element will "inherit" a more generic class style elsewhere in the stylesheet, such as the .body style - until (and if) you give it its own declaration - which will then over-ride a generic declaration.

The purpose here is often just to give a person the OPPORTUNITY to add a specific style, if they want to...

2. Style declarations are read "chronologically" - first by the order in which they appear in a stylesheet, and secondly by the order in which stylesheets load into the browser.

3. Many style ID's and Classes are "nested" - such as in the example you show. This is a space-saving device, where styles that all share the same declaration, are listed separated by commas. If style ID or Class appears in such a "nest", and you want that style to have a different declaration, then you must separate it OUT of the nest and give it its own declaration. If the Class or ID needs an ADDITIONAL declaration, but still needs the declaration in its nested group, then you just add the additional declaration into the sheet, leaving the element in its "nest" as well.

4. To be able to SEE what styles apply to what elements on a page, you should use FireFox browser with the Web developer Add-on (available at the firefox mozilla website). This tool allows you to call up any web page and perform a host of analytical functions on that page as it displays in the browser window... INCLUDING the ability to flag up what Style ID or Class is influencing a particular element. It ALSO allows you to do an OFF-LINE edit of the stylesheets, so you can try different declarations and values, and then immediately see what effect your changes have on the page. When you are happy with changes, you just commit them to the actual stylesheet in the css folder of your template.

So, get Firefox and the Developer Toolkit Add-on, and start investigating how these amazing tools will make your life easier.

Thanks for that.

I was thinking I was going to have to separate them all out to individual lines and then play with them one at a time. I use Safari (got fed up with Firefox) so will get the firefox add-on and try that.

cheers
Guy

After all the Whoopeee-ing (if that isn't a verb it should be) I found that I couldn't live with the centre and right-hand column contents being flush up to the left (i.e. I have to have that padding at 5px).

Using firebug to look at what is happening, I see the following (below) when looking at a two category listing. When I play around with the numbers and reduce the % in the Style area, I can fit the right number of categories in. But I don't understand where and how I can amend/edit this so that categories fit.

Can you please help an old idiot?

cheers
Guy

**Style:
**element.style {
width:50%;
}

HTML:

A quick update to (hopefully) help anyone else looking at this problem.

Having done a bit of quick maths I decided that the problem was, if I want to retain the padding, that the code was allocating too much space to the sub-cats. Therefore, I edited the files category_row.php and new_products.php and amended the calculation of the width from

$col_width = floor(100/$num_categories);

to
$col_width = floor(90/$num_categories);

This seems to have had the desired effect.

cheers
Guy

Sorry to hijack this thread, but I am having the same problem.

The weird thing was, was that my sub-category listings were 3 across since the beginning - the way I wanted it .... and then all of a sudden, they started stacking instead. And the only thing I was doing at the time of the mysterious change, was adjusting font colors in the CSS. :blink:

Everywhere you tell it to do 3 sub-category images/listings across is set (as has been since install) .... yet it continues to stack. :wacko:

I've checked all paddings/margins ... in fact, I've even expanded the mainwrapper and centercolum ... so there is MORE room than there was originally.

I know in the first few categories that there are no sub-category images - accidentally deleted them ... but if you look down in footwear, etc you will see them clearly.

http://www.theironhorseman.com/motorcycle-store/

Thanks in advance for you light you can shed on this.

Beyre

Not sure I can help a lot, but two things:

1. replying may help keep this bumped up; and
2. I'm not sure about the width setting you have for each item in the columns. I had a quick browse around your site and in the page for chaps/shorts etc that text for the women's ones looks quite wide. So much that if you multiply that by three (or maybe even two) I don't think it would fit. Have you checked (sorry if this is obvious) the width settings for the images?

cheers
Guy

Heya and thanks for helping out!

Those sub-cats where you just see text ... they originally had the images and they were 3 across just fine. I accidentally deleted the images after they started stacking. The sub-cat images are 150px x 200px ... and are set as such in Admin.

Like I said ... everything was just fine from the beginning ... I changed some font color and viola - images started stacking! :unsure:

I know the feeling, it's how I felt when my three wide started wrapping after two images.

Sorry I can't help more. Good luck.
Guy

Sorry to keep bumping this, but someone has got to have an answer.

The sub-category image stacking only happens in FireFox and Chrome ... it's just fine in IE.

This is the default 3 across layout ... I have not changed the layout.

The images are 150px wide = 450px in a 700px wide space - plenty of room for them ... as you can see in IE.

What is causing the stacking and how can I fix it ???

beyre:

Sorry to keep bumping this, but someone has got to have an answer.

The sub-category image stacking only happens in FireFox and Chrome ... it's just fine in IE.

This is the default 3 across layout ... I have not changed the layout.

The images are 150px wide = 450px in a 700px wide space - plenty of room for them ... as you can see in IE.

What is causing the stacking and how can I fix it ???

what happens if you add following to the style ?? float:left;

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {stylesheet.css (line 538)
margin:2em 0;
}

i can not tell the effect at this time, im having some problem with my display going in and out . :cry:

That did it!

Thank you! HUGS!

no problemo :blush:

A quick follow up question....

Having sorted that other stuff out, I know see that when I have multiple images for a product, it suffers from that wrapping. But (probably because I'm stoopid) I don't know which php file to edit. Can someone please tell me the name of the php file that displays the product info page with the additional images?

Thanks for your help.
Guy