Category Layout errors!!!

[sketchhgal]

This might be really easy to fix buy I can't work it out.
I'm having a problem with the way my site is displaying the category's on the homepage.
Here's a link to better show what I mean.
I want 3 columns across the middle of the page by however many rows are needed to fit all categories in.
the problem is I can not get the 3 columns to fit correctly across the page.
I want to set an actual figure for the width of the category boxes not just a percentage as is currently being used. But I don't know where to set this. Can anyone help please!!!

http://www.edinburghharley-davidson....Davidson-Shop/

[dbltoe]

In the stylesheet, around line 1002 (), try playing with the margin-right. You could make it either zero or one. Those are the only two that will do what you want.

Zero throws them together while one leaves a nice-looking gap.

The problem is that we make an image 100px, decide to put three of them in a 310px-wide space. All works fine till you throw in a margin of 4px or more.

The stylesheet is forcing the categories to wrap.

[sketchhgal]

Thanks for the quick reply. The problem is that I want a 10px margin between the boxes.
Do you know where the element style is set in the zen cart file structure? Because it is that that is setting the width of the boxes not the actual image.

[dbltoe]

When you tell a block you want it to take up 33% of, say 600px, it will take 200px. When you then tell it to give a margin as well, it will add the margin to the 200px. It will not take into consideration that you want a margin and reduce the block accordingly because you already "told" it through some setting to use 200px.
I don't think you'll be happy with changing the admin menu setting to 4 versus three as this will really affect the look.
$col_width is the variable in question and used extensively throughout Zen Cart, so changing it is not simple.
In this case, I would go into includes/modules/category_row.php and change

$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',

to

$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:31%"',

You will need to save this to your custom folder. You haven't created a custom folder and may want to consider doing this before going any farther. Using the classic will only create massive headaches at upgrade time.

[sketchhgal]

Thanks very much for the help with this. Much appreciated.

[sketchhgal]

I'm having the same problem when the site is shopwing the actual products. Don't suppose you can tell me where I can fix that variable in the file system could you?

[baltimucho]

I'm having the same problem, and I have tried all the CSS and "category_row.php" edits.

I just want my SubCategory text buttons to display side-by-side.

http://eternitystore.com/index.php?m...=index&cPath=9

What the freek am I doing wrong?

::mitch::

[gjh42]

You may have tried "all" of the edits, but if so you didn't keep them, or didn't use the right ones.

In your stylesheet, find

.categoryListBoxContents{
	font-size: 13px;
	font-weight: bold;
	background-color: #E9D19D;
	margin: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #101D41;
	text-align: center;
}

and add


width: 43% !important;
float: left;

to get

.categoryListBoxContents{
	width: 43% !important; 
	float: left;
	font-size: 13px;
	font-weight: bold;
	background-color: #E9D19D;
	margin: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #101D41;
	text-align: center;
}

A stock stylesheet has

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

which allows all of these elements to sit as many as will fit on one line. You appear to have removed #logo as well as .categoryListBoxContents from the selector list:

.centerBoxContents, .specialsListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

[baltimucho]

Heh... I tried (cut/copy/paste) so many edits, but I tried to be careful! =)

It's all about the "!important" attribute.

I put back the logo code and such and just played with turning "important" on and off and that made all the difference.

From now on when something else doesn't work, the first thing I'm gonna try is "!important!"

THANKS!!!

[gjh42]

When writing new code, it is best to avoid the need to use !important in the stylesheet, but for changing existing hard-coded styling it is often the most efficient method.