Solved

How To Center This CSS Menu?

Posted on 2010-09-05
18
380 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
Comment Utility
Hi SrinathS,

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

Author Comment

by:SrinathS
Comment Utility
Entire Menu bar please!
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
change the first style <<ul#css3menu,ul#css3menu ul>> to update the margin property value as
margin: 0 auto;
or
margin:auto;
0
 

Author Comment

by:SrinathS
Comment Utility
@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
Comment Utility
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
Comment Utility
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
Comment Utility
As i mentioned, which ever menu you want to be centered, please add the width and margin properties to that style.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 125 total points
Comment Utility
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
Comment Utility
@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
Comment Utility
I will try your tip tonight.
0
 

Author Comment

by:SrinathS
Comment Utility
I tried that, not worked.
0
 
LVL 14

Assisted Solution

by:xberry
xberry earned 125 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery CSS Scroll Issue 3 30
Bootstap Icons 3 18
Problem to page 4 16
modify h2 4 8
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now