Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How To Center This CSS Menu?

Posted on 2010-09-05
18
Medium Priority
?
390 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
  • 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:Gurvinder Pal Singh
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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 500 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:
Gurvinder Pal Singh earned 500 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 500 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 500 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

[Webinar] Cloud Security

In this webinar you will learn:

-Why existing firewall and DMZ architectures are not suited for securing cloud applications
-How to make your enterprise “Cloud Ready”, and fix your aging DMZ architecture
-How to transform your enterprise and become a Cloud Enabler

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?
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

972 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