Navigation Bar Wrapping

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
11/13/2009 8:43:30 AM
superdave144
Gravatar
Total Posts 154
View Posts

Navigation Bar Wrapping

Does anyone have any suggestions on how to make this look better?  http://www.mealsnmore.com/recipes.aspx  In the navigation bar on the left side of the page when you expand a category the sub categories wrap because the names are too long.  Is there anyway to adjust the font size for this menu to make it all fit or does anyone have a better idea? 

Thanks,

Dave

11/13/2009 1:59:21 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Navigation Bar Wrapping

You wouldn't want to make the text too small and you wouldn't want to prevent wrapping the text so you may want to try moving the arrow from the <a> to the <li> and then setting the padding and margins accordingly. Try the code below.

div.AspNet-TreeView li a{
   padding-left: 0;
   text-decoration: none;
}

div.AspNet-TreeView li.AspNet-TreeView-Leaf {
   background: transparent url('go.gif') no-repeat scroll 6px 6px;
   margin-left: 20px;
   padding-left: 25px;
}

This will allow the text to wrap but it will appear indented so that the beginning of each line is lined up.

HTH,
Joe D.

11/13/2009 3:03:36 PM
superdave144
Gravatar
Total Posts 154
View Posts

Re: Navigation Bar Wrapping

It's getting there.  Have a look now.  LOL   I think it might work if I made the font a bit smaller.  Where can I change that?

11/13/2009 3:50:45 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Navigation Bar Wrapping

If you want to change the font-size, use div.AspNet-TreeView {font-size: 10px;}. The problem with setting the font-size to fix your issue is that you will inevitably end up with a recipe in the future that will cause the text to wrap.

Personally, I think you should keep the icon and allow the text to wrap using the code I gave you before. The menu looks very blurred now because there is so much text so close together without anything definitive to separate each item. If you don't want to use the icon, try changing the color of the border underneath each item.

li.AspNet-TreeView-Leaf, li.AspNet-TreeView-Root, li.AspNet-TreeView-Selected, li.AspNet-TreeView-Parent {
   border-bottom: 1px solid #C0C0C0;
}

HTH,
Joe D.

11/17/2009 11:38:22 AM
superdave144
Gravatar
Total Posts 154
View Posts

Re: Navigation Bar Wrapping

Do you think I would be better off just leaving it as is (the default of the skin)?

11/17/2009 11:57:47 AM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Navigation Bar Wrapping

Hi Dave,

I don't think you need to leave the default at all. I think you should adjust the CSS to make the longer name recipes wrap nicely. Modify the following selectors in the styletreeview.css file.

div.AspNet-TreeView li a{
   padding-left: 0;
   margin-left: 0;
   text-decoration: none;
}

div.AspNet-TreeView li.AspNet-TreeView-Leaf {
   background: transparent url('go.gif') no-repeat scroll 6px 6px;
   margin-left: 20px;
   padding-left: 25px;
}

You may have to play with the margins and padding a bit to make everything line up but you can achieve a very nice result without making the text too small and without "ugly" wrapping.

You may want to try using FireFox with the FireBug AddOn. It will allow you play with the CSS on the site live.

HTH,
Joe D.

11/17/2009 12:16:36 PM
superdave144
Gravatar
Total Posts 154
View Posts

Re: Navigation Bar Wrapping

The wrapping looks much better now!  The images are kinda messed up.  Did I mess up entering the code?

body { }
div.AspNet-TreeView {margin: 2px 0px 20px 0px;padding: 0;}
div.AspNet-TreeView ul { list-style: none; margin: 0px 0px 0px -20px; padding: 0;}
.AspNet-TreeView-Show { }
.AspNet-TreeView-Hide { display:none;}
div.AspNet-TreeView ul li
{padding: 3px 0 2px 0; }
div.AspNet-TreeView ul ul { margin: 2px 0 2px 10px;}
div.AspNet-TreeView ul li img
{border: none; vertical-align: middle; margin: 0 2px 0 0; }
div.AspNet-TreeView li a { margin-left: 0px; padding-left: 0px; text-decoration: none; background: url(go.gif) no-repeat 2px 1px;}
div.AspNet-TreeView li.AspNet-TreeView-Root {}
div.AspNet-TreeView li.AspNet-TreeView-Parent {}
div.AspNet-TreeView li.AspNet-TreeView-Leaf { background: transparent url('go.gif') no-repeat scroll 6px 6px; margin-left: 20px; padding-left: 25px; }
div.AspNet-TreeView .AspNet-TreeView-ClickableNonlink { cursor: pointer;}
div.AspNet-TreeView .AspNet-TreeView-Collapse
{background: url(collapse.gif) 0 0 no-repeat; width: 5px; margin-right: -5px;
  float:left; cursor: pointer; }
div.AspNet-TreeView .AspNet-TreeView-Expand
{background:  url(expand.gif) 0 0 no-repeat; width: 5px; margin-right: -5px;
 float:left; cursor: pointer; }
div.AspNet-TreeView a,
div.AspNet-TreeView a:visited,
div.AspNet-TreeView a:active,
div.AspNet-TreeView a:link {color: #4F82CB;}
div.AspNet-TreeView a:hover { color:#4EBF37;}
div.AspNet-TreeView .AspNet-TreeView-Selected a
{font-weight: bold !important;color: #4EBF37 !important;}
div.AspNet-TreeView .AspNet-TreeView-Selected ul a
{ font-weight: bold !important; color: #4F82CB !important;}
li.AspNet-TreeView-Leaf,
li.AspNet-TreeView-Root ,
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Parent
{display: block;list-style:none;font-weight: bold;color: #333;text-decoration:none; padding: 2px 5px 2px 10px;
 background: #f2f2f2;border-left: 5px solid #CCC;border-bottom: solid 1px white;border-top: solid 1px white;min-height: 18px; }
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Leaf:hover,
li.AspNet-TreeView-Root:hover ,
li.AspNet-TreeView-Selected:hover ,
li.AspNet-TreeView-Parent:hover{border-left: 5px solid #4EBF37;}
li.AspNet-TreeView-Root { margin: 0px 0px 0px 20px; }
li.AspNet-TreeView-ParentSelected ,
li.AspNet-TreeView-Selected ul li.AspNet-TreeView-ParentSelected
{ margin: 0px 0px 0px 0px; }
li.AspNet-TreeView-Leaf img,
li.AspNet-TreeView-Root img {display:none;}
li.AspNet-TreeView-Leaf a,
li.AspNet-TreeView-Root a ,
li.AspNet-TreeView-Selected a ,
li.AspNet-TreeView-Parent a
{padding: 0px 0px 0px 10px;color: #333;}

 

11/17/2009 12:28:33 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Navigation Bar Wrapping

Try this:

div.AspNet-TreeView {margin: 2px 0px 20px 0px;padding: 0;}
div.AspNet-TreeView ul { list-style: none; margin: 0px 0px 0px -20px; padding: 0;}
.AspNet-TreeView-Show { }
.AspNet-TreeView-Hide { display:none;}
div.AspNet-TreeView ul li
{padding: 3px 0 2px 0; }
div.AspNet-TreeView ul ul { margin: 2px 0 2px 10px;}
div.AspNet-TreeView ul li img
{border: none; vertical-align: middle; margin: 0 2px 0 0; }
div.AspNet-TreeView li a { margin-left: 0px; padding-left: 0px; text-decoration: none;}
div.AspNet-TreeView li.AspNet-TreeView-Root {}
div.AspNet-TreeView li.AspNet-TreeView-Parent {}
div.AspNet-TreeView li.AspNet-TreeView-Leaf { background: transparent url('go.gif') no-repeat scroll 6px 6px; margin-left: 20px; padding-left: 25px; }
div.AspNet-TreeView .AspNet-TreeView-ClickableNonlink { cursor: pointer;}
div.AspNet-TreeView .AspNet-TreeView-Collapse
{background: url('collapse.gif') 0 0 no-repeat; width: 5px; padding: 7px;
  float:left; cursor: pointer; }
div.AspNet-TreeView .AspNet-TreeView-Expand
{background:  url('expand.gif') 0 0 no-repeat; width: 5px; padding: 7px;
 float:left; cursor: pointer; }
div.AspNet-TreeView a,
div.AspNet-TreeView a:visited,
div.AspNet-TreeView a:active,
div.AspNet-TreeView a:link {color: #4F82CB;}
div.AspNet-TreeView a:hover { color:#4EBF37;}
div.AspNet-TreeView .AspNet-TreeView-Selected a
{font-weight: bold !important;color: #4EBF37 !important;}
div.AspNet-TreeView .AspNet-TreeView-Selected ul a
{ font-weight: bold !important; color: #4F82CB !important;}
li.AspNet-TreeView-Leaf,
li.AspNet-TreeView-Root ,
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Parent
{display: block;list-style:none;font-weight: bold;color: #333;text-decoration:none; padding: 2px 5px 2px 10px;
 background: #f2f2f2;border-left: 5px solid #CCC;border-bottom: solid 1px white;border-top: solid 1px white;min-height: 18px; }
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Leaf:hover,
li.AspNet-TreeView-Root:hover ,
li.AspNet-TreeView-Selected:hover ,
li.AspNet-TreeView-Parent:hover{border-left: 5px solid #4EBF37;}
li.AspNet-TreeView-Root { margin: 0px 0px 0px 20px; }
li.AspNet-TreeView-ParentSelected ,
li.AspNet-TreeView-Selected ul li.AspNet-TreeView-ParentSelected
{ margin: 0px 0px 0px 0px; }
li.AspNet-TreeView-Leaf img,
li.AspNet-TreeView-Root img {display:none;}
li.AspNet-TreeView-Leaf a,
li.AspNet-TreeView-Root a ,
li.AspNet-TreeView-Selected a ,
li.AspNet-TreeView-Parent a
{padding: 0px 0px 0px 10px;color: #333;}

 

You'll notice I removed the background from the div.AspNet-TreeView li a selector and adjusted the padding and margin on the div.AspNet-TreeView .AspNet-TreeView-Collapse and div.AspNet-TreeView .AspNet-TreeView-Expand selectors.

HTH,
Joe D.

11/17/2009 12:35:02 PM
superdave144
Gravatar
Total Posts 154
View Posts

Re: Navigation Bar Wrapping

I pasted that into the file.  Here is the new one. 

 

body { }
div.AspNet-TreeView {margin: 2px 0px 20px 0px;padding: 0;}
div.AspNet-TreeView ul { list-style: none; margin: 0px 0px 0px -20px; padding: 0;}
.AspNet-TreeView-Show { }
.AspNet-TreeView-Hide { display:none;}
div.AspNet-TreeView ul li
{padding: 3px 0 2px 0; }
div.AspNet-TreeView ul ul { margin: 2px 0 2px 10px;}
div.AspNet-TreeView ul li img
{border: none; vertical-align: middle; margin: 0 2px 0 0; }
div.AspNet-TreeView li a { margin-left: 0px; padding-left: 0px; text-decoration: none;}
div.AspNet-TreeView li.AspNet-TreeView-Root {}
div.AspNet-TreeView li.AspNet-TreeView-Parent {}
div.AspNet-TreeView li.AspNet-TreeView-Leaf { background: transparent url('go.gif') no-repeat scroll 6px 6px; margin-left: 20px; padding-left: 25px; }
div.AspNet-TreeView .AspNet-TreeView-ClickableNonlink { cursor: pointer;}
div.AspNet-TreeView .AspNet-TreeView-Collapse
{background: url('collapse.gif') 0 0 no-repeat; width: 5px; padding: 7px;
  float:left; cursor: pointer; }
div.AspNet-TreeView .AspNet-TreeView-Expand
{background:  url('expand.gif') 0 0 no-repeat; width: 5px; padding: 7px;
 float:left; cursor: pointer; }
div.AspNet-TreeView a,
div.AspNet-TreeView a:visited,
div.AspNet-TreeView a:active,
div.AspNet-TreeView a:link {color: #4F82CB;}
div.AspNet-TreeView a:hover { color:#4EBF37;}
div.AspNet-TreeView .AspNet-TreeView-Selected a
{font-weight: bold !important;color: #4EBF37 !important;}
div.AspNet-TreeView .AspNet-TreeView-Selected ul a
{ font-weight: bold !important; color: #4F82CB !important;}
li.AspNet-TreeView-Leaf,
li.AspNet-TreeView-Root ,
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Parent
{display: block;list-style:none;font-weight: bold;color: #333;text-decoration:none; padding: 2px 5px 2px 10px;
 background: #f2f2f2;border-left: 5px solid #CCC;border-bottom: solid 1px white;border-top: solid 1px white;min-height: 18px; }
li.AspNet-TreeView-Selected ,
li.AspNet-TreeView-Leaf:hover,
li.AspNet-TreeView-Root:hover ,
li.AspNet-TreeView-Selected:hover ,
li.AspNet-TreeView-Parent:hover{border-left: 5px solid #4EBF37;}
li.AspNet-TreeView-Root { margin: 0px 0px 0px 20px; }
li.AspNet-TreeView-ParentSelected ,
li.AspNet-TreeView-Selected ul li.AspNet-TreeView-ParentSelected
{ margin: 0px 0px 0px 0px; }
li.AspNet-TreeView-Leaf img,
li.AspNet-TreeView-Root img {display:none;}
li.AspNet-TreeView-Leaf a,
li.AspNet-TreeView-Root a ,
li.AspNet-TreeView-Selected a ,
li.AspNet-TreeView-Parent a
{padding: 0px 0px 0px 10px;color: #333;}

 

11/17/2009 12:52:48 PM
Joe Davis
Gravatar
Total Posts 2253
View Posts

Re: Navigation Bar Wrapping

Okay, I think if you change padding: 7px; to padding-left: 14px; in the .AspNet-TreeView-Expand and .AspNet-TreeView-Collapse selectors, everything will line up.

-Joe

11/17/2009 1:17:37 PM
superdave144
Gravatar
Total Posts 154
View Posts

Re: Navigation Bar Wrapping

Looks awesome!  What do you think?

You must sign in to post in the forums. This thread is closed to new posts.