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...
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...
<div mce_keep="true">Install the CSS Friendly adapter kit (VSI) if you haven't already.</div>
<div mce_keep="true">In VS create a new web site based on the tutorial version of the kit.</div>
<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>
<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>
<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>
<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>
<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>
<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!
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
Member
19 Points
1676 Posts
Re: Adjustable tabs in CSS Adapters Menu
Jul 28, 2007 11:03 AM|rfurdzik|LINK
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...
.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>
.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>
Good luck. Like I said, this is a shove in the right direction. It's up to you to take it further!
Groovybits.com