ThemeShaper Forums » Thematic

[closed]

How to center the menu in 0.9

(20 posts)
  • Started 5 years ago by dannydamnboy
  • Latest reply from marshall
  • This topic is not resolved
  1. 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 5 years ago #
  2. ondrae
    Member

    I've tried everything. Everything. No go.

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

    Posted 5 years ago #
  3. 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 5 years ago #
  4. 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 5 years ago #
  5. 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 5 years ago #
  6. 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 5 years ago #
  7. aoda
    Member

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

    Posted 5 years ago #
  8. 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 5 years ago #
  9. aoda
    Member

    Thank you!

    Posted 5 years ago #
  10. 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 4 years ago #
  11. Well, the body has to be a fixed width for this, so I guess that kind of defeats the purpose. Sorry.

    Posted 4 years ago #
  12. 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 4 years ago #
  13. 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 4 years ago #
  14. 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 4 years ago #
  15. 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 4 years ago #
  16. 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 4 years ago #
  17. Robo
    Member

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

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

    Posted 4 years ago #
  18. 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 4 years ago #
  19. 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 3 years ago #
  20. 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 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.