Results 1 to 4 of 4

Thread: One last thing with the menu

  1. #1
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default One last thing with the menu

    I know how to center the menu but how do I center the menu items?

    http://www.robinsden.110mb.com/menus...testpage.shtml

    What I want to do is center my top items to the middle of the menu.
    Last edited by robin9000; 02-05-2009 at 04:04 AM.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Try this

    Code:
    /*Top level list items*/
    .jqueryslidemenu ul li{
    text-align:center;
    position: relative;
    display: inline;
    float:right
    }
    in jqueryslidemenu.css

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    robin9000 (02-05-2009)

  4. #3
    Join Date
    Feb 2009
    Posts
    159
    Thanks
    60
    Thanked 3 Times in 3 Posts

    Default

    I did as you said but it only aligned the text to the middle of the tabs or what every they are called. I would like to have the words align to the middle of the page.

  5. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Oh. That's the whole menu then. Try this in place of your current file

    Code:
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background-image:url(../Images/menu.gif);
    height:31px;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align:center;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    text-align:center;
    display: inline-block;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display:inline-block;
    background-image:url(../Images/menu.gif); /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    background-image:url(../Images/menu2.gif); /*tab link background during hover state*/
    color: white;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu 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: 0px solid gray;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }

  6. The Following User Says Thank You to bluewalrus For This Useful Post:

    robin9000 (02-05-2009)

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
  •