Forums / Templates, Stylesheets, Page Layout / Help with index category layout

Help with index category layout

Locked

Views: 1,333

Results 1 to 11 of 11
This thread is locked. New replies are disabled.
15 Dec 2008, 9:38 AM
#1
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Help with index category layout

Ok i have no idea what i have to get this...

Basically I had index page categories listed in a 3 col layout but for some reason its dropped them into a category/row in single column status...

Under Config>Max values - i have categories to list per row set to 3....

site is whitesflorist.co.uk and css below....

/**
 * 
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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 3215 2006-03-20 06:05:55Z birdbrain $
 */

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3B3B39;
	background-color: #FFFFFF;
	background-image: url(../images/body_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	line-height: 1.5em;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3B3B39;
	text-decoration: none;
	}
 
a:visited {
	color: #3B3B39;
	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: #666666;
	}

a:active {
	color: #000000;
	}

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: 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 #6caa23;
	background-color: #fbf6d5
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	background-color: #6caa23;
	color: #FFFFFF;
	}
.leftBoxHeading label, .rightBoxHeading label { line-height: 4.2em;}

LABEL {
	line-height: 1.2em;
	padding: 0.2em;
	width: 16em;
	}

h4.optionName label {
	line-height: 1.2em;/*adjust to taste*/
	padding: 0.2em;
	width: 16em;
	}

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

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

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 #9A9C86;
	}

/*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 {

	text-align: left;
	width: 842px;
	vertical-align: top;
	background-image: url(../images/mainwrapper_tile.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}

#logoWrapper {
	background-color: transparent;
    height:221px;
	}
	
#headerWrapper {
	background-image: url(../images/header_bg.jpg);
    background-repeat: no-repeat;
}

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	margin: 0em;
	margin-top: 15px;
	}
	

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

#tagline {
	color:#ffffff;
	font-size: 1.4em;
	font-weight: bold;
	text-align : right;
	vertical-align: middle;
	padding-right: 30px;
	padding-top: 60px;
	}

#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;
		line-height: 1.2em;
	padding: 0.2em;
	width: 32em;

	}

/*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 {
	margin: 0em;
	margin-bottom: 0px;
	height: 26px;
	background-color: #989da3;
	font-weight: bold;
	color: #000000;
	padding: 15px;
	background-image: url(../images/nav_cat_bg.jpg);
	background-repeat: no-repeat;
	}
	
#navSuppWrapper {	
    margin: 0em;
	margin-bottom: 0px;
	height: 26px;
	background-color: #989da3;
	font-weight: bold;
	color: #ffffff;
	padding: 15px;
	background-image: url(../images/footer.jpg);
	background-repeat: repeat-y;
	}
	
#navCatTabsWrapper {
    margin-left: 20px;
	margin-right: 20px;
	width: 802px;
	background-image: none;
	height: 20px;
	position: absolute;
	top: 12px;
}

#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;
	white-space: nowrap;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	font-size: 1.4em;
	}

#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;
	}

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

#navBreadCrumb {
	background-color: transparent;
	}

#navEZPagesTop {
	background-color: #FFFFFF;
	}

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

#navColumnOne {
	background-color: transparent;
    }

#navColumnTwo {
	background-color: transparent;	
	}

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

/*.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: 20px;
	}

.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: #606000;
	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;
	}
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

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

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

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

.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: 25%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	height: 35px;
	color: #ffcc33;
	line-height: 4.2em;
	}

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: transparent;

	}
	
.leftBoxHeading {
	margin: 0em;
	background-color: transparent;
	background-image: url(../images/menu_bg.gif);
	width: 159px;
	background-repeat: no-repeat;
	}

.leftBoxContainer {
     border: none;
	}

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

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1em;
	height: 35px;
	color: #ffcc33;
	line-height: 4.2em;
	}
.rightBoxHeading {
	margin: 0em;
	background-color: transparent;
	background-image: url(../images/menu_right_bg.gif);
		width: 150px;
	background-repeat: no-repeat;
	}
	
.rightBoxContainer {
	border: none;
	}


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

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

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

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #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;
	}

#siteinfoIP, #siteinfoLegal {
	background-color: #FFFFFF;
	}

#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: transparent;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

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

.forward {
	float: right;
	}
	
.hiddenField {
	display: none;
	}

.visibleField {
	display: inline;
	}	

.bold {
	font-weight: bold;
	}

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

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}
	
.productListing-odd {background-color: #FFFFFF;
                      }
					  
.productListing-even {background-color: #e5e5e5;
                      }
					  
.listingProductImage {padding: 4px;}

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 {
	background-color: #ffffff;
	}

Appreciate any input...

15 Dec 2008, 10:31 AM
#2
steve_1 avatar

steve_1

Zen Follower

Join Date:
Sep 2008
Location:
London UK
Posts:
100
Plugin Contributions:
0

Re: Help with index category layout

sorry no idea what you are trying to explain

are you refering to middle column (where gallery, leave it to us etc etc images are) or left column or something else ?

15 Dec 2008, 10:39 AM
#3
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Re: Help with index category layout

Thanks for your interest,

Yeah im referring to the category images in centre column (gallery, leave it to us, etc)

basically i had the categories displayed on the front page

Original front page cat display:

CAT 1 | CAT 2 | CAT 3
CAT 4 | CAT 5 | CAT 6

But something i have done, and believe me im trying to get it sorted has displayed them like this:

CAT 1
CAT 2
CAT 3
CAT 4
CAT 5
CAT 6

.... that make more sense? :)

Thanks

Matt

15 Dec 2008, 11:03 AM
#4
steve_1 avatar

steve_1

Zen Follower

Join Date:
Sep 2008
Location:
London UK
Posts:
100
Plugin Contributions:
0

Re: Help with index category layout

understand your question now ... only because I checked in FF and Opera ... in IE7 it is how you want it .. FF and Opera it is not how you want it ??

am I correct ... or do you mean something else ??

15 Dec 2008, 11:06 AM
#5
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Re: Help with index category layout

Yes exactly, I generally use FF.

IE displays it as it should be... any ideas on how to fix this so FF and opera display the same?

15 Dec 2008, 11:14 AM
#6
steve_1 avatar

steve_1

Zen Follower

Join Date:
Sep 2008
Location:
London UK
Posts:
100
Plugin Contributions:
0

Re: Help with index category layout

ok ... try this

in your css stylesheet ... change

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

to

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

as this covers a few areas then check that changing doesn't affect the otther areas .... if it does then change back to how you had it and add at very bottom of stylesheet

.categoryListBoxContents {
	float: left;
	}
15 Dec 2008, 11:23 AM
#7
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Re: Help with index category layout

You my friend are most definitely on my Christmas card list!!

Legend!! Appreciate your help!! That sorted the problem and i cant see any other conflicts or issues on the site! Next time im down in london i def owe you a beer or 10! :)

15 Dec 2008, 11:26 AM
#8
steve_1 avatar

steve_1

Zen Follower

Join Date:
Sep 2008
Location:
London UK
Posts:
100
Plugin Contributions:
0

Re: Help with index category layout

glad to help

notice have removed the zen cart copyright at bottom though ??

15 Dec 2008, 11:36 AM
#9
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Re: Help with index category layout

I was under the impression that you could remove that? The part at bottom stated powered by zencart and not copyright. The back end all states zencart

15 Dec 2008, 12:05 PM
#11
maccon avatar

maccon

New Zenner

Join Date:
Sep 2008
Posts:
49
Plugin Contributions:
0

Re: Help with index category layout

ahh thanks for the link!! :)