Jump to content
Sign in to follow this  
strat76

Centering menu issue.. go figure..

Recommended Posts

I have another silly issue.. I've searched and tried what I've found and still not fixing it.. centererror.gifthe nav was on the left then i put text-align : center in and it shot over but way to far right.. please help .. here's the CSS

/* CSS Document */body {	margin: 0;	padding: 0;	background-color: #FFFFFF;	font: 80% Arial, Helvetica, sans-serif;	line-height: 130%;	text-align: center;}body, html {	width: 100%;	position: relative;	background-image:url(bg-patt.gif);}p {	position: relative;	margin-top: 0px;	text-align:left;}a {	text-decoration: none;	color: #FFFFFF;}a:hover {	text-decoration: underline;}/*  Containers----------------------------------- */#bodyCont {	width: 100%;	min-height: 100%;	margin: 0;	padding: 0;	background-position: top left;	background-repeat:repeat-x;	background-image:url(top.gif);}*html #bodyCont {	height: _100%;	min-height: _100%;}#headerCont {	width: 813px;	height: 278px;	display: block;	position: relative;	margin: 0 auto;	padding: 0;}#coreCont {	width: 813px;	margin: 0 auto;		padding: 0 0px;	position: relative;	background-image:url(tan.gif);	min-height: 450px;	height: _450;	font-size: 8pt;	color: #333333;}*html #coreCont {	left: -3px;	height: 450px;}.leftbox {	position: absolute;	margin: 0px 0px 0px 0px;	padding: 5px;	width: 287px;	height: 450px;	background-image:url(left-col.gif);	left: 0px;	text-align:left;}.centerbox {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 304px;width: 500px;height: 450px;text-align:justify;}#footerCont {	position: relative;	clear: both;	margin: 0;	padding: 0;	width: 100%;	height: 200px;	display: block;	background-color: #000000;	background-image:url(footer.gif);	background-position:top left;	background-repeat:repeat-x;}.clear { clear: both; }/* 		Header	--------------------------------------------------- */#header {	position: relative;	width: 813px;	height: 278px;	margin: 0 auto;	padding: 0;	background-color:#33CCFF;	background-image:url(images/head-bg.gif);}/* Menu --------------------------------------------------- */#nav{	position:absolute; top: 237px; 	margin:0 auto;	display:inline;	height:41px;	font-size:13px;	font-weight:bold;	font-family:Arial,Verdana,Helvitica,sans-serif;	text-align:center;	}#nav ul{	margin:0 auto;	padding:0;	list-style-type:none;	}#nav ul li{	display:inline;	float:left;	margin:0 auto;	background-repeat: no-repeat;	}#nav ul li a{	display:inline;	float:left;	font-color: white;	text-decoration:none;	padding:13px 0px 0 32px;	height:41px;	}#nav ul li a{	color: #FFFFFF;	background-image: url(images/nav-off.gif);;    background-repeat: no-repeat;	}#nav ul li a:visited{	color: #FFFFFF;	background: url(images/nav-off.gif);    background-repeat: no-repeat;	}#nav ul li a:hover{	color: #c0aa78;	background: url(images/NAV-hover.gif);    background-repeat: no-repeat; 	}#nav ul li a.current{	color: #c0aa78;	background: url(images/NAV-hover.gif);    background-repeat: no-repeat;

Share this post


Link to post
Share on other sites

It would be easier to find the problem if you create the page online. Myself, along with a large group of web developers use Firefox's Firebug to correct CSS mistakes.If you don't want to post it online or would like to do it your self, I would recommend getting the Firebug plugin.I would guess that the problem would be with the div tag that makes up the nav, but I don't know how the html is set up and it's hard to track what is the parent of the section that uses #nav.If I was you I would wrap a div tag around the nav and have it create the black background and white top/bottom border. This new div would have a width of 100%. With nav I would set margins to the widths of your "white spaces". This would align the nav in the middle. I would the set the "ul" that makes up the nav list to have an auto margin to center the nav items.text-align: center will ONLY align TEXT, not HTML elements.

Share this post


Link to post
Share on other sites

This might be the root of the problem:position:absolute; top: 237px; There most likely is a better way to position this than with absolute positioning.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...