Hi
I need to cetre the horizontal menu bar on a Joomla site, and have tried the text-align:center; but no joy. Any help will be appreciated. This is the CSS for it:
I need to cetre the horizontal menu bar on a Joomla site, and have tried the text-align:center; but no joy. Any help will be appreciated. This is the CSS for it:
Code:
/* @group SUCKERFISH */
#navbar {
height: 32px;
padding: 0px 0px 0px 32px;
margin: 0;
position: relative;
z-index: 900;
float: left;
width: 100%;
text-align:center;
font: bold 14px/32px "Lucida Grande", Lucida, Verdana, sans-serif;
background: #fff;width:900px;margin: -32px 0 0 14px;padding:0px 0px 0 0;
}
#navbar ul {
float: left;
list-style: none;
padding: 0;
margin: 0;
margin-left: 0px;
}
#navbar ul li {
position: relative;
margin: 0;
}
/*PARENT MENU*/ /*correct*/
#navbar a {
float: left;
color: #f2f2f2;
text-decoration: none;
display: block;
cursor: pointer;
height: 32px;
line-height: 32px;
padding: 0px 0px;
}
/*PARENT MENU ITEM HOVER*/ /*correct*/
#navbar li a:hover {
background: #f2f2f2;
color: #333;
}
#navbar ul li:hover,
#navbar ul li.sfhover
{
background: #f2f2f2;
}
/*ALL LISTS*/
#navbar li {
float: left;
padding: 0;
background: #fff;
}
#navbar ul li {
margin-right: 0px;
border-right: 1px solid #f2f2f2;}
#navbar ul li ul li {
margin-right: 0px;
border-right: 0px solid #fff;
}
#navbar li:hover ul,
#navbar li li:hover ul,
#navbar li li li:hover ul,
#navbar li li li li:hover ul,
#navbar li.sfhover ul,
#navbar li li.sfhover ul,
#navbar li li li.sfhover ul,
#navbar li li li li.sfhover ul {
background: #333;/* url(../images/menu_gradient.png) repeat-x left top;*/
}
/*DEFINE HOVER COLORS*/
#navbar li:hover a, #navbar li.sfhover a {
color: #333;
}
#navbar ul li ul li a:link,
#navbar ul li ul li a:visited
{
color: #fff;
}
#navbar ul li ul li a:hover,
#navbar ul li.active ul li a:hover {
color: #333;
}
/*SUBLEVEL STYLES*/
/*SUBLEVEL TEXT STYLES*/
#navbar li li a {
font-weight: normal;
padding: 0;
height: 26px;
line-height: 26px;
text-indent: 5px;
}
#navbar ul ul a {
display: block;
text-decoration: none;
width: 170px;
text-transform: none;
}
#navbar li li {
padding: 0;
background: none;
/*DONT SHOW THE BACKGROUND IMAGE*/
}
/*SUBLEVEL POSITIONING*/
#navbar li li {
float: left;
padding: 0;
width: 173px;
}
#navbar li ul ul {
margin: -29px 0 0 173px;
}
#navbar li:hover, #navbar li.sfhover {
left: 0;
}
/*SUBLEVEL HOVER STYLES*/
#navbar ul ul a:hover {
background: none;
height: 26px;
line-height: 26px;
padding: 0;
margin: 0;
}
#navbar li ul {
top: 32px;
position: absolute;
left: -999em;
height: auto;
width: 173px;
font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
font-weight: normal;
border-width: 0;
margin: 0;
padding: 0;
border-right: 1px solid #333;
border-left: 1px solid #333;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
/* MAINLEVEL ACTIVE-A:LINK STYLE */ /*correct*/
#navbar li.active a:link,
#navbar li.active a:visited,
#navbar li.active ul.sfhover
{
/*background:#000;
color: #f2f2f2;*/
}
/* SUBLEVEL ACTIVE-A:LINK STYLE */ /*correct*/
#navbar li.active ul li a:link,
#navbar li.active ul li a:visited,
#navbar li.active li
{
/*color: #f2f2f2;
background-image: none;*/
}
/* SUBLEVEL ACTIVE-A:LINK:HOVER STYLE */
#navbar li.active li a:hover,
#navbar li.active li.hover {
color: #fff;
background-image: none;
}
/* SUBLEVEL LI BACKGROUND */ /*correct*/
#navbar li li:hover {
background: #f2f2f2;
}
/*SUBLEVEL PARENT INDICATORS*/
#navbar ul li ul li a.child,
#navbar ul li ul li a.child:hover {
background: url(../images/arrow_right.gif) 100% 50% no-repeat;
}
#navbar ul li.active ul li a.child {
background: url(../images/arrow_right.gif) 100% 50% no-repeat;
}
#navbar ul li ul li a:hover {
background-image: none;
}
/* HIDE OTHER LISTS FROM IE */
#navbar li:hover ul ul,
#navbar li:hover ul ul ul,
#navbar li:hover ul ul ul ul,
#navbar li.sfhover ul ul,
#navbar li.sfhover ul ul ul,
#navbar li.sfhover ul ul ul ul {
left: -999em;
}
#navbar li:hover ul,
#navbar li li:hover ul,
#navbar li li li:hover ul,
#navbar li li li li:hover ul,
#navbar li.sfhover ul,
#navbar li li.sfhover ul,
#navbar li li li.sfhover ul,
#navbar li li li li.sfhover ul {
z-index: 100;
left: 0;
}
/* BECAUSE IE DOESNT UNDERSTAND CSS EVEN IN 2007 */
#navbar li.sfhover ul li.sfhover {
background: #f2f2f2;
}
#navbar li:hover li:hover a.child,
#navbar li.sfhover li.sfhover a.child {
color: #333;
}
/* @end */