locked
Adjustable tabs in CSS Adapters Menu RRS feed

  • Question

  • User-1329334484 posted

    I have developed CSS adapters menu as can be seen here:

    http://newmenu.dnndirect.com/sell.aspx

    1) Can the tabs be adjustable depending on the text entered? If I enter text "My Ads and Profile" it does not fit to the tab. 

    My programmer thinks that the tabs must be the same width. I feel that CSS design should allow to adjust width of the tab to the text enetered. Can somebody help or give general guidline what he needs to do.

    I also have some other problems with thsi menu 

    2) When I place the menu on my page, the second bar is not visible any more: http://test.zikbay.com/

    3) It also screw up the font in the Browse category tab... The whole browse category moves down in firefox...

    This is the original page:

    www.zikbay.com

    Tuesday, July 24, 2007 6:06 PM

All replies

  • User-1329334484 posted

     

    Please help.
    Saturday, July 28, 2007 11:03 AM
  • User-534056067 posted

    Let me give you a shove in the right direction. It's not the whole solution... but it's a very important piece.

    Follow these instructions and observe...

    1. Install the CSS Friendly adapter kit (VSI) if you haven't already.
    2. In VS create a new web site based on the tutorial version of the kit.
    3. Run the site so the local version's default page shows in a browser (w/ or w/o the debugger, it doesn't matter).
    4. Take careful note of the menu at the top of the page. In particular, measure its menu items (top tier). Despite the fact that some of the menu items use briefer text than others they all use the same width. Presumably this is not what you want. You would like it if the menu items occupied space proportional to their text length.
    5. Edit App_Themes\Basic\MainMaster.css.
    6. At line 123 you'll find these rules:
      .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
      {
          width: 7em;
          padding: 2px 0 2px 0;
      }
      .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
      {
          width:9em;
      }
    7. Change them to:
      .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
      {
          padding: 2px 5px 2px 0;
      }
      .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
      {
          padding: 2px 0 2px 0;
          width:9em;
      }
    8. Refresh the page in the browser. Observe that the main menu at the top of the page now uses proportional sizing.
    9. Return to the MainMaster.css and look a little further down. There is a comment about another thing you need to do in order to make the menu items be proportional. I don't recall now why I only went partway in this implementation in the kit. It's weird that I find that comment their but that I left the hardcoded LI width (re: the change I'm directing you to make above). It may have to do with the fact that once you make that change you'll discover small anomalies in the display of the submenus... but I think you can probably figure out how to tweak the CSS a bit more to get those problems to go away.

    Good luck. Like I said, this is a shove in the right direction. It's up to you to take it further!

    Saturday, July 28, 2007 11:54 AM