Advanced Search

Results 1 to 8 of 8

Thread: Smooth Navigation Menu: Center Menu Buttons (& text)

  1. #1
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smooth Navigation Menu: Center Menu Buttons (& text)

    1) Script Title: Smooth Navigational Menu (v1.02)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    3) Describe problem:

    I'm trying to center the Menu items (buttons & text) inside of the menu bar. Currently it's left-aligned.

    Using the sample image as a reference, I want it so the blue button (with white text) menu items are centered horizontally in the beige bar.

    When it's all said and done, there should be a little beige on each side of the menu bar.





    Below is the css:

    Code:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #ebebeb; /*background of menu bar (default state)*/
    width: 95%;
    float: center;
    
    }
    
    .ddsmoothmenu ul{
    z-index:100;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .ddsmoothmenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .ddsmoothmenu ul li a{
    display: block;
    background: #6f829b; /*background of menu items (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
    color: white;
    }
    
    .ddsmoothmenu ul li a:hover{
    background: #720202; /*background of menu items during onmouseover (hover state)*/
    color: white;
    }
    	
    /*1st sub level menu*/
    .ddsmoothmenu ul li ul{
    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .ddsmoothmenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .ddsmoothmenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .ddsmoothmenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
    
    /* ######### CSS for shadow added to sub menus  ######### */
    
    .ddshadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    }
    
    .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
    opacity: 0.8;
    }
    Last edited by Snookerman; 04-22-2009 at 08:01 AM. Reason: added "Resolved" prefix

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try this:
    Code:
    .ddsmoothmenu ul{
    z-index:100;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    width: 600px; //change this to the width of your menu
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Worked like a charm... Thanks!

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help!
    You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title.
    This will let other users know the problem has been solved.

    Good luck with your site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Mine still is jammed to the left.

    How can I stretch it out to 100% and be fluid?

    When you adjust the window the menu wraps.

    I am using width: 100%; and white-space: nowrap;

    Thanks.

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Hi webskipper, please post a link to your site so we can take a look. Also, in the future, please start a separate thread when asking a question. This time you can ask a mod to do it for you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Nov 2008
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My question is similar to that of the previous user. I just want mine to be fluid and not have a single pixel of background showing on the left and right sides.

    Site is modelyacht.org /xxx/ XNEW.html

    Layout is the 2 column Fluid fixed.

    If IE6 would just fall off the face of the earth my job would be easier.

  8. #8
    Join Date
    Aug 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ...and I have the same issue.

    Have any of you before me been able to resolve this??

    Thanks in advance
    --

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
  •