SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dnn housemenu center alignment

    hi everyone,

    i'm using the housemenu for a dnn site i'm working on and the client wants the menu to be centered horizontally. i've been mucking about with the css for an hour and i can't seem to get it right.

    the html and css are below:

    Code:
    /* ==========================
        CSS STYLES FOR HouseMenu
       ==========================
    */
    
    /*********************************************************************
     Standard structural CSS that typically should not need to be changed
    *********************************************************************/
    #houseMenuH, #houseMenuH ul { /* all submenu lists */
      padding: 0;
      margin: 0;
      border: 0;
      list-style: none;
      white-space: nowrap;
      position: relative;
      z-index: 99999;
    }
    
    #houseMenuH li { /* all list items */
      position: relative;
      display: inline;
      float: left;
      margin: 0;
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li li { /* all items under the top level */
      z-index: 11113;
    }
    
    #houseMenuH a { /* all links within the menu wrapper */
      display: block;
      margin: 0; 
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li li a { /* all item links under the top level */
      margin: 0;
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li a:hover {
      margin: 0;
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li li a:hover {
      margin: 0;
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li ul {
      position: absolute;
      margin: 0;
      border: 0;
      padding: 0;
      z-index: 11112;
    }
    
    #houseMenuH li ul ul { /* third-and-above-level lists */
      margin: 0;
      border: 0;
      padding: 0;
    }
    
    #houseMenuH li:hover ul ul, 
    #houseMenuH li:hover ul ul ul, 
    #houseMenuH li.sfhover ul ul, 
    #houseMenuH li.sfhover ul ul ul {
      left: -9999px;
    }
    
    #houseMenuH li:hover ul, 
    #houseMenuH li li:hover ul, 
    #houseMenuH li li li:hover ul, 
    #houseMenuH li.sfhover ul, 
    #houseMenuH li li.sfhover ul, 
    #houseMenuH li li li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
      z-index: 99999;
    }
    
    #houseMenuH iframe {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
      display: block;
    }
    
    .ArrowPointer
    {
      cursor: default;
    }
    
    
    
    /*******************************************************
     Presentation CSS that typically needs to be customized
    *******************************************************/
    #houseMenuH, #houseMenuH ul { /* all submenu lists */
      border: 0;
      width: 100%;
      height: 22px;
      _height: 20px;
      line-height: 12px;
      background-color: #556293;
    }
    
    #houseMenuH li { /* all list items */
      border-left: 1px solid #fff;
      width: 144px;
      height: 22px;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      width: auto;
      _width: 1px;
      height: 22px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li li { /* all items under the top level */
      border-bottom: 1px solid #fff;
      width: 148px;
      height: auto;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      width: 134px;
      _width: 144px;
      /* end hack */
    }
    
    #houseMenuH a { /* all links within the menu wrapper */
      font-family: Arial, Helvetica, Sans-Serif;
      font-size: 12px;
      font-weight: bold;
      text-decoration: none;
      letter-spacing: 1px;
      color: #fff;
      background-color: transparent;
      padding: 5px;
      width: auto;
      height: auto;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      _width: 100%;
      height: 12px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li li a { /* all item links under the top level */
      padding: 5px;
      width: 148px;
      height: 20px;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      width: 134px;
      _width: 144px;
      height: 12px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li a:hover {
      padding: 5px;
      color: #fff;
      background-color: #80561b; 
      height: auto;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      height: 12px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li li a:hover {
      color: #fff;
      background-color: #556293; 
      padding: 5px;
      height: auto;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      height: 12px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li li li a:hover {
      color: #666;
      background-color: #eee; 
      padding: 5px;
      height: auto;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      height: 12px;
      _height: 20px;
      /* end hack */
    }
    
    #houseMenuH li ul { /* second-level lists */
      width: 144px; /* width of submenu, must be set so third-level list can get shifted over properly */
      left: -9999px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
      border: solid 1px #333;
      margin: -2px 0 0 0;
      /* hack for MacIE5 to ignore, while other browsers use \*/
      margin: 0;
      /* end hack */
      line-height: 12px;
      background-color: #80561b;
      height: auto;
      opacity: 0.8;
    }
    
    #houseMenuH li ul ul { /* third-and-above-level lists */
      margin: -22px 0 0 144px;
      border: solid 1px #666;
      line-height: 12px;
      background-color: #ccc;
    }
    
    /* Applied to the parent item, if displayed, in either vertical or horizontal
       orientation. Must follow other styles. */
    #houseMenuH #houseMenuParentItem a
    { /* all links under the parent item (li) */
      background-color: transparent; 
      text-decoration: none;
    }
    
    #houseMenuH a#houseMenuParentLink
    { /* parent link itself */
      background-color: transparent; 
      text-decoration: none;
    }
    
    #houseMenuH a#houseMenuCurrentLink
    { /* current link itself */
      padding: 5px;
      color: #333; 
      background-color: #eee; 
      text-decoration: none;
    }
    Code:
    <ul id="houseMenuH">
    <li id="houseMenuHItemHome"><a title="Home" href="http://localhost/">Home</a></li>
    <li id="houseMenuHItem54"><a tabindex="1" title="About" href="http://localhost/About/tabid/54/Default.aspx" id="houseMenuHLink54">About</a></li>
    <li id="houseMenuHItem55"><a tabindex="1" title="Products" href="http://localhost/Products/tabid/55/Default.aspx" id="houseMenuHLink55">Products</a></li>
    <li id="houseMenuHItem56"><a tabindex="1" title="Training" href="http://localhost/Training/tabid/56/Default.aspx" id="houseMenuHLink56">Training</a></li>
    <li id="houseMenuHCurrentItem"><a tabindex="1" title="Services" href="http://localhost/Services/tabid/57/Default.aspx" id="houseMenuHCurrentLink">Services</a></li>
    <li id="houseMenuHItem60"><a tabindex="1" title="Educational Resources" href="http://localhost/EducationalResources/tabid/60/Default.aspx" id="houseMenuHLink60">Educational Resources</a></li>
    <li id="houseMenuHItem61"><a tabindex="1" title="Community" href="http://localhost/Community/tabid/61/Default.aspx" id="houseMenuHLink61">Community</a></li>
    <li id="houseMenuHItem38"><a class="ArrowPointer">Admin</a></li>
    <li id="houseMenuHItem7"><a class="ArrowPointer">Host</a></li>
    </ul>

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm very curious as to why each and every li needs an id-- since they're all li's, they'd normally get different classes...must be for a script?

    Anyway, if your menu is sitting to the left, then I think you'll be okay with this:
    Code:
    /*********************************************************************
     Standard structural CSS that typically should not need to be changed
    *********************************************************************/
    #houseMenuH, #houseMenuH ul { /* all submenu lists */
      padding: 0;
      margin: 0 auto;
      border: 0;
      list-style: none;
      white-space: nowrap;
      position: relative;
      z-index: 99999;
    }
    Since ul is a block element, you center it with margins. So the 0 means 0 top and bottom, and the auto means, make the margin on each side equal. This centers it within its container though, not the page, unless either the page is the container, or the container is 100% width.

    Should work, but it looks like you're working with a difficult template : ( Good luck.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply. i have already tried the auto margin and it doesn't have any affect. i think the reason is that the list items are floated left and block display.

    and to answer your question about the ids, yes they are generated by a script and i have no control over that.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I was actually a bit off-- that part of the CSS also affects the inner uls; not my meaning.

    It should not matter if anything inside is floated, they are still constrained to the width of the main ul.
    Code:
    #houseMenuH, #houseMenuH ul { /* all submenu lists */
      padding: 0;
      margin: 0 auto;
      border: 0;
      list-style: none;
      white-space: nowrap;
      position: relative;
      z-index: 99999;
    }
    #houseMenuH {
      width: set a width that is large enough that the floats still stack;
      margin: 0 auto;
    }


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
  •