Centering Content in Categories Layout

[Ravyn]

Hey all,

I did quite a few searches to try and find some help with this problem, without any luck.

I'm attempting to fix the layout of my Categories mainpage. The photos of the different categories are all lining up in a single line down the left side of my Centerbox. I've played with the css for quite a while without any promising results.

I would like the category photos to be centered. As well, either have 2 categories per row, to take up more of the white space within the centerbox, or be able to increase the size of the photos/font to use up more of the white space.

Ideally a blend of both of those options, slightly bigger photos/text, and 2 categories listed per row, centered within the space provided.

A warning, the site is for a lingerie business, and as such may contain some explicit photos, but if you would like to take a look to get an idea of what I'm talking about, the site can be seen here:

http://test.alexasroom.ca

I'm using Zencart 1.3.7a
And here is my current stylesheet.css:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	/**background-image: url(../images/bgimage.jpg);  */ 
	background-repeat:repeat-x;
	background-color: #494949;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	/*border: solid 1px #000000;*/ 
	}
 
a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #FF00C0;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #FF0000;
	}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 3px;
}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
/*	float: left;*/
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
  float: center;
	text-align: center;
	vertical-align: center;
	}

#logo {
  background-image: url(../images/logo6.jpg);
  width: 800px;
  height: 260px;
  text-align: center;
  }

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #FFFFFF;
	text-align: center;
	width: 100%;
	vertical-align: top;
	color: #000000;
	}


#logoWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

#headerWrapper {
  background-color: #FF00C0
}
/*#logoWrapper {
  width:760px;
  background-image:url(../images/logo2.jpg);
  background-repeat:no-repeat;
  }*/                
  
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#tagline {
	color:#FF00C0;
	font-size: 1em;
	text-align : center;
	vertical-align: bottom;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #FF00C0;
	font-weight: bold;
	color: #ffffff;
  height: 1%;
	width: 100%;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navMainSearch {
	float: right;
	}

#navBreadCrumb {
	background-color: #FF00C0;
	}

#navEZPagesTop {
	background-color: #FF00C0;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

#navColumnOne {
	background-color: #FF00C0;
	}

#navColumnTwo {
	background-color: #FF00C0;
	}

#contentColumnMain {
	border: 2px inset #000000;
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	border: 4px outset #FF6699;
	width: 100%;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 0.8em;
		  border: 2px inset #000000;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #cccccc;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	position: relative;   /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

.cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
	width: 50%; 
	margin: 0.2em;
	padding: 0.5em;
	}
.mediaTitle {
	float: left;
	}
.mediaTypeLink {
	float: right;
	}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	} 

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
	}

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 1em;
		text-align: center;
	vertical-align: center;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

.sideBoxContent {
	background-color: #ffffff;
	padding: 0.4em;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #FFFF00;
	}

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.2em 0em;
	}

h3.leftBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	} 

h3.rightBoxHeading a:hover {
	color: #FF0000;
	text-decoration: none;
	}

.rightBoxContent {
	background-color: #ffffff;
	margin-bottom: 1em;
	}

.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: center;
	}

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/*misc*/
.back {
	float: left;
	}

.forward, #shoppingCartDefault #PPECbutton {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
	background-color: #ffffff;
	}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
	clear: both;
	}

.seDisplayedAddressLabel {
	background-color:#85C285;
	text-align: center;
	}
.seDisplayedAddressInfo {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	}
#seShipTo {
	padding: 0.2em;
	}

Any help would be greatly appreciated,
Thanks,
Ravyn

[nigelt74]

Never seen this before, didn't know it could be changed

Had a look here

Admin --> configuration --> Maximum Values --> Categories To List Per Row

mines set to 3

If yours is set to 1 change it to 2

I can't play with it as, the stores are all live and my test sites toast at the moment

[Ravyn]

Thanks for the reply. I tried editing that value, and all it accomplished was stretching out the length of the current category listing to stretch across the entire centerbox.

So it looks like it's sizing them properly to fit 3 in a row. (You can even see a slightly larger break between the categories in sets of 3 when I have that value set to 3). But for some reason it won't display them side by side.

As well, I noticed when I fired up Internet Explorer that the images appear centered, but they aren't centered in Firefox, if that makes a difference to anyone who may be able to help.

Cheers,
Ravyn

[nigelt74]

Ok your style sheets got a bit mixed

try adding this right at the bottom

.centerBoxContents {
float: left;
margin-left: 0em;
margin-right: 0em;
}

It will start to fix it the margin changes will make them run together, but it should give you a basis to start from if you get my meaning, when you set it to Two columns, try increasing the margins slowly

[Ravyn]

Alright, so I added the part you listed to the bottom of my stylesheet, and playing with the margins caused the categories to have no space between them. After some more fooling around, I've managed to get them to appear 2 side by side, then a 3rd one below them. Then 2, then 1 again, then 2 then 1.

In IE, I have it working properly in that there's 3 per row, but the sizes of them are no longer uniform, they are only as big as needed for the image/text that they contain, not sure how or when that switched up.

Any idea why they won't display 3 across in firefox still? And how I managed to get them un-uniform in size in the IE display?

Oh, and I tried switching it to 2 Categories per row maximum, and that only caused it to go back to single file display in Firefox. It showed up as 2 categories per row in IE, but the size was still all wonky.

Thanks again for all your ideas and help,
Cheers,
Ravyn

[rbarbour]

zen cart by default divides the column width by the
Admin --> configuration --> Maximum Values --> Categories To List Per Row

not sure but try removing
. 'style="width:' . $col_width . '%;"'

in category_row.php

and added:

width: 49%;

in stylesheet.css

[gjh42]

The category listing code sets the individual category width as a percent of the total center column width, and any margin or padding is added to that per standard CSS operation. You can set a new width in the stylesheet and have it override the inline width styling, using !important added to the property value.


.categoryListBoxContents {width: 140px !important;}


Editing category_row.php as described is a more permanent solution. Eventually most inline styling like this should move from the PHP code to the stylesheet.

[Ravyn]

Thanks guys, I tried what you said gjh42 and it fixed the table problem. It's displaying all 3 columns now. The only thing it didn't fix, is the columns still aren't quite centered within that box.

And lastly, where abouts can I edit the size of the photos used for the categories? Is it a matter of editing the photo size in the configuration settings within the admin panel, and then having to re-upload all of the photos to have them resized to the new size? Or can I do all of the resizing with code and save me a ton of work re-uploading individual images.

[Ravyn]

Solved the issue myself. Still couldn't get it to center via a text-align: center in my css, but managed to tweak the margins to get the categories to appear centered.

Thanks to everyone for their help.

[gjh42]

You can set the displayed image size in admin, but that is a mediocre solution that will give fuzzier images and wasted bandwidth serving bigger-than-needed image files. The best solution is to resize the image files themselves, using a batch resizing tool, and then re-upload them.

Changing admin settings does nothing to the actual image files whether you re-upload or not.