Center block of code menu buttons using css

[eddie8]

Board

I have a block of TEXT css style like buttons I would like to center
the "template_menu();"

no matter what I do, I can not get this to center can
can someone experienced in css please take a look at this

Code Select Expand

#Menu{
background-color: #FFFFFF;
width: 100%;
margin: 0;
margin: 0;
overflow: hidden;
border-bottom: 1px solid #000000;
}

index.template.php

Code Select Expand

echo '

<div id="Menu">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
echo '<li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '">', $button['title'], '</a></li>';

echo '
</ul>
</div>';

[KahneFan]

For 2.0

I have been asked how I create my center menus on some themes, this will create a (basic) centered menu, which you can customize to your liking. (SMF 2.0)

./Themes/{theme}/index.template.php
(note: this is the code that builds the menu on the page)
FIND:

Code Select Expand


// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="clearfix">';

foreach ($context['menu_buttons'] as $act => $button)
{
$classes = array();
if (!empty($button['active_button']))
$classes[] = 'active';
if (!empty($button['is_last']))
$classes[] = 'last';
$classes = implode(' ', $classes);

echo '
<li id="button_', $act, '"', !empty($classes) ? ' class="' . $classes . '"' : '', '>
<a title="', $act, '" href="', $button['href'], '">
<span>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
</a>
</li>';
}

echo '
</ul>
</div>';
}


REPLACE WITH:

Code Select Expand


// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">';

foreach ($context['menu_buttons'] as $act => $button)
{
$classes = array();
if (!empty($button['active_button']))
$classes[] = 'active';
if (!empty($button['is_last']))
$classes[] = 'last';
$classes = implode(' ', $classes);

echo '
<a title="', $act, '" href="', $button['href'], '">
<span>', ($button['active_button'] ? '<strong>' : ''), $button['title'], ($button['active_button'] ? '</strong>' : ''), '</span>
</a>';
}

echo '</div>';
}



./Themes/{theme}/css/index.css
(note1: this is the code which creates the design/look of the menu)
(note2: your theme author may have changed this class - so look for anything in the "#main_menu" class - or see above to find out how they built their menu)
FIND:

Code Select Expand


/* The main menu. */
#main_menu
{
padding-left: 1em;
}
#main_menu ul
{
list-style: none;
padding: 0;
margin: 0;
background: url(../images/maintab_first.gif) no-repeat bottom left;
padding-left: 10px;
}
#main_menu li
{
margin: 0;
padding: 0;
display: inline;
}
#main_menu li a
{
float: left;
display: block;
color: white;
font-size: 0.8em;
font-family: tahoma, sans-serif;
text-transform: uppercase;
}
#main_menu li a:hover
{
color: #e0e0ff;
text-decoration: none;
}
#main_menu li a span
{
background: url(../images/maintab_back.gif) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
#main_menu li.last a span
{
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
#main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
background: url(../images/maintab_active_back.gif) repeat-x bottom right;
}
#main_menu li.active a span
{
background: url(../images/maintab_active_first.gif) no-repeat bottom left;
padding: 0 0 0 8px;
}
#main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0 8px 0 0;
}
#main_menu li.active a
{
background: url(../images/maintab_active_last.gif) no-repeat bottom right;
padding-right: 8px;
}


REPLACE WITH:

Code Select Expand


/* The main menu. */
#main_menu
{
font-size: 90%;
width: 100%;
text-align: center;
background: #CCCCCC;
padding: 4px 0 4px 0;
}
#main_menu span
{
}
#main_menu a
{
font-size: 80%;
font-family: tahoma, sans-serif;
text-transform: uppercase;
padding: 2px 5px 2px 5px;
border: thin outset #C8CCF1;
margin: 0 2px 0 2px;
}
#main_menu a:hover
{
font-size: 80%;
font-family: tahoma, sans-serif;
text-transform: uppercase;
padding: 2px 5px 2px 5px;
background: #CCCCCC;
padding: 2px 5px 2px 5px;
border: thin inset #C8CCF1;
margin: 0 2px 0 2px;
}


And more in depth, I've found you need to remove the list tags <li> & <ul>, then just use the main <div id="menu"> that you have. But within your #menu, you need "text-align: center;", which then lines your text in the center of the div. For some reason, I can't seem to center lists, they want to float left or float right, never center.

I'd like to find the creators of CSS and ask them why they didn't just give us a "float: center;" tag.

[eddie8]

Hi

You are so right on, about list and float!

the very first thing I tried was float center
so I just had it all the way over to the left
I will follow what you posted thanks

I visited your site you are very talented at this

Ed

[KahneFan]

"very" is probably a bit strong. But thank you, I try

[Antechinus]

Actually there is a way of centering lists, at least according to an article I found online. I haven't tested it myself but it's rather clever and I can't see why it wouldn't work. This would be very useful because by not using lists you are removing a lot of styling possibilities. Try this out and see how you go.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

[KahneFan]

Great find Antechinus! I'll have to try that out on my next theme!

[eddie8]

Hi Guys

That 100% solved it PERFECT, just follow the instructions on that site
I would also copy and save that css, you can custom color and do a lot
with that, also

Antechinus  if you are the designer from Dziner Studio, I consider your
work the best forum designs I have ever seen.

Thank you for your helpful link
Ed

[Antechinus]

Glad it worked. I'm not the designer, although I have done a little bit of messing with themes. I'm more of a support bot there.

[KahneFan]

[3rd person]KahneFan is still drooling at the thoughts of the new trick[/3rd person] 

[Antechinus]

One thing to be aware of is that on narrow screens it wont automatically break the menu into a second row as some list-based menus do. The reason is the hidden overflow that this method relies on. If the screen isn't wide enough for all the buttons the ones at the right will simply be cut off. This would result in some functions being inaccessible unless you use the direct url in your address bar.

It's not likely to be much of a problem a lot of the time, and in any case can be circumvented by setting a min-width for your theme. Mind you that wont work in IE because IE is too stupid to read. It'll work in other browsers though.

[KahneFan]

I haven't tested it, but what if you made the <ul> container 50% width and placed it @ 50%, would it then overflow back into the page?

[KahneFan]

Ignore the above post. I just tested the original script in IE and it overflowed with no problem. Second row started building just fine.

[Antechinus]

Really? Cool. That's alright then. 

I hadn't tested it either. I was more or less thinking aloud. This looks like a winner then.

[KahneFan]

HOWEVER, it does just that, it wraps: top right corner --> bottom left corner (not center).

[eddie8]

On mine this centers the menu text buttons perfect, when the page shrinks the buttons
fold but at that point the whole forum looks crunched anyway

even with float left or any setting but a table with nowrap, the buttons will fold at some
point

Most people have a banner and other things so a fixed width would be a ideal way to go
since I have you exp guys here, what would be the maximum fixed width you would ever do?

Thanks
Ed

[KahneFan]

Fluid is OK to go with. You'll only see the fold issue arise if you have many ... many mods (buttons) installed. Otherwise, normal members and guests will probably never fill their screen.

[Antechinus]

Maximum? Depends on the theme and where the wrapper is compared to the edges of the screen, but I reckon you definitely want it to fit on a 1024. That will cover most people.

I prefer to set themes fluid with a minimum width.

[KahneFan]

Here's playing around with centered tabs...

http://ipostyoupost.com/SMFThemes/index.php?theme=26

[Antechinus]

Good. I can see this coming in handy because quite a few people were struggling with centering menus in RC1.

ETA: I'll mark this as solved.