INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

CSS - Centering Nav Menu

CSS - Centering Nav Menu

(OP)
Hi guys, I wonder if you could help me. I have a navigation menu that's something like this:

CODE

<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
	<ul>
		<li><a href="#">Item 1 0</a></li>
		<li><a href="#">Item 1 1</a></li>
		<li><a href="#">Item 1 2</a></li>
	</ul></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
	<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul> 

and a CSS

CODE

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;} 

I want this menu to be about 150 pixels below from the top AND centered in whatever screen size/resolution it's being viewed on. I've been trying all sorts but no luck.

Thanks in advance for your advice.

RE: CSS - Centering Nav Menu

CODE

ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#5f5f5f;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;} 
You have told it to not have any margin, plus you have set the UL to inline-block, so 'auto' won't work.

The easiest solution is to wrap a div round it apply the margin and centre the content.

Try :-

CODE --> CSS

#menu {
    text-align:center;  
    margin:150px;
} 

CODE --> HTML

<div id="menu">
<ul id="css3menu1" class="topmenu">
	<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
	<ul>
		<li><a href="#">Item 1 0</a></li>
		<li><a href="#">Item 1 1</a></li>
		<li><a href="#">Item 1 2</a></li>
	</ul></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
	<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
	<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul> 
</div> 
of course you could set the UL (ul#css3menu1) to block, with a fixed width and use the margin with auto to centre it, but you will have issues with the child elements that are then floated, so you would need to add an extra 'clearing' element to it at the end of the UL.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close