ThemeShaper Forums Topic: How to center the menu in 0.9

ThemeShaper Forums Topic: How to center the menu in 0.9 http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Thu, 23 May 2013 21:31:21 +0000 marshall on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-21851 Mon, 13 Jun 2011 16:58:41 +0000 marshall 21851@http://themeshaper.com/forums/ 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: <code> .sf-menu { border-right: none; position: relative; float: left; left: 50%; } .sf-menu li { position: relative; float: left; right: 50%; } </code> 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) wlanni on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-18734 Thu, 27 Jan 2011 01:30:14 +0000 wlanni 18734@http://themeshaper.com/forums/ Hello all! I found a way to center my menu in a fixed width solution using floats, etc. This page had what I needed: <a href="http://www.cssplay.co.uk/menus/centered.html" rel="nofollow">http://www.cssplay.co.uk/menus/centered.html</a> My menu ul id is #menu-global-nav, its class is .sf-menu: <pre><code><div id=access> <div class=menu> <ul id=menu-global-nav class=sf-menu> <li>...etc</li> </ul> </div> </div></code></pre> <pre><code>#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%; }</code></pre> Site still under development, but here's a rough page: <a href="http://revebeds.com/luxury-beds-products/" rel="nofollow">http://revebeds.com/luxury-beds-products/</a> Robo on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-13941 Fri, 16 Jul 2010 10:04:02 +0000 Robo 13941@http://themeshaper.com/forums/ 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? Robo on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-13940 Fri, 16 Jul 2010 09:58:56 +0000 Robo 13940@http://themeshaper.com/forums/ Did anyone come up with a nice clean solution to this? Can this not be done in CSS -- in principle? markjenkins81 on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-10726 Mon, 15 Mar 2010 09:46:35 +0000 markjenkins81 10726@http://themeshaper.com/forums/ 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 susan on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-10128 Wed, 24 Feb 2010 03:00:33 +0000 susan 10128@http://themeshaper.com/forums/ 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. bodhirayo on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-10036 Mon, 22 Feb 2010 05:28:24 +0000 bodhirayo 10036@http://themeshaper.com/forums/ 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: <pre><code><div id="header"> <?php // action hook creating the theme header thematic_header(); ?> </div></code></pre> with this: <pre><code><div id="header"> <div id="branding"> <div id="blog-title"><a href="<?php bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></div> <div id="blog-description"><?php bloginfo('description') ?></div> </div> <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> </div></code></pre> then in my style.css i added: <pre><code>#access table {margin:0 auto; border:none;} #access tr {border:none;} #access td {padding:0;}</code></pre> not pretty, but it works... :) susan on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-10000 Sat, 20 Feb 2010 19:20:57 +0000 susan 10000@http://themeshaper.com/forums/ 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. Sherman on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-9767 Sat, 13 Feb 2010 03:50:12 +0000 Sherman 9767@http://themeshaper.com/forums/ That tip with #access at 33% works awesome in everything above IE6. But you need to add margin: 0 auto; Thanks for the tip! Renee on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-9143 Wed, 20 Jan 2010 19:24:09 +0000 Renee 9143@http://themeshaper.com/forums/ Well, the body has to be a fixed width for this, so I guess that kind of defeats the purpose. Sorry. Renee on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-9142 Wed, 20 Jan 2010 19:03:14 +0000 Renee 9142@http://themeshaper.com/forums/ 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. aoda on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2604 Thu, 26 Mar 2009 18:38:01 +0000 aoda 2604@http://themeshaper.com/forums/ Thank you! dannydamnboy on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2592 Thu, 26 Mar 2009 10:49:04 +0000 dannydamnboy 2592@http://themeshaper.com/forums/ 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: <a href="http://www.auxanocreative.com/clients/sh/index.htm" rel="nofollow">http://www.auxanocreative.com/clients/sh/index.htm</a> Thanks again Chris. aoda on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2582 Wed, 25 Mar 2009 23:45:08 +0000 aoda 2582@http://themeshaper.com/forums/ Can you share how you're doing this? I'm new, so any help is appreciated! Thanks. dannydamnboy on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2573 Wed, 25 Mar 2009 20:32:57 +0000 dannydamnboy 2573@http://themeshaper.com/forums/ 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! Chris on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2538 Tue, 24 Mar 2009 12:51:51 +0000 Chris 2538@http://themeshaper.com/forums/ 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: <a href="http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/">Centering a dropdown menu</a>. dannydamnboy on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2535 Tue, 24 Mar 2009 10:47:49 +0000 dannydamnboy 2535@http://themeshaper.com/forums/ 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... Chris on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2534 Tue, 24 Mar 2009 10:08:19 +0000 Chris 2534@http://themeshaper.com/forums/ Hey Danny, take a look here: <a href="http://www.auxanocreative.com/clients/sh/index.htm">http://www.auxanocreative.com/clients/sh/index.htm</a> Haven't tested what this guy did, but the result is centered. Cheers, Chris ondrae on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2526 Tue, 24 Mar 2009 04:23:46 +0000 ondrae 2526@http://themeshaper.com/forums/ I've tried everything. Everything. No go. If you guys figure it out, please, please, please let me know. dannydamnboy on "How to center the menu in 0.9" http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09#post-2155 Tue, 10 Mar 2009 15:54:18 +0000 dannydamnboy 2155@http://themeshaper.com/forums/ 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!