centering menu

[rsn8]

I have the following code for a menu I am using. I would like to center the entire menu on the page.

Can someone help me decipher this?

I'd also like to lose the line under the menu.

Thanks. Kinda new to css.

Jay
-----------------
#menu_wrapper
{
width: 800px;
height:94px;
position: fixed;
top:0;
margin: 0;
background: transparent url('../images/menu_bg.png') repeat;
z-index:999;
}

/*body.home
{
left: -400px;
}*/

.nav, .subnav
{
list-style: none;
display: block;
margin: 24px 0 0 30px;
float: left;
font-size: 13px;
}

.subnav
{
background: none;
}

.nav li
{
display: block;
float: left;
margin: 0 10px 0 10px;
}


.nav li a
{
font-family: Abel,Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
text-transform:capitalize;
font-weight: bold;
color: #ccc;
padding: 10px 5px 18px 5px;
}

.nav li ul
{
display: none;
padding: 5px 0 10px 0;
margin: 10px 0 10px -20px;
list-style: none;
position:absolute;
padding: 10px;
float: left;
width: 180px;
background: transparent url('../images/000_80.png') repeat;
z-index: 999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index:999;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.7);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.7);
box-shadow: 0 1px 2px rgba(0,0,0,.7);
border: 1px solid #666;
}

.nav li ul li ul
{
display: none;
padding: 5px 0 10px 0;
margin: -38px 0 10px 180px;
list-style: none;
position:absolute;
padding: 10px;
float: left;
width: 150px;
background: transparent url('../images/000_60.png') repeat;
z-index: 999;
}

.nav li ul li
{
line-height: 2.5em;
float: none;
width: 100%;
}

.nav li.current-menu-parent ul
{
display: none;
}

.nav li.current-menu-item > a, .nav li > a:hover, .nav li > a.hover, .nav li > a:active
{
color: #EEDD82;
}

.nav li.current-menu-item ul li a:hover, .nav li ul li a:hover, .nav li ul li:hover a, .nav li ul li.current-menu-item a
{
border: 0;
}

[edited by: alt131 at 6:43 pm (utc) on Feb 8, 2012]
[edit reason] Thread Tidy [/edit]

[Marshall]

Jay,

Welcome to WebmasterWorld. Just an FYI, posting personal links is a no no.

I assume you are referring to the HOME ART DESIGN etc links at the top. For the #menu_wrapper you would want the margin setting to be
#menu_wrapper {
margin: 0 auto;
}

This will cause it to align to the middle. If you need more margin at the bottom, add
margin-bottom: 10px; /* example only */

And I believe the line is caused in
.nav li ul {
border: 1px solid #666;
}

Could be wrong about that one though.

Marshall

[rsn8]

Thank you Marshall.

I was able to get the menu centered by your method and changing the position: to "relative". However, I am still having problems moving the menu bar up. Incidently, I did find that the bottom border was pulling from another css page.

here is the current code ::

#menu_wrapper
{
width: 800px;
height:85px;
position: relative;
top:0;
margin: 0 auto;
margin-bottom: 10px; /* example only */
background: transparent url('../images/menu_bg.png') repeat;
z-index:999;
}

thanks...Jay

BTW, thank you for the heads up on including URLs. much obliged.

[Marshall]

Jay,

You're welcome. In the CSS you provided above, you can delete the position: relative. Also, when it comes to margins and padding, you do not need to separate the information.

In CSS, measurements order clockwise starting with the top: top, right, bottom, left. Using the CSS above, you can simply set the margins as follows:
margin: 0 auto 10px auto;

When it comes to zero, you do not have to include the px, but you do when it is a value. You can also use em or % in place of px, depending on your needs.

When you say move the menu bar up, do you mean there is too much space above the text and the top of the page? I noticed in your original CSS, there is a lot of margin and padding space at the top of several items:
.nav, .subnav - margin: 24px 0 0 30px;

The others though are probably irrelevant as they are set to display: none. That being said, if you are not using the sub-menus that are set to display none, you could probably delete it from your CSS.

Anything else, let me not. If not me, there are plenty of other people here more than capable of helping.

Marshall

[rsn8]

Thank you again. That all makes sense. I ended up figuring out the nav vertical movement from your definitions. It was embedded in another css that only effects the header.

Have a great night...j

[rsn8]

Hi again :::...

I am also trying to center the nav on another site ::

the css ::
#navigation{ width: 800px; font-size: 13px; font-weight: bold; margin: 0 auto 10px auto; }
#navigation ul{list-style:none; margin: 0;}
#navigation li{ float:left; position: relative; z-index:3;}
#navigation li a{ padding:20px 20px 20px 20px; display:block; text-decoration:none; text-transform: capitalize; }

I tried adding the margin code you suggested, but it doesn't work in this case.

any thoughts?

thanks...jay

[rsn8]

This is getting silly. Can anyone help me decipher what is happening with the navigation not centering? here is the css code ::

#header-2{ margin-left: auto; margin-right: auto; width: 70%; }
#header-2 #navigation{ border-top: 1px solid #202020; }
#header-2 #navigation li:hover{ background-color: #742707;}

#header-2 #navigation ul li ul li{ background-color: #101010;} /* IE7+8 FIX */
#header-2 #navigation ul li ul li.odd{ background-color: #101010;}
#header-2 #navigation ul li ul li.even{ background-color: #1a1a1a;}

#header-2 #navigation ul li ul li:hover{ background-color: #742707;}

#header-2 #navigation .has-sub-menu .top-menu-item{ background-image: url(gfx/has_sub_menu_top.png); }
#header-2 #navigation .sub-menu .has-sub-menu{ background-image: url(gfx/has_sub_menu_dropdown.png); }


#header-2 #navigation ul li a{ color:#cccccc; }
#header-2 #navigation ul li ul li a{ color:#909090; }

#header-2 #navigation ul li ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a{ color:#cccccc; }
#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

#header-2 .contact_holder { color: #909090;}

any thoughts?

thanks...jay

[branozZ]

Can you post your html that goes with the css above?

[lucy24]

Tangential comment:

#header-2 #navigation ul li ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li a{ color: #909090;}

Nested styles have their uses. Like, say, div.hanging p instead of eighteen consecutive p.hanging. But let's not overdo it. Really. Even the first two words are redundant, since an id is unique. When it gets to where you have to stop and count on your fingers, it may be time to explore other options.

[rsn8]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel='stylesheet' id='admin-bar-css' href='http://siteURL/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' />
<script type='text/javascript' src='http://siteURL/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://siteURL/wp-content/plugins/wp-social-toolbar-pro/js/corescripts.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://siteURL/wp-content/plugins/wp-social-toolbar-pro/js/scripts.js?ver=3.3.1'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js?ver=3.3.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://siteURL/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://siteURL/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.3.1" />
<link rel="stylesheet" type="text/css" href="http://siteURL/wp-content/plugins/wp-social-toolbar-pro/css/wp_social_toolbar.css" />
<style type="text/css">
#wps-toolbar-show { background:#666666 !important; }
#wp-social-toolbar-show-box { border-color:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-close-button,.wpcs-border { background:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-twitter-status { background-color:#999999 !important; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; background-image:url('http://siteURL/wp-content/plugins/wp-social-toolbar-pro//images/icons/normal/bird/white.png'); background-repeat:no-repeat; }
#wpsc-social-accounts,#wps-toolbar-bottom { background:#000000 !important; }
#wpsc-social-accounts img:hover,.wpst-credit-pro:hover { background:#ffffff; }
#wp-social-toolbar-show-box,#wps-toolbar-content #wps-toolbar-bottom #wpsc-social-accounts img,#wps-toolbar-content #wps-toolbar-bottom,.wpcs-share-icons { border-color:#666666 !important; }
#wps-toolbar-content #wps-toolbar-top #wps-twitter-status a { color:#ffffff; }
#wps-toolbar-bottom{ height: 30px !important; overflow:hidden !important; }
</style>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://siteURL/wp-content/plugins/wp-social-toolbar-pro/css/ie.css" />
<![endif]-->
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>

<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/header/header-2.css' type='text/css'/>
<link rel="shortcut icon" href="http://siteURL/wp-content/themes/rockwell_v1.7.1/favicon.ico" />
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/js/prettyphoto/css/prettyPhoto.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/global.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/style.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/sidebar/sidebars.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/comments/comments.css' type='text/css'/>

<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/header/header-2.js"></script>
<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/prettyphoto/js/jquery.prettyPhoto.js"></script>

<link rel='stylesheet' id='changeable_stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/skins/black/black.css' type='text/css'/> <!-- <link rel='stylesheet' id="changeable_stylesheet" href='http://siteURL/wp-content/themes/rockwell_v1.7.1/skins/black/black.css' type='text/css'/> -->

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Cambro|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|Abel|' type='text/css'/><style type="text/css">body { font-family: 'Cambro' !important;}
#navigation { font-family: 'Abel' !important;}
.sub-menu { font-family: 'Abel' !important;}
.info_line { font-family: 'Abel' !important;}
.sidebar h2, .post_meta h2 { font-family: 'Abel' !important;}
.sidebar { font-family: 'Abel' !important;}
#cat_title { font-family: 'Abel' !important;}
h1 { font-family: 'Abel' !important;}
h2 { font-family: 'Abel' !important;}
h3 { font-family: 'Abel' !important;}
h4 { font-family: 'Abel' !important;}
h5 { font-family: 'Abel' !important;}
h6 { font-family: 'Abel' !important;}
h7 { font-family: 'Abel' !important;}
.post_info { font-family: 'Abel' !important;}
.post_info_single { font-family: 'Abel' !important;}
</style>

<style type="text/css">
#header-1 #navigation li a {width: 75px !important;}
#header-1 #navigation ul li ul li a {width: 100px !important;}

#header-2 #navigation ul li li a {width: 100px !important;}
#header-2 #navigation ul li li ul li a {width: 100px !important;}
#header-1 #navigation ul li ul li .sub-menu, #header-2 #navigation ul li ul li .sub-menu {margin-left: 120px !important; }
.sub-menu .has-sub-menu{ background-position: 106px 17px !important;}
.sub-menu .has-sub-menu:hover{ background-position: 106px -83px !important;}


</style>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/home/home-1.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/home/message-1.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/portfolio/portfolio-cat-7.css' type='text/css'/>
<link rel='stylesheet' href='http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/slider/slider-1.css' type='text/css'/> <script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/jquery.easing.js"></script>
<script type="text/javascript">
var show_slider2_grid = 'false';
var show_slider_title = 'false';
var slider_autoslide = '3000';
</script>
<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/templates/slider/slider-1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('a[rel^="prettyPhoto"]').prettyPhoto({theme: 'dark_rounded',slideshow:5000, autoplay_slideshow:false, overlay_gallery:false});
$('.size-thumbnail, .size-medium, .size-large, .size-full').parent().prettyPhoto({theme: 'dark_rounded', autoplay_slideshow:false, overlay_gallery:false});
});
</script>

<title>furniture</title>



<script type="text/javascript" src="http://siteURL/wp-content/themes/rockwell_v1.7.1/js/main.js"></script>

</head>
<body class="stencil_clothing option-slider-1">
<div id="header_container" class="header_container_2">
<div id="header_wrapper">
<div id="header-2" class="header">
<div class="logo_holder"><a href="http://siteURL"><img src="http://siteURL/wp-content/uploads/2012/02/blank.png"></a></div>


<!-- /////////////////////////////////////////////////////////////////////// -->
<!-- // Navigation // -->
<!-- /////////////////////////////////////////////////////////////////////// -->
<div id="navigation">
<div class="menu-navigation-container">
<div class="menu-main-menu-container"><ul id="menu-navigation" class="menu"><li id="menu-item-1013" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1013" ><a href="http://siteURL"><span class="top-menu-item">Home</span></a></li>
<li id="menu-item-1022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1022" ><a href="http://siteURL/category/art"><span class="top-menu-item">Art</span></a></li>
<li id="menu-item-1031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1031" ><a href="http://siteURL/category/design"><span class="top-menu-item">Design</span></a></li>
<li id="menu-item-1021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1021" ><a href="http://siteURL/category/furniture"><span class="top-menu-item">Furniture</span></a></li>
<li id="menu-item-1032" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1032" ><a href="http://siteURL/category/purchase"><span class="top-menu-item">Purchase</span></a></li>
<li id="menu-item-595" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-595" ><a href="http://siteURL/bio"><span class="top-menu-item">Bio</span></a></li>
<li id="menu-item-593" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-593" ><a href="http://siteURL/category/news"><span class="top-menu-item">News</span></a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594" ><a href="http://siteURL/contact"><span class="top-menu-item">Contact</span></a></li>
</ul></div> </div><!-- END div.menu-navigation-container -->

</div><!-- END div#navigation -->

<div class="clear"></div>

</div><!-- END div#header -->
</div><!-- END div#header_wrapper -->
</div><!-- END div#header_container -->

[edited by: alt131 at 6:07 pm (utc) on Feb 19, 2012]
[edit reason] Thread Tidy [/edit]