Solved

How To Center This CSS Menu?

Posted on 2010-09-05
18
384 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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…

734 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