Solved

How To Center This CSS Menu?

Posted on 2010-09-05
18
383 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: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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
I am having a  Git   issue 6 43
Search Item in Table 2 23
WordPress 8 37
I'm a Human captcha checkbox 13 23
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

821 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