centering categories-links on index page

[scary]

I'm sorry to break down and ask, but the new style sheet with v3 is ... a whole different animal.

I promise, I've tried everything, run every search possible - there are quite a few tips for centering the links on the old version, but they don't exist on the new sheet.

And while I've looked up every bit of php that has to do with categories, I'm afraid it doesn't make sense to me to align them from there (mostly because I can't see how I'd do that, or where I'd do that.)

The page in question is www.boodababies.com/shopping

Thank you for any direction.

[clydejones]

Are you talking about the categories sidebox:

find this class in your style sheet:
.sideBoxContent {background-color: #FFFFFF; padding: 0.4em;}

and change it as follows:
.sideBoxContent {background-color: #FFFFFF; padding: 0.4em; text-align: center;}

[scary]

Thanks for your reply, but No. My index/main page opens with just categories (and always will since I'll never have a HUGE-O store) and beneath the category images are the category names. (I even changed the names, hoping they'd ... kind of even themselves out. HA.)

I CAN center it all if I center the wrapper, but I actually want the sidebox content aligned left.

Is there an icon for a BIG FAT sigh? (I'm in the middle of re-doing my images. pbfbtbft.)

[clydejones]

try adding this to your stylesheet.css
#indexCategories {
padding: 0.8em;
margin-top: 35px;
margin-left: 80px;
text-align: center;
}

let me know if this works

[scary]

No, I'm afraid your lovely piece of code effected no change at all. I placed it in a variety of spots, too.

I did try and invent my own code earlier, after prowling through numerous CSS tutorials. Was there a simple trick of naming conventions? (I thought, since it was a category-links issue that I'd find something to nudge around in ... category links.)

I also, just for the record and for anyone else who might be struggling with these alignment problems, thought to extract JUST the item I wanted to align. The problem with this mystifying new CSS is that I could FIND what I wanted.

Thank you for your effort. I wish I knew how to educate myself.

[kuroi]

If I understand what you are trying to achieve, your problem isn't how to find where to set something to achieve your desired alignment. It's where to unset the stuff getting in the way!

Firstly, a check that I do understand what you want to do. I think you want to centrally align the three attractive icon/links in the middle of your page, or possibly you like them where they are (you shouldn't, I'll explain why below) and want to center the text underneath them.

Firstly it's not clear to me what centered actually means to you in the this context. You have a page that purports to be liquid, i.e. has a mainWrapper width of 100%. But your layout table is a mixture of %s and fixed widths. The result is that you have an empty, invisible columnTwo (right hand column) that is a table cell with the following values: left:708px, top:99px, width:150px, height:470px. This extends down the right hand / middle of your page (depending on browser window size), limiting how far your category icons can move. In fact, as I will now explain, they can't move at all as they are squashed between margins on the left and this invisible column on the right.

You have probably done the right thing in putting each into a div with width:33%, but then undermined it by sticking in margins right and left that mean that these divs need more than 100% of the space available to them. Hmmm.

An example of the sort of CSS which is getting in the way is that for .categoryListBoxContents where yoiu have the following:

margin-top: 15px;
margin-bottom: 20px;
margin: 35px;

The net effect of this is for your top and bottom margins to be overridden and for left and right margins of 35px to be added. I doubt that this is what you intended.

So my advice would be to stop adding CSS to try to make this work, clean up your table dimensions and delete any category-related CSS that isn't contributing explicitly to what you are trying to achieve.

It won't be easy, but it can be done. Good luck.

[scary]

Ahh, the always popular 'Good Luck'. lol.

Thank you so much for giving me something ... conceptual. I wonder if there was, inadvertently, a mix of my old style sheet and the new and improved one?

Either way, it's very good to know that one direction makes it liquid: (wrappers?)
and the other means you're setting fixed (yep. Tables habits rear their heads.) dimensions.

It IS a little difficult to decipher the new CSS ... (for instance, my product descriptions are actually disappearing from the page. Logic (well, MY logic) tells me to give right and left margins a try. The problem is, that without the 'CSS map' - I don't know which or what to mess with.

It's a sad tale, but I know quite a few customizers who do the same thing.

At any rate, let mine be a cautionary tale. (It sucks to be the heroine of one of those.) Thanks! (oh. It's STILL not centered, but I think I'm making progress. lol)

[kuroi]

A little wordy perhaps, but not really conceptual. Anyway, here's some mega practical advice ... either turn the right hand column off so that it stops getting in your way, or turn something inside it on, so that you can see the space that you have to
play in.

I personally doubt that you will ever see a Zen Cart stylesheet map that is particularly useful, for three reasons:

1. Zen Cart is pretty good at providing you with IDs and classes for all the HTML tages it generates, many of which don't actually appear in the installed stylesheet and if you choose to add them, how they work will depend on how you define them
2. There are a lot of configuration options set in the Admin which override or impede things that you do with CSS, and given the large variety of external settings it would be near impossible to define concisely how the stylesheet would work in each situation
3. The cascading part of cascading style sheets means that as soon as you start modifying them, any guide to your starting position gets rapidly out-of-date and often becomes misleading.

Why am I stressing this? Simply because I believe that it's too easy to get hung up on the need for some idealised explanation of how to adjust the stylesheet to achieve desired effects. Personally I find it much more effective to start with the HTML Zen Cart generates for the thing I want to change, then investigate the current state of IDs and classes that can affect the relevant tags, creating them if they don't already exist, i.e. I don't start with the stylesheet. I start with the HTML.

Sorry ... far too many words again

[seethrou]

From your second post, if I understand, you can't "actually want the sidebox content aligned left. "

In short, by viewing source, you have the following code.

Note: This is a simpified version and without the contents of related sideboxes.

<td style='width: 200px;' class='columnLeft' id='navColumnOne'>
<div style='width: 165px;' id='navColumnOneWrapper'>
<!--// bof: categories //-->
<div style='width: 165px;' id='categories' class='leftBoxContainer'>
<h3 id='categoriesHeading' class='leftBoxHeading'>
Categories
</h3>
</div>
<!--// eof: categories //-->

<!--// bof: extralinksbox //-->
<!--// eof: extralinksbox //-->

<!--// bof: information //-->
<div style='width: 165px;' id='information' class='leftBoxContainer'>
<h3 id='informationHeading' class='leftBoxHeading'>
Information
</h3>
<div class='sideBoxContent' id='informationContent'>
</div>
</div>
<!--// eof: information //-->

</div>
</td>

First, you have two width,
1. 200px, the width for the column in left
<td style='width: 200px;' class='columnLeft' id='navColumnOne'>

2. 165px, the width for the sidebox in left
<div style='width: 165px;' id='navColumnOneWrapper'>
<!--// bof: categories //-->
<div style='width: 165px;' id='categories' class='leftBoxContainer'>

And in your css, you have

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;

}

From the above #navColumnOneWrapper - and with margin: auto;
That mean, you tell the 165px sideboxes in left sit in the middle and between the 200px column in left.

No matter how you set your sidebox contents, they still in their 165px sideboxes.

For the left column left only, try to remove the #navColumnOneWrapper from the above stylesheet and modify it to see as.

#navColumnOneWrapper {
text-align: left;
}

That mean show the sideboxes in column left to the left.
And you can padding your sideboxes contents as normal.

The above is tested and seems work from your site.

Another suggustion, get some tools to help and easy your works.
Tools For Fast Find Items In Css


.

[scary]

kuroi:

I really can not thank you enough. The disabling/turning off Right Column worked wonders.

I DO see that many of my table settings were decided in the last version of ZC.

Actually, though, for beginners, it is a conceptual shift. The logic is substantially different - even the many sources, and 'which instructions' rule take quite a bit of getting used to. I'm glad to go through it and clean up my MANY messy instructions.

seethrou:

And thank you, to you, too! On the heels of kuroi's invaluable guidance, I was able to see the value of your advice.

NOW I'm trying to make my product description sit nicely and in a block.

I know the experts can't imagine that this is true, but many of us who meet on other forums will confess to each other that we make changes, move things, make more changes, tug and pull and nudge and then - when it works? run away, run away!! Thank you!