Solved

How To Center This CSS Menu?

Posted on 2010-09-05
18
385 Views
Last Modified: 2012-06-21
Hello,

I've generated a navigation menu using 3rd party software. It generated both CSS and HTML files. By default the navigation menu is set to left. I would like set the menu to center. I tried to make the menu code to center by using text-align property in HTML file. It didn't works! I think I need to edit the CSS a little bit to center the entire navigation menu..

Q: How can I center the navigation menu? - The code is attached.

Any quick help would be greatly appreciated. Thanks.

ul#css3menu,ul#css3menu ul{
	margin:0;list-style:none;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu ul{
	display:none;position:absolute;left:-1px;top:98%;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;padding:0 9px 9px;background-color:#FFF;background-image:none;border-width:1px;border-style:solid;border-color:#d8d9da;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;}
ul#css3menu ul ul{
	position:absolute;left:98%;top:-2px;}
ul#css3menu{
	padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0 0 0 1px;}
ul#css3menu ul>li{
	margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 16px Lucida Grande,Lucida Sans;color:#262626;cursor:default;padding:10px;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-position:0 50%;border-width:0px;border-style:none;border-color:#6655FF;}
ul#css3menu ul li{
	float:none;margin:9px 0 0;}
ul#css3menu ul a{
	text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;font:14px Lucida Sans,Lucida Grande;color:#333333;text-decoration:none;}
ul#css3menu li:hover>a{
	background-color:#C0C0C0;border-color:#665500;border-style:none;font:bold 16px Lucida Grande,Lucida Sans;color:#efefef;text-decoration:none;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-position:0 100%;}
ul#css3menu img{
	border:none;vertical-align:middle;margin-right:20px;width:24px;height:24px;}
ul#css3menu ul img{
	width:6px;height:12px;}
ul#css3menu img.over{
	display:none;}
ul#css3menu li:hover > a img.def{
	display:none;}
ul#css3menu li:hover > a img.over{
	display:inline;}
ul#css3menu span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul span{
	background-image:url("data:image/gif;base64,R0lGODlhBwAMAOYLAOPj49TU1L6+vr+/v/r6+tra2vv7+7y8vL29vcfHx8jIyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAHAAwAAAcrgAuCgwsFCQSECggJBokHCo2DigmECwoCA4QBBwcAkpiSi5KPkZORhYeEgQA7");padding-right:27px;}
ul#css3menu ul li:hover>a{
	background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;font:14px Lucida Sans,Lucida Grande;color:#55de3d;text-decoration:none;}
ul#css3menu li.topfirst>a{
	height:16px;line-height:16px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topfirst:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topitem>a{
	height:16px;line-height:16px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topitem:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu._>li>a{
	padding:0;}
ul#css3menu li.subfirst>a{
	background-color:#FFF;background-image:none;border-width:0;border-style:none;padding:0;font:14px Lucida Sans,Lucida Grande;color:#333333;text-decoration:none;}
ul#css3menu li.subfirst:hover>a{
	background-color:#FFF;background-image:none;border-style:none;font:14px Lucida Sans,Lucida Grande;color:#55de3d;text-decoration:none;}
ul#css3menu li.toplast>a{
	height:16px;line-height:16px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.toplast:hover>a{
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}

Open in new window


<ul id="css3menu">
	<li class="topfirst"><a href="http://www.domain.com/home.html" target="_parent">Home</a></li>
	<li class="topitem"><a href="http://www.domain.com/events/" target="_parent"><span>Events</span></a>
	<ul>
		<li class="subfirst"><a href="http://www.domain.com/events/2010/" target="_parent"><span>2010</span></a>
		<ul>
			<li class="subfirst"><a href="http://www.domain.com/events/2010/pse/" target="_parent"><span>PSE</span></a>
			<ul>
				<li class="subfirst"><a href="http://www.domain.com/events/2009/pse/p/" target="_parent">P</a></li>
			</ul>

			</li>
			<li><a href="http://www.domain.com/events/2010/vpw/" target="_parent"><span>VPW</span></a>
			<ul>
				<li class="subfirst"><a href="http://www.domain.com/events/2010/vpw/pictures/" target="_parent">P</a></li>
			</ul>

			</li>
		</ul>

		</li>
		<li><a href="http://www.domain.com/events/2009/" target="_parent"><span>2009</span></a>
		<ul>
			<li class="subfirst"><a href="http://www.domain.com/events/2009/dt/" target="_parent"><span>DT</span></a>
			<ul>
				<li class="subfirst"><a href="http://www.domain.com/events/2009/dt/p/" target="_parent"><span>P</span></a>
				<ul>
					<li class="subfirst"><a href="http://www.domain.com/events/2009/dt/p/rb/" target="_parent">RB</a></li>
					<li><a href="http://www.domain.com/events/2009/dt/p/rsb/" target="_parent">RSB</a></li>
				</ul>

				</li>
				<li><a href="http://www.domain.com/events/2009/dt/v/" target="_parent"><span>V</span></a>
				<ul>
					<li class="subfirst"><a href="http://www.domain.com/events/2009/st/v/rab/" target="_parent">RAB</a></li>
					<li><a href="http://www.domain.com/events/2009/dt/v/rsb/" target="_parent">RSB</a></li>
					<li><a href="http://www.domain.com/events/2009/dt/v/bs/" target="_parent">SGBS</a></li>
				</ul>

				</li>
			</ul>

			</li>
		</ul>

		</li>
	</ul>

	</li>
	<li class="topitem"><a href="http://www.domain.com/events/fun/" target="_parent"><span>Fun</span></a>
	<ul>
		<li class="subfirst"><a href="http://www.domain.com/fun/lab/" target="_parent">Lab</a></li>
	</ul>

	</li>
	<li class="toplast"><a href="http://www.domain.com/about/" target="_parent"><span>About</span></a>
	<ul>
		<li class="subfirst"><a href="http://www.domain.com/about/locations/" target="_parent">Locations</a></li>
	</ul>

	</li>
</ul>

Open in new window

0
Comment
Question by:SrinathS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
  • +2
18 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 33608953
Hi SrinathS,

Are you trying to center the text in the menu items or the entire menu bar?
0
 

Author Comment

by:SrinathS
ID: 33608969
Entire Menu bar please!
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33609046
change the first style <<ul#css3menu,ul#css3menu ul>> to update the margin property value as
margin: 0 auto;
or
margin:auto;
0
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

Author Comment

by:SrinathS
ID: 33609066
@gurvinder372,

It didn't worked! I'm able to center it by assigning the margin-left:380px; margin-right:380px; to the same first line. But the sub menus are appearing on different positions.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33609080
Specify the width of menu bar, it should work.
for submenus, you can give the style at ul level
ul
{
   width:500px;
   margin: 0 auto;
}
0
 

Author Comment

by:SrinathS
ID: 33609094
I'm completely novice to CSS. Can you please let me know where I need to make required changes? Thanks.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33609189
As i mentioned, which ever menu you want to be centered, please add the width and margin properties to that style.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 125 total points
ID: 33609471
Changes here:
ul#css3menu,ul#css3menu ul{
        width: 90% // or 500px or whatever value works in the rest of your page
	margin:0 auto;
        list-style:none;
        background-color:#C0C0C0;
        background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");
       background-repeat:repeat;
       border-width:0px;
       border-style:solid;
       border-color:#999999;
       -moz-border-radius:4px;
       -webkit-border-radius:4px;
       border-radius:4px;
}
ul#css3menu ul{

Open in new window

0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 125 total points
ID: 33610010
@SrinathS: Another way to solve it is,
1) give the width of the element to be centered in percentage
2) subtract that percentage value by 100, ie
if the width of element is 60%, then remaining percentage is 40%
3) divide this remaining percentage by 2 (20% as in above case), and assign them as horizontal margins of the element, ie
width: 60%;
margin-left:20%;
margin-right: 20%;

In short, you need to put these properties for all the menus ( or submenus, ul).
0
 

Author Comment

by:SrinathS
ID: 33617089
I will try your tip tonight.
0
 

Author Comment

by:SrinathS
ID: 33898635
I tried that, not worked.
0
 
LVL 14

Assisted Solution

by:xberry
xberry earned 125 total points
ID: 34058415
This should   create a solution

http://www.cssplay.co.uk/menus/menunine.html

please,   try this too

http://www.cssplay.co.uk/menus/pro_horizontal

hope   it guides you to success
0
 
LVL 16

Assisted Solution

by:s8web
s8web earned 125 total points
ID: 34061351
It's likely that there is something else in your markup or css that is causing the problem. Either of the two methods provided should solve the problem. At this point it would be best to provide a link to your live page, or provide the complete browser rendered code, and css, for the page. Without the other pieces of the puzzle it's not likely that you are going to get a solution that works.
0
 

Author Comment

by:SrinathS
ID: 34061950
I will try your suggestion tonight and let you know the result.

@s8web,

Yes, it's look like my homepage css is breaking/preventing the above css. I will post the home page css shortly.

Thanks.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34830199
This question has been classified as abandoned and is being closed as part of the Cleanup Program. See my comment at the end of the question for more details.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question