MyBB Community Forums

I hope someone can help me with that. I would like to center the menu above the forum, below the banner. Conventional centering ala <center> didn't really make it work.

Here is my header template.

Quote:<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo" align="center"><a href="{$mybb->settings['bburl']}/index.php"><img src="http://www.mydomain.com/board/images/logo.png" height="160" width="1000" align="center" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div><p>
<ul id="menu">
<li><a href="{$mybb->settings['bburl']}/portal.php"><img src="http://www.mydomain.com/images/menu/menu-home.png" border="0"> <font face="arial">HOME</font></a></li>
<li><a href="#" class="selected"><img src="http://www.mydomain.com/images/menu/menu-category.png" border="0"> <font face="arial">FORUM</font></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php"><img src="http://www.mydomain.com/images/menu/menu-home.png" border="0"> <font face="arial">Forum Index</font></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><img src="http://www.mydomain.com/images/menu/menu-latest.png" border="0"> <font face="arial">Latest Posts</font></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="selected"><img src="http://www.mydomain.com/images/menu/menu-search.png" border="0"> <font face="arial">Search</font></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="http://www.mydomain.com/images/menu/menu-members.png" border="0"> <font face="arial">Member List</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=rules"><img src="http://www.mydomain.com/images/menu/menu-rules.png" border="0"> <font face="arial">Forum Rules</font></a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="http://www.mydomain.com/images/menu/menu-calendar.png" border="0"> <font face="arial">Calendar</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=banned"><img src="http://www.mydomain.com/images/menu/menu-banned.png" border="0"> <font face="arial">Banned Users</font></a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#" class="selected"><img src="http://www.mydomain.com/images/menu/menu-category.png" border="0"> <font face="arial">TOOLS</font></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/donate.php"><img src="http://www.mydomain.com/images/menu/menu-paypal.png" border="0"> <font face="arial">Support Us</font></a></li>
<li><a href="http://www.jabberwolf.de" target="_blank"><img src="http://www.mydomain.com/images/menu/menu-chat.png" border="0"> <font face="arial">Chat</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=gbk"><img src="http://www.mydomain.com/images/menu/menu-guestbook.png" border="0"> <font face="arial">Gbook & Shoutbox</font></a></li>
<li><a href="http://blog.mydomain.com" target="_blank"><img src="http://www.mydomain.com/images/menu/menu-blog.png" border="0"> <font face="arial">Blog</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=art"><img src="http://www.mydomain.com/images/menu/menu-tutorial.png" border="0"> <font face="arial">Articles</font></a></li>
<li><a href="{$mybb->settings['bburl']}/games.php"><img src="http://www.mydomain.com/images/menu/menu-arcade.png" border="0"> <font face="arial">Arcade</a></font></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=galy"><img src="http://www.mydomain.com/images/menu/menu-gallery.png" border="0"> <font face="arial">Gallery</font></a></li>
<li><a href="http://files.mydomain.com" target="_blank"><img src="http://www.mydomain.com/images/menu/menu-downloads.png" border="0"> <font face="arial">Downloads</font></a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#" class="selected"><img src="http://www.mydomain.com/images/menu/menu-category.png" border="0"> <font face="arial">GAMING</font></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=awlobby"><img src="http://www.mydomain.com/images/menu/menu-aw2.png" border="0"> <font face="arial">Lobby</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=aw2servers"><img src="http://www.mydomain.com/images/menu/menu-aw2.png" border="0"> <font face="arial">Server Status</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=jostats"><img src="http://www.mydomain.com/images/menu/menu-aw2.png" border="0"> <font face="arial">Server Statistics</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=dfx"><img src="http://www.mydomain.com/images/menu/menu-dfx.png" border="0"> <font face="arial">Server Status</font></a></li>
<li><a href="http://urt.mydomain.com/status/index.php" target="_blank"><img src="http://www.mydomain.com/images/menu/menu-urbanterror.png" border="0"> <font face="arial">Urban Terror</font></a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#" class="selected"><img src="http://www.mydomain.com/images/menu/menu-category.png" border="0"> <font face="arial">VOICE</font></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=ts"><img src="http://www.mydomain.com/images/menu/menu-teamspeak.gif" border="0"> <font face="arial">WOLF.PACK</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=ventrilo"><img src="http://www.mydomain.com/images/menu/menu-ventrilo.png" border="0"> <font face="arial">WOLF.PACK</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=thorsvent"><img src="http://www.mydomain.com/images/menu/menu-ventrilo.png" border="0"> <font face="arial">THOR</font></a></li>
</ul>
<div class="clear"></div>
</li>
<li><a href="#" class="selected"><img src="http://www.mydomain.com/images/menu/menu-category.png" border="0"> <font face="arial">VIDEO CLIPS</font></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=videos-urt"><img src="http://www.mydomain.com/images/menu/menu-urbanterror.png" border="0"> <font face="arial">URBAN TERROR</font></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=videos-aw2"><img src="http://www.mydomain.com/images/menu/menu-aw2.png" border="0"> <font face="arial">AW2</font></a></li>
</ul>
<div class="clear"></div>
</li><br><br>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">

{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$comments_alert}{$aamessage}
{$pending_joinrequests}{$myblog_repco_display}
{$unreadpmmsg}
<navigation><ougc_annbars>
{$myresult_all_tp}
<br />

The .CSS part of that menu (I don't know if I need to change things in there too) is that.

#menu {
    margin:0; 
    padding:0; 
    list-style:none;
}

#menu li {
    float:left; 
    display:block; 
    width:150px; 
    /*background:#000;*/ 
    position:relative;
    z-index:500; 
    margin:0 1px;
}

/* this is the parent menu */
#menu li a {
    display:block; 
    padding:8px 5px 1px 5px; 
    font-weight:bold;  
    height:23px; 
    text-decoration:none; 
    /*background:#efefef;*/
    /*background:#ffffff;*/
    background: #000;
    text-align:center;
    font-family: Tahoma, Verdana, Arial; 
    font-size: 16px;
    color:#ffffff;
    border:1px solid #000;
}

#menu li a:hover {
    color:#ff0000;
}

/* submenu, it's hidden by default */
#menu ul {
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none;
}

#menu ul li {
    width:150px; 
    float:left; 
    /*border-top:1px solid #efefef;
    border-left:1px solid #efefef;
    border-right:1px solid #efefef;
    border-bottom: 1px solid #efefef;*/
}

#menu ul a {
    display:block;  
    height:15px;
    color:#ff0000;
    background:#fff;
    padding: 10px 5px; 
    color:#000;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
    font-family: system; 
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-top: 0;
}

#menu ul a:hover {
    text-decoration:none;
    background:#000;   
    color:#fff;
    font-weight: bold;
    font-size: 12px;
    text-align: left;
    font-family: Tahoma;
    border: 0;
}

*html #menu ul {
    margin:0 0 0 -2px;
}

The reason I used a quote for the template above was so I could mark that part that I mean in bold.

I only would like to have the menu centered, not the font inside the menu centered.

Any help is appreciated.

Thank you.

Wolfseye

Change this property in
#menu ul a{
}

Make text-align: left; to
text-align: center;

But that sounds more like the text gets centered in the menu, and not only the menu getting centered, while the text in the menu is supposed to stay aligned as it is right now.

Anyone ?

#menu {
margin:0px auto;
}

Well, it moved lets say 2 centimeters to the right, but thats it. No center.

Link to your site?

Wolfseye

Crazy God

Wolfseye

Wolfseye

Tindris

Wolfseye

Tindris