Adjustable tabs in CSS Adapters MenuRSS

• • Reply
  rfurdzik

  Member

  19 Points

  1676 Posts

  Adjustable tabs in CSS Adapters Menu

  Jul 24, 2007 06:06 PM|rfurdzik|LINK

  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

• • Reply
  rfurdzik

  Member

  19 Points

  1676 Posts

  Re: Adjustable tabs in CSS Adapters Menu

  Jul 28, 2007 11:03 AM|rfurdzik|LINK

   

  Please help.
• • Reply
  Russ Helfand

  Member

  290 Points

  741 Posts

  Re: Adjustable tabs in CSS Adapters Menu

  Jul 28, 2007 11:54 AM|Russ Helfand|LINK

  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. <div mce_keep="true">Install the CSS Friendly adapter kit (VSI) if you haven't already.</div>
  2. <div mce_keep="true">In VS create a new web site based on the tutorial version of the kit.</div>
  3. <div mce_keep="true">Run the site so the local version's default page shows in a browser (w/ or w/o the debugger, it doesn't matter).</div>
  4. <div mce_keep="true">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.</div>
  5. <div mce_keep="true">Edit App_Themes\Basic\MainMaster.css.</div>
  6. <div mce_keep="true">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;
     }</div>
  7. <div mce_keep="true">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;
     }</div>
  8. <div mce_keep="true">Refresh the page in the browser. Observe that the main menu at the top of the page now uses proportional sizing.</div>
  9. <div mce_keep="true">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.</div>

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

  Russ Helfand
  Groovybits.com