Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Sep 2008
    Posts
    49
    Plugin Contributions
    0

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

    Code:
    /**
     * 
     * 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...

  2. #2
    Join Date
    Sep 2008
    Location
    London UK
    Posts
    101
    Plugin Contributions
    0

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

  3. #3
    Join Date
    Sep 2008
    Posts
    49
    Plugin Contributions
    0

    Default 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

  4. #4
    Join Date
    Sep 2008
    Location
    London UK
    Posts
    101
    Plugin Contributions
    0

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

  5. #5
    Join Date
    Sep 2008
    Posts
    49
    Plugin Contributions
    0

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

  6. #6
    Join Date
    Sep 2008
    Location
    London UK
    Posts
    101
    Plugin Contributions
    0

    Default Re: Help with index category layout

    ok ... try this

    in your css stylesheet ... change
    Code:
    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, {
    	float: right;
    	}
    to
    Code:
    #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
    Code:
    .categoryListBoxContents {
    	float: left;
    	}

  7. #7
    Join Date
    Sep 2008
    Posts
    49
    Plugin Contributions
    0

    Default 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! :)

  8. #8
    Join Date
    Sep 2008
    Location
    London UK
    Posts
    101
    Plugin Contributions
    0

    Default Re: Help with index category layout

    glad to help

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

  9. #9
    Join Date
    Sep 2008
    Posts
    49
    Plugin Contributions
    0

    Default 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

  10. #10
    Join Date
    Sep 2008
    Location
    London UK
    Posts
    101
    Plugin Contributions
    0

    Default Re: Help with index category layout

    https://www.zen-cart.com/tutorials/index.php?article=42

    assume you are using zencart template with your own images ?

    no problem ... just wondered if you knew you had removed it is all

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. help with category page product layout
    By Johnnycopilot in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 4 Apr 2012, 11:48 PM
  2. Replies: 2
    Last Post: 23 Mar 2012, 03:28 PM
  3. fubar'd layout on category index
    By travellers in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 10 Feb 2009, 05:28 PM
  4. Help with Sub Sub Category (Categories) Layout
    By gorbry in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 19 May 2006, 02:35 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg