How to center the menu in 0.9 « ThemeShaper Forums

ThemeShaper Forums » Thematic

[closed]

How to center the menu in 0.9

(20 posts)

Started 4 years ago by dannydamnboy
Latest reply from marshall
This topic is not resolved

Tags:

dannydamnboy
Member

As the title says, I cannot find a way to center the menu block...
I haven't understand completely the new menu structure, could someone help me please?

Thanks in advance!

Posted 4 years ago #
ondrae
Member

I've tried everything. Everything. No go.

If you guys figure it out, please, please, please let me know.

Posted 4 years ago #
Chris
Moderator

Hey Danny,

take a look here: http://www.auxanocreative.com/clients/sh/index.htm

Haven't tested what this guy did, but the result is centered.

Cheers,

Chris

Posted 4 years ago #
dannydamnboy
Member

Thanks Chris for the example.
That guy uses a "full" nav bar, so it seems to be centered but if we remove some links the nav bar will stay on the left. The problem appear if we don't have enough links to fill the navbar.
Maybe I am wrong but I've made some testswith firebug on that site...

Posted 4 years ago #
Chris
Moderator

Hey Danny,

this center thing drives me nuts .. Can't tell you how many How-to-whatever I read 'til now. Most of the methods have major drawbacks (either IE 6 AND 7 or OPERA). Visited a couple of websites from people that asked for a centered drop down menu .. haven't seen one that doesn't use a solution thats related to that one menu running on their website.

If it's just for a certain project: Use Firebug to look for the width of .sf-menu and set .menu width to width of .sf-menu + 1 (the +1 is important for the left borderline)

Just in case you want to read more 'bout that: Centering a dropdown menu.

Posted 4 years ago #
dannydamnboy
Member

It's really a mess. I can't found a single way to make it works in every browser.
Maybe the best and fastest way is remove it and change it with another menu.
Thanks Chris for trying!

Posted 4 years ago #
aoda
Member

Can you share how you're doing this? I'm new, so any help is appreciated!
Thanks.

Posted 4 years ago #
dannydamnboy
Member

Actually, we can't find a way to center the menu in eevry browser. But if you have a lot of pages, this example works fine: http://www.auxanocreative.com/clients/sh/index.htm
Thanks again Chris.

Posted 4 years ago #
aoda
Member

Thank you!

Posted 4 years ago #
Renee
Member

If you give #access a width of 33%, it centers beautifully. Have not tested in ies - if anyone knows there would be issues with this, feel free to call me on it.

Posted 3 years ago #
Renee
Member

Well, the body has to be a fixed width for this, so I guess that kind of defeats the purpose. Sorry.

Posted 3 years ago #
Sherman
Member

That tip with #access at 33% works awesome in everything above IE6. But you need to add margin: 0 auto;

Thanks for the tip!

Posted 3 years ago #
susan
Member

I've been trying to figure this one out as well, changing the #access works fine if I don't add any more pages, once I (or my client actually) adds pages my menu is no longer centered.

Anyone else have any ideas as to why the standard fix for this - margin/width does not work? Is there something in the javascript?

Depending on what you set your width to the menu is either on the left or on the right (anything less than 100% simply moves the menu to the right, 100% keeps it on the left).

Thanks.

Posted 3 years ago #

bodhirayo
Member

as a last resort i wrapped the menu in a single-cell table.
here's what i did...

in header.php i replaced this code:

<div id="header">

        <?php 

        // action hook creating the theme header
        thematic_header();

        ?>

</div><!-- #header-->

with this:

<div id="header">
      <div id="branding">
        <div id="blog-title"><span><a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></span></div>
        <div id="blog-description"><?php bloginfo('description') ?></div>
      </div><!--  #branding -->
      <div id="access">
        <div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
        <table><tr><td>
          <?php wp_page_menu('sort_column=menu_order') ?>
        </td></tr></table>
      </div><!-- #access -->
</div><!-- #header-->

then in my style.css i added:

#access table {margin:0 auto; border:none;}
#access tr {border:none;}
#access td {padding:0;}

not pretty, but it works... :)

Posted 3 years ago #

susan
Member

Thanks bodhirayo, I'll give that a try.

I recreated the menu code (no dropdowns since I didn't need them for this site) and added text-align "center" to .menu and it worked in 6/7/8 and Firefox.

I did try adding text-align to the original menu but it didn't do anything.

Posted 3 years ago #
markjenkins81
Member

Susan,

Do you have any explanation of how you recreated the menu please? I tried all of the above but couldn't get it to work in any instance. Any help would be greatly appreciated

thanks
Mark

Posted 3 years ago #
Robo
Member

Did anyone come up with a nice clean solution to this?

Can this not be done in CSS -- in principle?

Posted 2 years ago #
Robo
Member

Another thought -- since such a menu is probably linking to pages that have fixed names -- e.g. ".../About", then could the menu be hard coded into an action and hooked into the right place?

Posted 2 years ago #

wlanni
Member

Hello all!

I found a way to center my menu in a fixed width solution using floats, etc.
This page had what I needed:
http://www.cssplay.co.uk/menus/centered.html

My menu ul id is #menu-global-nav, its class is .sf-menu:

<div id=access>
<div class=menu>
<ul id=menu-global-nav class=sf-menu>

<li>...etc</li>
</ul>
</div>
</div>

#access {
    height:32px;
    font-size:medium;
    font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
    overflow:hidden;
    z-index:100;
    text-transform: lowercase;
	width: 960px;
	margin: 0 auto;
}

#access .menu {
	width: 100%;
}

#access .menu #menu-global-nav {
	position: relative;
	float: left;
	left: 50%;
}

#access .menu #menu-global-nav li {
	float: left;
	position: relative;
	right:50%;
}

Site still under development, but here's a rough page:
http://revebeds.com/luxury-beds-products/

Posted 2 years ago #

marshall
Member

wlanni: I do believe you've done it! I applied your solution using Thematic's default naming conventions, (ul class is "sf.menu") from what I can tell, this is the really important bit:

.sf-menu { border-right: none; position: relative; float: left; left: 50%; }
.sf-menu li { position: relative; float: left; right: 50%; }

Haven't tested for compatibility or anything, but it's all standard code so I don't expect anything to break. Thanks again, friend!

(Not sure if this issue was resolved in another thread or anything, but this thread was a top search result so this is where I looked first)

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.