Jump to content

center menu code


bsinko
 Share

Recommended Posts

Newbies first post. I'm more of a css hacker then anything. But I just can't figure out how to have the menu centered on the page. Here is the code from the template I'm trying to modify: /*=== TOP POSITION ===*/#rt-top{ padding:176px 0 0 0; margin-bottom:29px;}#rt-top .rt-container{ position:relative;padding-bottom:75px;}#rt-top .rt-container:after{ content:""; height:1px; position:absolute; bottom:0; left:10px; right:10px; background:#ebebeb; }/*=== HEADER POSITION ===*/#rt-header{text-align:center; position:absolute; width:100%; top:53px; left:0}#rt-header .rt-container{ width:306px; background:#fff;}#rt-header .rt-container .rt-grid-12{ width:100%; margin:0}/*=== MENU POSITION ===*/ul.sf-menu { position: relative; border-bottom:1px solid #ebebeb; border-top:1px solid #ebebeb; padding:10px 0 0 0; height:49px; /*SubMenu Styles*/ /*Define 1st SubMenu position*/ /*Define menu width*/ /*Define SubMenu position*/ /*Define 2nd+ SubMenu position*/ }ul.sf-menu > li{ margin-right:39px; margin-left:39px;}ul.sf-menu > li:after{ content:""; background:url(../images/menu_marker.gif) 0 0 no-repeat; width:6px; height:5px; top:16px; right:-50px; position:absolute;pointer-events: none;}ul.sf-menu > li.firstItem{ margin-left:0}ul.sf-menu > li.lastItem{ margin-right:0; overflow:hidden}ul.sf-menu > li.lastItem:after{ background:none; width:0; height:0; right:0; display:none;} ul.sf-menu li a,ul.sf-menu li span.separator { display: block; text-decoration: none; position:relative; z-index:99; font-size:32px; line-height:1.2em; font-family: 'Megrim', cursive; text-transform:lowercase;}ul.sf-menu > li { padding: 0;}ul.sf-menu > li:hover > ul,ul.sf-menu > li.sfHover > ul { top: 49px; left:0px;}ul.sf-menu > li:hover > ul li a,ul.sf-menu > li.sfHover > ul li a,ul.sf-menu > li:hover > ul li span.separator,ul.sf-menu > li.sfHover > ul li span.separator { display: block; line-height: 34px;}ul.sf-menu ul { width: 158px;}ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul { left: 140px; top: -0.5em;}ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left: 140px; top: -0.5em;}ul.sf-menu ul { padding:30px 20px; border-top:2px solid #cf7fb5; background:url(../images/submenu_marker.gif) 20px 0 no-repeat #f5f5f5 !important;}ul.sf-menu ul li{ padding-bottom:1px;}ul.sf-menu ul li a,ul.sf-menu ul li span.separator { display: block; font-size:22px; line-height:34px; padding:0 20px;}select.select-menu { display: none; margin: 0px 0px 0px;} Here is a link. I want the menu links to be centered. Any help would be greatly appreciated. http://www.ccrealwomen.org/index.php

Edited by bsinko
Link to comment
Share on other sites

add margin:0px 0px 0px 30px; to the .sf-menu class. I just successfully made the edit.

Link to comment
Share on other sites

Thank you but I put the code in but it didn't work for me: /*=== MENU POSITION ===*/ul.sf-menu { margin:0px 0px 0px 30px; position: relative; border-bottom:1px solid #ebebeb; border-top:1px solid #ebebeb; padding:10px 0 0 0; height:49px; Any other suggestions?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...