Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / cant center logo header

cant center logo header

Locked

Views: 1,079

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
25 Jun 2010, 6:52 AM
#1
thehiprose avatar

thehiprose

New Zenner

Join Date:
Jun 2010
Posts:
7
Plugin Contributions:
0

cant center logo header

version 1.3.9a

http://www.styl-us.com.au/store/

My logo needs to be centered with a black background and my main page needs to have a white background. I cant' get them to be separate.

I am using a CUSTOM template I created.

/* Main background colour of page */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #780b0b;
background-color: #000000;

}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #B0BA1B;
text-decoration: none;

}

a:visited {
color: #B0BA1B;
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: #B0BF24;
}

a:active {
color: #B0BF24;
}

h1 {
font-size: 1.5em;
color: #0A0A0A;
}

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

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

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

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

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

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

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

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

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

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

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

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

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

/wrappers - page or section containers/

.centerBoxContents {
background-color:#FFFFFF;}

#logo {
background-color:#000000;
background: url(../images/logo.gif);
background-repeat: no-repeat;
width: 820px;
height: 260px;
margin: auto;

} 

#mainWrapper {
background-color: #ffffff;
text-align: center;
width: 80%;
vertical-align: top;
border:0px solid #B0BF24;
}

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

#logoWrapper{
width: 820px;
height: 300px;
background-color: #000000;
background-image: url(../images/logo.gif);
position: right;
background-repeat: no repeat;

}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
/*adds space between the outer and the inner sidebox background */
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0em;
margin-right: 0em;
}

#tagline {
color:#000000;
font-size: 0em;
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;
}

/*Top Home menu above Logo */

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #000000;
padding: 0em 0em;
font-weight: bold;
color: #B0BF24;
height: 0.5%;
}

#navCatTabsWrapper {
background-color: #000000;
color: #B0BA1B;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: .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: #B0BA1B;
white-space: nowrap;
}

#navCatTabs ul li a {
color: #000000;
}

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

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

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

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

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

#navMainSearch {
float: right;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #000000;
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

/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: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

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

.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;
background-color: #E4FEf5;
border: 1px solid #003D00;
}

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

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

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

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

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

.centerBoxWrapper {
border: 1px solid #ffffff;
height: 10%;
margin: 1.1em 0;
}

h2.centerBoxHeading {
font-size: 1.3em;
color: #ffffff;
}
.wrapperAttribsOptions {
margin: 0.1em 3em;
}

/sideboxes/

#logosidebox{
margin: 0em;
margin-top: 0em;
border:none;
}

#logosideboxContent {
text-align:center;
}

#logosideboxHeading{
margin: 0;
padding: 0;
}

.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.2em;
color: #B0BF24;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #000000;

padding: 0.5em 0em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 0px solid #ffffff;
border-bottom: 2px solid #B0BF24; /changes bottom bar of sideboxes including width/
margin-top: 0em;
}

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

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

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

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

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories /
A.category-top, A.category-top:visited {
color: #B0BF24;
text-decoration: none;
text-align: center;
padding: 2;
}
A.category-links, A.category-links:visited {
color: #968f73;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #780b0b;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/
end categories box links */

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

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 2em;
color: #FFFFFF;
}

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

25 Jun 2010, 7:32 AM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: cant center logo header

First of all, if we have the site, we don't need the css as the firebug addon to Firefox (and several others) will show us the css for a site. Saves space:yes:

Anywho... You have the logo listed twice. As a background in the logoWrapper and the logo divs. One with a height of 260px and the other with 300px.

As usual, there are a couple of ways to do what you want. Probably the quickest is to turn the #logoWrapper into nothing but> #logoWrapper {

background-color: #000000;
}

25 Jun 2010, 7:37 AM
#3
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: cant center logo header

And... On the #logo, replace the margin and width with> background-position: top center;That will keep the logo centered over the page no matter what the size.

25 Jun 2010, 7:58 AM
#4
thehiprose avatar

thehiprose

New Zenner

Join Date:
Jun 2010
Posts:
7
Plugin Contributions:
0

Re: cant center logo header

Thanks so much - it has fixed the issue with the white background on the logo, but my whole site is not centered....

How can I do this?

Ps: Thanks for the tip on the CSS - I thought I was saving you time !

Also - do you like my template?

Cheers

25 Jun 2010, 8:06 AM
#5
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: cant center logo header

take #mainWrapper out of the long list at line 190
In the #mainWrapper call, add margin: auto;

25 Jun 2010, 8:46 AM
#6
thehiprose avatar

thehiprose

New Zenner

Join Date:
Jun 2010
Posts:
7
Plugin Contributions:
0

Re: cant center logo header

MAGIC - thanks - your a star !

25 Jun 2010, 8:49 AM
#7
thehiprose avatar

thehiprose

New Zenner

Join Date:
Jun 2010
Posts:
7
Plugin Contributions:
0

Re: cant center logo header

Oh one more thing,

how do I change the background colour on my sideboxes?

Cheers

25 Jun 2010, 2:34 PM
#8
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,806
Plugin Contributions:
15

Re: cant center logo header

Line 340 of your stylesheet sets the color for both nav columns.