category tabs width

[skelly100]

Hi, Have avoided posting so far but cant work out this one so any help would be appreciated.
As you can see my shops - b r i g h t o n l e d l i g h t i n g . c o m / s h o p /
CategoryTabs run to the ends of the screen and I'd like to fix its width. So does the bar underneath (dont know what its called), which I'd like to fix too. The 'My Account P&P' link just above it floats around depending on the size of the browser window and dissapears unless I leave a space in 'Tagline here' for some strange reason, would like to fix its position.
Zen latest version and icatheme template.

Thanks in advance,

SK

[gjh42]

The My Account / P&P links are in #navMainWrapper which is positioned absolutely, 20em from the right edge of the header. Edit the #navMainWrapper rule in your stylesheet; there are dozens of ways you could change it, and I can't advise without knowing just how you want the layout to work.

It looks like you are working on this and have just found the fix for the navCatTabsWrapper width.

[skelly100]

Hi,
and thank you very much for your time.
I have indeed worked out the navCatTabsWrapper width problem but am still struggling with the floating around #navMainWrapper. Was having a look at my site on some other browsers and wider screens. On a wider screen the My account P&P text in the nav main wrapper disappers to the right out into no mans land...arrhh,
have found #navMainWrapper and changed it from absolute to relative which has stopped it moving about, though the whole shop has widened for some reason.. Guess I would like the My Account / P&P links above the cart icon or top right in the header.

[gjh42]

Changing the absolute dimensions to put the links at the right of the cat-tabs:

#navMainWrapper {

    position: absolute;
    right: 5.0em;
    top: 11.8em;
    }

Adjust those numbers to alter the position.

[skelly100]

Thanks for that, have done that and they are in the middle of the main page , as you can see. As Imentioned my whole shop has widened, not the wrappers but the background on the right hand side, since I changed the nav main wrapper to relative, eveything was fine before then, widthwise, and changing back to absolute doesnt help, and I cant get it back to normal. I think I am missing something fundemental, or have changed something previously thats just come to light...

/**
 * Atheme CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2007 iChoze Internet Solutions http://ichoze.com
 * @copyright Portions Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */

body {
	margin: 0;
	font-family: "Arial";
	font-size: 62.5%;
	color: #000000;
background-color: #000000; /* this if for whole webpage background */

	}

a img {border: none; }

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

a:active {
	color: #666666;
	}

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

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

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

.biggerText {
	font-size: 1.2em;
	}

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

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
	position: relative;
	}
*html .centerColumn {
	height: 1%;
	}
*/

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

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

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

.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 {
padding: 0 15px;
	background-color: #CCCCFF;
	text-align: left;
	width: 960px;
	vertical-align: top;
	clear:both;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}
#headerWrapper{
	width: 960px;
	margin:auto;
background-color: #CCCCFF;
	}
#logoWrapper{
	width: 960px;
	height: 100px;
background-image: url(../images/Maintitle.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height: 100px;
	}
#logo{
	padding: 0.0em 0 0 0em;
	}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}
	
#tagline {
	color:#ffffff;
	padding: 0em 0em 0 0;
	font-size: 0.5 em;
	font-weight:bold;
	text-align :right;
	white-space:nowrap;
	float: center;
	width: 50%;
	}
#searchCartBarWrapper{
width: 956px;
height: 22px;
	margin: auto;
	background:#175B96;
	padding: 0.2em;
}
#searchCartBar{
	width:760px;
	margin: 0.2em 22em;
	padding-top: 0em;
}
#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;
	}

#navSuppWrapper{
	margin: 1em 0 0 0;
	background: #F2F2F5 url(../images/footerbg.gif) right no-repeat;
	border:1px solid #CCCCCC;
	padding: 0.5em 0.2em;
	color: #000000;
	height: 1%;
	}
#navMainWrapper{		
	position: relative;
	margin: 0em;
	right: 5em;
top: 11.8em;
	padding: 8.7em 0 0 0;
	color: #505050;
	height: 1%;
	}
#navCatTabsWrapper {
width: 954px;
	background:#F2F2F5;
	color: #000000;
	margin: auto;
	padding: .3em;
	font-size:1.1em;
	height: 1%;
}

#navCatTabs{
	width:950px;
	margin:auto;
	}

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

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

#navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color: #505050;
	font-size:1.1em;
	}
#navMain ul li a{
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size:1.1em;
	color: #505050;
	}
#navMain ul li a:hover{
	text-decoration:underline;
	color: #505050;
}
#navCatTabs ul li {
	display: inline;
	}
#navCatTabs ul li a {
	color: #000000;
	text-decoration:none;
	}
#navCatTabs ul li a:hover{
	color:#666666;
	}
#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #9a9a9a;
	}

#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 {
	background: url(../images/header_search.gif) no-repeat 3em .2em;
	padding:0 0 .7em 10em;
	}
#altLinks{
	float:right;
	color:#FFFFFF;
	font-size:1.1em;
	padding: .3em 3em 0 0;
}
#altLinks a{
	color:#ffffff;
	text-decoration:none;
	padding: 0 .5em 0 .5em;
	}
#altLinks a:hover{
	text-decoration:underline;
	}
#cartContent {
	float:right;
	background: url(../images/header_cart.gif) no-repeat 0em -0.2em;
	font-size:1.1em;
	padding: .3em 4em .5em 4em;
	}
#cartContent img{
	padding:0;
	margin:0;
	}
#cartContent a{
	color:#ffffff;
	text-decoration:underline;
	padding: 0;
	}
#navBreadCrumb {
	padding: .7em 1.0em;
	background-color: #ccccff;
	font-size: 1em;
	font-weight: normal;
	margin: 0em;
	}

#navEZPagesTop {
	font-size: 1em;
	font-weight: bold;
	text-align:center;
	}

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

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

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


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

.centerBoxWrapper {
	height: 1%;
	margin: 1.1em 0;
	border-left:1px solid #DADADA;
	border-right:1px solid #DADADA;
	border-bottom:1px solid #DADADA;
	}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #666666;
	text-align:left;
	padding-left: 2em;
	}

/*sideboxes*/
.columnLeft {}

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

.leftBoxHeading {
	margin: 0em;
	background:#6699cc;
	padding: 0.5em 0.2em;
	} 
.centerBoxHeading {
	margin: 0em;
	background: url(../images/centerbox_bg.gif);
	padding: 0.5em 0.2em;
	}
.rightBoxHeading {
	margin: 0em;
	background:#6699cc;
	padding: 0.5em 0.2em;
	}

.leftBoxContainer, .rightBoxContainer {
	margin: 1.25em;
	margin-top: 1.5em;
	}

.sideBoxContent {
	background-color: #ffffff;
	margin:.1em 0 0 0;
	padding: 0.4em;
	border: 1px solid #CCCCCC;
	}

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, .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 {

}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/* categories box parent and child categories */
.sideBoxContent A.category-top, .sideBoxContent A.category-top:visited {
	color: #000000;
	text-decoration: none;
	background:url(../images/blue_arrow.gif) 0em .2em no-repeat;
	padding:0 0 0 1em;
	}
.sideBoxContent A.category-top:hover {
	text-decoration:underline;
	}
A.category-links, A.category-links:visited {
	color: #666666;
	text-decoration: none;
	}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
	color: #96171A;
	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: #175B96;
	height: 2em;
	color: #FFFFFF;
	}
.productListing-rowheading a:link, .productListing-rowheading a:visited{
	color:#FFFF99;
	}

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

[gjh42]

Posting your stylesheet is not nearly as useful as looking at it live on your site with the tools we have available. (At least you put it in code tags so it didn't take a mile of page height:)

The recommendations were dependent on the position: absolute; property as shown in post 4; since you have altered something else in your stylesheet, those numbers now need to be

#navMainWrapper {

    position: absolute;
    right: 5.0em;
    top: 3.0em;
    }

[skelly100]

Thanks for that, am obviously new to this, but changing these position coordinates just move it around the left hand side, when I move it it to the right of the screen I have this masive background on the browser page, am gonna re install the template and start anew with my knowledge gained to aid me. Thanks for your help and will try to avoid posting unless absolutely necessary.

SK