Results 1 to 4 of 4

Thread: Center DD Tab Menu

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

    Default Center DD Tab Menu

    1) DD Tab Menu / Example #3
    2) http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
    3) I am trying to center the DD Tab menu. I can get it centered by removing the float: left and adding the correct padding but then the hover will not work correctly. I am getting a gap between the menu items.

    Can someone help?

    Thanks.

    CSS
    Code:
    .solidblockmenu ul{
    margin: 0;
    padding: 9px 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(images/blockdefault.jpg) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    /*float: left;*/
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.current{
    color: white;
    background: transparent url(images/blockactive.jpg) center center repeat-x;
    }

    HTML
    Code:
        <div id="ddtabs3" class="solidblockmenu">
          <ul>
            <li><a href="index.html" class="current">Home</a></li>
            <li><a href="firstpage.html">First Page</a></li>
            <li><a href="secondpage.html">Second Page</a></li>
            <li><a href="thirdpage.html">Third Page</a></li>
          </ul>
        </div>
    Last edited by mstyers; 03-10-2009 at 09:08 PM. Reason: Put info in format required by forum

  2. #2
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I also tried changing the CSS below from a previous post and I'm getting the same issue.

    Code:
    .solidblockmenu ul{
    margin: 0 auto;
    padding: 9px 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(images/blockdefault.jpg) center center repeat-x;
    width: 780px;
    }
    
    .solidblockmenu li a{
    /*float: left;*/
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    The menu is centered but with the hover there is an image gap on the left side of the menu items.

    Any help would be appreciated.

    Thanks.
    Last edited by mstyers; 03-09-2009 at 08:57 PM. Reason: put in forum format

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

    Default

    One of the suggestions in another post was to use the Chrome CSS menu (http://www.dynamicdrive.com/dynamici...rome/index.htm). I took a look at that page and these demo's have the same problem.

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

    Default

    I'm really disappointed that I didn't even get one reply.

    However, I was able to find a solution from another forum.

    Here are the css changes that worked. I'm sorry but some of the code has been modified for my specific application.

    CSS
    Code:
    .solidblockmenu {
    margin: 0;
    padding: 0;
    font: bold 13px Arial;
    width: 100%;
    overflow: hidden;
    background: black url(images/blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu ul {
    width: 443px;      /* Width of menu UL block. Used FF Developer Toolbar Ruler to determine the width. */
    margin: 0 auto;
    padding: 0;
    }
    
    .solidblockmenu li {
    display: inline;
    }
    
    .solidblockmenu li a {
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid #FFFFFF;
    }
    
    .solidblockmenu li a:visited {
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li .current {
    color: white;
    background: transparent url(images/blockactive.gif) center center repeat-x;
    }
    I hope this helps someone else.

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
  •