Results 1 to 7 of 7

Thread: Centering the Smooth Navigational Menu (v2.0)

  1. #1
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Centering the Smooth Navigational Menu (v2.0)

    Hi,

    Is there any way to center the top level links across the bar, instead of the menu being positioned left?

    For instance, if my menu bar is 1000px wide but the menu itself only stretches about 800px I want 100px on both the right and the left side.

    Thanks for any help it is much appreciated!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Usually when you centre an element you set it to have margin-left:auto; margin-right:auto; and you may also need to set its container element to text-align:center;

    If you need more help, please post a link to both the script page on DD and a link to your page.
    Last edited by Beverleyh; 03-13-2013 at 10:25 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I do not have my page published to the web yet, if necessary I can do so but if it is possible to show me how to center this menu I should be able to apply it to my own no problem.

    http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    I am looking at the horizontal menu at the top

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Untested (on iPhone) but try setting margin-left:auto; margin-right:auto; on the top level (outermost) menu ul. You might also need to give it a width - try your 800px suggestion, or whatever width accommodates the buttons nicely.

    If that doesn't work, also try setting text-align:center; on the menu container div.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the suggesting.

    I have tried that already but it didnt seem to work. I ended up putting it in a centered table and fixing some other things to make it appear to be centered. it will do thanks again!

  6. #6
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I did that with this test page.

    http://www.web-user.info/test/smooth/index.html

    You can grab the css from it and see what I did.
    Thanks,

    Bud

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Quote Originally Posted by Beverleyh View Post
    Untested (on iPhone) but try setting margin-left:auto; margin-right:auto; on the top level (outermost) menu ul. You might also need to give it a width - try your 800px suggestion, or whatever width accommodates the buttons nicely.

    If that doesn't work, also try setting text-align:center; on the menu container div.
    OK - just back on a PC. This does actually work, so you would set it up like this (assuming that everything else is the default CSS);
    Code:
    <div id="smoothmenu1" class="ddsmoothmenu">
    <ul style="width:500px; margin-right:auto; margin-left:auto;">
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    ... etc ...
    With the DD demo menu, a width of about 500px accomodates the existing buttons (roughly their combined width - edit this to the width of your own once you've decided on your own button names/fonts).

    The reason why you'd need to define a width on the ul in this case is that a ul is a block level element, which means that it always spans a 100% width. And you can't center something that is already 100% wide - the auto left and right margins have no effect because the edges are already flush to the left and right edge of the screen/container.

    If you give the ul a fixed width (eg. 500px) the auto left and right margin now CAN take effect and align the smaller 500px child element in the center of the parent container - the #smoothmenu1 div, which is also a block level element, and again spanning 100% width of the screen (no need to define a width on that unless you want to reduce the width of background-bar)

    Doing it this way will float the buttons in the middle of the bar and allow the bar to span the full width of the any size screen.

    I'm glad you've already found a workaround but I just wanted to clear the logic up for you so you can move away from the table solution if you wish.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Smooth Navigational Menu
    By abi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-05-2012, 11:22 AM
  2. Smooth Navigational Menu (v1.02)
    By browndog23 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 04-18-2009, 07:24 AM
  3. Page centering issue /Smooth Navigational Menu
    By prtllc in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-11-2009, 03:27 AM
  4. Help with Smooth Navigational Menu
    By pbojork in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 01-06-2009, 11:20 PM
  5. centering Top Navigational Bar (aka Smart menu)
    By neilay in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-07-2005, 06:43 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •