just want to center this

ragingmon · December 26th, 2006, 04:47 AM

I'm just a newbie in CSS.

In this site. http://icant.co.uk/articles/flexible-css-menu/index.html

I just want to center the navigation (Start/Images,The HTML,The CSS,etc.). How do I do it?? pls pls pls help.. tnx in advance!!!!

Lchad · December 26th, 2006, 07:53 AM

Code:

#boundary{

	text-align:left;

	font-size:.8em;

	border:1px solid #999;

	background:#fff;

	padding:20px;

	width:700px;

	margin:0 auto;

try

text-align: center;

ragingmon · December 26th, 2006, 08:15 AM

tnx so much for the help..

but the navigation bars still won't go to the center..

all the text goes to the center because of the ~text-align: center;~

i'm still working on this..

Lchad · December 26th, 2006, 09:40 AM

Code:

#nav{

	clear:both;

	font-weight:bold;

	color:#666;

	margin-left:4px;

	float:left;

	list-style-type:none;	

	background:url(navshadow.gif) no-repeat 8px 100% #fff;

	padding-bottom:21px;

}

try
text-align: center;

I'm kind of a newbie at CSS too.. but I'm trying! I'm sure once the regular CSS guru's get back from Christmas, they'll have the answer.

ragingmon · December 26th, 2006, 09:59 AM

tnx again...

i tried it. but nothing changed..

ukgeoff · December 27th, 2006, 08:15 AM

If you want to centre the navigation, then you need to centre the containing element, in this case the <ul> containing the navigation list.

You could attempt this either by applying margin: 0, auto to the ul itself or by text-align: center on the ul's parent element. Whichever best suits your design.

Is this site you are producing meant to be for public consumption or is it just one you are using to educate yourself?

If it's meant to be for public enlightenment, then I think you need to develop your own skill set somewhat before producing such a site.

Lchad · December 27th, 2006, 08:25 AM

Code:

#nav{

	clear:both;

	font-weight:bold;

	color:#666;

	margin-left:4px;

	float:left;

	list-style-type:none;	

	background:url(navshadow.gif) no-repeat 8px 100% #fff;

	padding-bottom:21px;

Isn't the margin-left: 4 px; where your problem lies? Wouldn't you want that to be margin: 0 auto; ? or delete that and text-align: center; ?

ragingmon · December 27th, 2006, 08:45 AM

tnx so much for the help.. I'll try it now..

well I'm making a site, it is a project in school. No one can teach me how to use CSS there, so I'm just learning on my own.

tnx again!!!

moojoo · December 27th, 2006, 11:37 AM

the UL won't center if he is using floats for the li's.

BTW you could do those tabs with 2 images and they don't needto be 3000px wide and you won't need js for IE.

1 corner on the li, the right corner/background on the li a. The tabs will expand/contract etc etc..

Read this if you want a good example: http://www.alistapart.com/articles/slidingdoors/

ragingmon · December 29th, 2006, 02:07 PM

OoOh!! tnx to the link..

I'll read and study this one.