Problems with Sub-Category Pages

[guyhancock]

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

[schoolboy]

HAve you looked at:

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

"Categories To List Per Row"

[guyhancock]

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

[schoolboy]

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.

[guyhancock]

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

[schoolboy]

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

[guyhancock]

Whooopee!

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

[schoolboy]

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:

<div ID="thisOrThat">

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

[guyhancock]

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

[guyhancock]

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:
<td id="navColumnOne" class="columnLeft" style="width: 190px;">
</td>
<td valign="top">
<div id="indexCategories" class="centerColumn">
<h1 id="indexCategoriesHeading">Urban War / Metropolis</h1>
<div id="categoryImgListing" class="categoryImg">
</div>
<div class="categoryListBoxContents" style="width: 50%;">
<a href="http://wargamesheaven.co.uk/index.php?main_page=index&cPath=4_30_124">