Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Help with menu?Help with menu?
Previous
 
Next
New Post
10/28/2009 8:32 PM
 

Can someone help me with this?  I created a new skin with a really nice menu structure using the new DNN CSS menus, and it works great.   Then, I put that skin on a different portal and noticed some problems with it.  I know it isn't a browser issue because it happens with multiple browsers, even happens between different tabs within the same browser (one portal works, one doesn't).

This is what it looks like when it messes up:

Both the top and bottom entries are shifted to the left about 50 pixels, all the ones in the middle work fine.  I cannot find anything in the style sheets that would cause this, so I'm hoping someone might know what the culprit might be.

 

 
New Post
10/29/2009 7:02 AM
 

If you are trying to have a submenu with rounded corners, you are going to run into this issue.  What it looks like to me is that the menu item/page name is causing the menu to stretch wider that the width the menu container is actually set to.  You can try two things:  1) make sure the width of your submenu and the width of the background image is set to be wide enough to contain the longest page title on the site.  2) For this one you still need to set the submenu width, but then you can also set "white-space: normal" in your submenu's css so that the menu items can word wrap and hopefully keep the menu from expanding (if you have a page with an unusually long word in the title, you might still end up with problems). 

There is a third option so you don't have to worry about the length of page titles or the length of individual words in page titles:  don't use the rounded corner trick for dnn nav menu, it's not worth the hassles to maintain it anyway with having to keep track of page title limitations.

A fourth option is to buy a third party module like dnn360.net's navigation suite which would allow you to have complete control over the menu template and how it's put together.  You might find a solution already templated in a manner that actually allows for dynamically changing content and the expanding/contracting of the submenu from portal to portal while using a rounded corner style on the submenu. 

Personally, I just go with option 3 most of the time, option 4 when needed.


JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

New Post
10/29/2009 1:34 PM
 

Not sure how you did this , but you should be able to do this by splitting the background in 2 parts

the left part with the corner as BG for the icon and the rest with the right corner for the actual text part.

The second backgroud has to be aligned to the right, to make sure the corner is displayed correctly.

 
New Post
10/29/2009 11:01 PM
 

Thanks for the replies guys...  This is actually based off of the DNN template on Codeplex.  When working properly, it looks and works really-really nice.   It's just this strange problem I've had crop up. 

It isn't a word-wrap issue, as the background image is 150px wide and the menu is set for 160px.  As you see in the above picture, the Host Settings option isn't even close to the specified length, the second and third options are the specified width while the "first" and "last" items in the sub-menu are the ones acting up.

It occured to me after I posted this that I should have posted the CSS code also, so here is the part about the sub menus (and first/last).  Maybe you can see something I'm missing?

 

/* general submenu css */
.mainMenu .m                    {width: 160px; font-size: 11px; font-weight: bold; z-index: 1000; line-height: 2em;}
.mainMenu .hov, .mainMenu .bc   {background: url(images/menu_hov.png) repeat-x top left;}
.mainMenu .m .mi                {background-color: #242424;}
.mainMenu .m .icn               {padding-left: 5px;}
.mainMenu .m .mi .txt           {color: white; margin-right: 5px; white-space: nowrap;}  /* change * to .txt with latest webcontrols */
.mainMenu .m .sel, .mainMenu .m .bc {background: url(images/submenu_hov.png) repeat-x top left;}
.mainMenu .m .hov               {background: url(images/submenu_hov.png) repeat-x top left;}

/* glossy rounded corners */
.mainMenu .m .first             {background: url(images/submenu_top.png) no-repeat top right; height: 30px; width: 160px;}
.mainMenu .m .first .icn        {background: url(images/submenu_top.png) no-repeat top left;}                 /*needed to hide TR/TD image tiling*/
.mainMenu .m .first.hov         {background: url(images/submenu_top_hov.png) no-repeat top right; height: 30px; width: 160px;}
.mainMenu .m .first.hov .icn    {background: url(images/submenu_top_hov.png) no-repeat top left;}   /*needed to hide TR/TD image tiling*/

.mainMenu .m .first.last        {background: url(images/submenu_topbot.png) no-repeat top right; height: 32px; width: 160px;}
.mainMenu .m .first.last .icn   {background: url(images/submenu_topbot.png) no-repeat top left;}    /*needed to hide TR/TD image tiling*/
.mainMenu .m .first.last.hov    {background: url(images/submenu_topbot_hov.png) no-repeat top right; height: 32px; width: 160px;}
.mainMenu .m .first.last.hov .icn {background: url(images/submenu_topbot_hov.png) no-repeat top left;} /*needed to hide TR/TD image tiling*/

.mainMenu .m .last              {background: url(images/submenu_bot.png) no-repeat bottom right; height: 26px;}
.mainMenu .m .last .icn         {background: url(images/submenu_bot.png) no-repeat bottom left;}    /*needed to hide TR/TD image tiling*/
.mainMenu .m .last.hov          {background: url(images/submenu_bot_hov.png) no-repeat bottom right; height: 26px;}
.mainMenu .m .last.hov .icn     {background: url(images/submenu_bot_hov.png) no-repeat bottom left;} /*needed to hide TR/TD image tiling*/

 
New Post
10/31/2009 4:02 PM
 

I guess I would start by using Firefox's Firebug to drill down the css settings and make certain they are getting applied correctly.  Then from there, if they are applied correctly, I'd go back to the width issue.  Have you tried a setting wider than 160px?  If you try 170, does it actually make the menu wider?  It's still possible to have a menu item wider than 160 that will stretch things out?  Also, there is no width setting in your settings for .last, but that shouldn't matter since the image in your post is a .first item and the width is set there. 

I downloaded a copy of the source from codeplex quite some time ago, and "as is" it was in need of major modifications because it did not display properly in IE7 or IE8 at all.  I think I even had issues with Firefox.  The main thing was that is was adding all kinds of extra space between submenu items, the root menu had display issues with the "icon" only thing, etc.  And that was without editing a thing at all, just using the defaults in the skin.

With DNN 5x and DNN Nav, I use very different css that works out better, at least for me.  Anyway, the freebie is a great example and a great starting point for developing your own style of coding the menu css.  You probably just need to tweak things a bit to get them working properly and it may be more a matter of trial and error and making certain what you end up with is  cross-browser friendly.  I haven't created a menu with rounded corners, so I don't have a working example to give you.  I can tell you, though, that I set submenu width to 150px via the ".mainMenu .m" class setting such as you did and it works fine for keeping a minimum width on the submenu without having to add a width setting anywhere else in the submenu css.  Honestly, 160px should be plenty for the content you have.  Again, it may just be a matter of some minor tweak that will fix it.

Actually, I just looked at one of my dnn nav menus and I see that the "first" "last" and "firstlast" class is applied to the tr, so perhaps instead of setting the width to 160px at ".mainMenu .m .first", try setting it in ".mainMenu .first span.txt" or something with the ".txt" in it, and then perhaps even set a width for the icon at ".mainMenu .first .icn" to make sure the icon's area doesn't end up too wide.

If that doesn't work, keep tweaking with various versions/combos of the classes until it works for you.  I suspect you'll end up with something very different from the original, or at least behaves better in naughty browsers like IE.


JOHN GIESY
DotNetNuke Hosting Expert

DotNetNuke 7 Hosting $70 /year
DNN4Less.com Team DotNetNuke  

Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Help with menu?Help with menu?


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out