Thread: layout issues

Results 1 to 5 of 5
  1. #1
    Join Date
    Dec 2008
    Posts
    4
    Plugin Contributions
    0

    Default layout issues

    Hi, I've been trying to do this for a few days now and have scoured these forums/the web without joy.

    I am customising my template to try and match the rest of my site (the chilliking com).

    My aim is to have the left column tight to the left hand side of the screen then have the centre column next to it with a fixed width.

    Issue 1

    Currently I have blank space (a light shade of blue) to left of my left hand column and to the right of my centre column (i have disabled my right clumn.

    Issue 2

    On my stores homepage i am using a background image (ez_back.jpg) under the text that says "New Products for December" however this appears to be repeating. Any ideas how I tweak this so the so it doesn't repeat?

    Thanks in advance!

    Code:
    /**
     * 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-color: #e5edf5; 
    	}
    
    
    #logoWrapper {
    width:760px;
    height:150px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    }
    
    
    a img {border: none; }
    
    a:link, #navEZPagesTOC ul li a {
    	color: #606060;
    	text-decoration: none;
    	}
     
    a:visited {
    	color: #606060;
    	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: #606060;
    	}
    
    h1 {
    	font-size: 1.5em;
    	}
    
    h2 {
    	font-size: 1.4em;
    	}
    
    h3 {
    	font-size: 1.3em; color: #FF0000;
    	}
    
    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;
    	}
    
    #logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    	float: left;
    	}
    
    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: left;
    	width: 1000px;
    	vertical-align: top; 
    	}
    
    #headerWrapper, #contentMainWrapper, #
    
    , #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    	margin: 0em;
    	padding: 0em;
    	}
    
    #navColumnOneWrapper, #navColumnTwoWrapper,#mainWrapper {
    	margin: auto;
    	} 
    
    #tagline {
    	color:#000000;
    	font-size: 2em;
    	text-align : center;
    	vertical-align: middle;
    	}
    
    #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: #ffffff;
    	font-weight: bold;
    	color: #C80000;
    	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: #C80000;
    	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-image: url(../images/ez-back.jpg);
    	}
    
    #navEZPagesTop {
        text-align: center;
    	/*background-color: #abbbd3;
    	background-image: url(../images/tile_back.gif);*/
    	background-color: #ffffff;
    	background-image: url(../images/ez-back.jpg);
    	font-size: 0.9em;
    	font-weight: bold;
    	color: #C80000;
    	margin-bottom: 0.5em;
    	padding: 0.5em;
    	}
    
    #navEZPagesTop a {
            color: #ffffff;
    }
    
    #navBreadCrumb, #navEZPagesTop {
    	font-size: 0.95em;
    	font-weight: bold;
    	margin: 0em;
    	padding: 0.5em;
    	}
    
    #navColumnOne {
    	background-color: #FFFFFF;padding-left:10px;
    	}
    
    #navColumnTwo {
    	background-color: #FFFFFF;
    	}
    
    /*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;
    	}
    
    .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    	font-size: 0.9em;
    	}
    
    /*Shopping Cart Display*/
    #cartAdd {
    	float: left;
    	text-align: center;
    	margin: 1em;
    	border: 1px solid #ffffff;
    	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 0em;
    	}
    
    /*sideboxes*/
    .columnLeft {}
    
    h3.leftBoxHeading, h3.leftBoxHeading a {
    	font-size: 1em;
    	color: #ffffff;
    	}
    
    
    .leftBoxHeading {
    	margin: 0em;
    	background-color: #ffffff;
    	background-image: url(../images/leftbox-back.jpg);
    	padding: 0.5em 0.2em;
    	}
    
    
    
    
    
    
    .centerBoxHeading {
    	margin: 0em;	
    	background-image: url(../images/ez-back.jpg);
    	padding: 0.5em 0.2em;background-repeat:no-repeat;
    	}
    
    .leftBoxContainer {
    	border: 1px solid #ffffff;
    	margin-top: 1.5em;
    	}
    
    .sideBoxContent {
    	background: url(../images/sidebox_back.jpg);
    	background-position:bottom;
    	/*border-top: none;
    	border-left: 1px dotted #9a9a9a;
    	border-right: 1px dotted #9a9a9a;
    	border-bottom: 1px dotted #9a9a9a;
    	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;
    	}
    
    
    
    
    #inner-image {height: 150px;background-image: url(images/MainLogo.png);background-repeat: no-repeat; background-position: 165px 0px;}
    #outer-image {height: 150px;background-image: url(images/outer-image-chill2.jpg);background-position: center top;}

  2. #2
    Join Date
    Jun 2003
    Posts
    33,715
    Plugin Contributions
    0

    Default Re: layout issues

    The URL of the shop area where this can be seen?
    Please do not PM for support issues: a private solution doesn't benefit the community.

    Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

  3. #3
    Join Date
    Dec 2008
    Posts
    4
    Plugin Contributions
    0

  4. #4
    Join Date
    Dec 2008
    Posts
    4
    Plugin Contributions
    0

    Default Re: layout issues

    well i appear to have a cachin issue on my work pc because issue two seems to have been resolved.

    issue one - when i resize the window the content mmoves (e.g. the featured products drift apart when the window is expanded) any idea how i stop this?

  5. #5
    Join Date
    Dec 2008
    Posts
    4
    Plugin Contributions
    0

    Default Re: layout issues

    any idea how i pin my store to the left side of the screen?

    as i expand the window size the left column moves towards the centre of the screen. I'd like it to remain on the left and still have thenetre column fixed width.

    http://www.thechilliking.com/store/index.php

 

 

Similar Threads

  1. Layout issues!
    By gazag in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 26 Sep 2011, 05:21 PM
  2. layout issues?
    By munchie in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 17 Jul 2011, 06:43 PM
  3. layout issues
    By lucianman in forum General Questions
    Replies: 2
    Last Post: 18 Jun 2010, 11:12 AM
  4. Major issues with Column Layout / Grid Layout for Products Listing
    By kinget in forum All Other Contributions/Addons
    Replies: 5
    Last Post: 27 Jul 2007, 10:11 PM
  5. layout issues
    By clint88 in forum General Questions
    Replies: 4
    Last Post: 22 Jul 2006, 02:42 PM

Bookmarks

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
Zen-Cart, Internet Selling Services, Klamath Falls, OR