Results 1 to 6 of 6

Thread: All Levels menu alignment

  1. #1
    Join Date
    Jun 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default All Levels menu alignment

    1) Script Title:
    All Levels Navigational Menu (v1.31)

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

    3) Describe problem:
    on the horizontal version of this menu, the default position of the menu items are aligned to the left of the menu bar. how can i align them to the centre?

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Code:
    .mattblackmenu li a{
    position:relative;
    top:0px;
    left:32%;
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px; /*padding inside each tab*/
    border-right: 1px solid white; /*right divider between tabs*/
    color: white;
    background: #414141;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  3. #3
    Join Date
    Jun 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    just added the code. it works great.

    thanks.

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    glad i could help
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Jun 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    just done some more testing, and found out that this doesn't actually work, it just moves the start of the menus to 1/3 of the way across the screen, but doesn't actually centre them. do you have any other suggestions?

  6. #6
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    To actually center the top level menu, you'll need to modify the CSS for it so it doesn't use "float: left", which makes centering difficult. This changes the look of the menu obviously, so do so based on your knowledge of CSS. Here's one such CSS you can replace the entire contents of ddlevelsmenu-topbar.css with which creates a menu bar that can easily be centered:

    Code:
    /* ######### Chrome Main Menu Bar CSS ######### */
    
    .chromemenu{
    width: 99%;
    font-weight: bold;
    font-size: 90%;
    }
    
    .chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromemenu ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x;
    padding: 7px 0;
    margin: 0;
    text-align: center; /*set value to "right" for example to align menu to the left of page*/
    }
    
    .chromemenu ul li{
    display: inline;
    }
    
    .chromemenu ul li a{
    color: #494949;
    padding: 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    .chromemenu ul li a:hover{
    background: url(chromebg2.gif) center center repeat-x;
    }
    
    .chromemenu ul li a.selected{
    background: url(chromebg2.gif) center center repeat-x;
    }
    Be sure to change the CSS class name of the menu in your HTML from class="mattblackmenu" to class="chromemenu". Images referenced in the CSS code above can be grabbed here: http://www.dynamicdrive.com/style/cs...rome-menu-bar/

Tags for this Thread

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
  •