Solved

spry menu modification

Posted on 2011-03-24
26
303 Views
Last Modified: 2012-05-11
Please help me do the following:

http://nsitedesigns.com/nsitedesigns/miller/test2.html
http://nsitedesigns.com/nsitedesigns/miller/SpryAssets/SpryMenuBarHorizontal.css


1. Reduce amount of space tween main nav buttons (Home, Projects, Services, etc) so nave bar  fits on one line.

2.Have white background on drop downs remain over photo montage.  (This will be replaced with a flash photo gallery)
0
Comment
Question by:nsitedesigns
  • 15
  • 11
26 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209123
To change the spacing, you have to change the width of the li.  The relevant CSS line is line 29

ul.MenuBarHorizontal li

For the menu, you will need to add a z-index to the ul tag that is used to build the drop down and to the Flash or images.  Make sure the menu z-index is higher than the flash.  That will keep the menu on top of those when rendered.
0
 

Author Comment

by:nsitedesigns
ID: 35209496
I got the navigation to fit on one line by also adjusting the font size.  It is pretty small but I don't think I have any other option.  

I am unable to get the white background to appear over image.  Here is a screen shot.  I created a new rule on test2.html with a z-index.  Didn't work.  : (


img.flashplacement {
      z-index:100;}
      


nav.jpg
0
 

Author Comment

by:nsitedesigns
ID: 35209502
I outlined in red the entire area that should be in white.  It is putting half in white, the remainder shows the photo.
0
 

Author Comment

by:nsitedesigns
ID: 35209650
Is there a way to modify each nav button individually?  When I change the width, it is across the board.  Right now it is setting width based on longest item.  For instance, there is a huge gap between Home and Projects.


http://nsitedesigns.com/nsitedesigns/miller/test2.html
http://nsitedesigns.com/nsitedesigns/miller/SpryAssets/SpryMenuBarHorizontal.css
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209661
My bad, line 120 in the CSS for element ul.MenuBarHorizontal a.MenuBarItemSubmenu

You are using a background image...just edit the image so it extends the width that you need.
0
 

Author Comment

by:nsitedesigns
ID: 35209664
This is what I did prior to working with Spry for the drop downs.  It goofed everything up
http://nsitedesigns.com/nsitedesigns/miller/test.html

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209672
>> Right now it is setting width based on longest item.

No, it sets the width based on the width value in the CSS element from my first comment.  Change that width, and it will change for all items.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209692
>> Is there a way to modify each nav button individually?

Yes, you would have to create and assign a class to each li tag that represents a button.
0
 

Author Comment

by:nsitedesigns
ID: 35209723
I must have done something wrong.     I tried to create a class and it didn't work.  This is what I did for the home button.


ul.MenuBarHorizontal .homebutton a {
      width:3em;
      }



      <li><a  class="homebutton" href="#">Home</a></
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209741
a is not a block object, it won't take a width.  Hence my advice above to: "assign a class to each li tag that represents a button"
0
 

Author Comment

by:nsitedesigns
ID: 35209755
THe background image for the buttons is very tiny 4px x7px.  If I modify it, then I can't alter the width of each button.    
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209793
>> If I modify it, then I can't alter the width of each button.

Then remove it and set a plain white color background instead.
0
 

Author Comment

by:nsitedesigns
ID: 35209826
i will try that.  Got the menu spry from DW.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209837
Yeah, I know.  But the out-of-the-box code DW generates always needs to be edited so you need to know a fair amount of CSS to do it properly.
0
 

Author Comment

by:nsitedesigns
ID: 35209865
Not sure what I did but now when I mouse over buttons with 2 level drop downs the button color turns blue but the font color doesn't turn white.  This also happens on first level in the 2 level buttons.  Ugh - - hate this!
0
 

Author Comment

by:nsitedesigns
ID: 35209868
Buttons with problems are Project and Services.
0
 

Author Comment

by:nsitedesigns
ID: 35209904
Still struggling with modifying button width.  This is the change I made and I don't see any difference.  It is line 13 of css.  

ul.MenuBarHorizontal .homebutton a {
      width:5em;
      }

 This is the html
 <li><a  class="homebutton" href="#">Home</a></li>

Been working on this navigation for 7 hours now.  Losing patience fast
0
 

Author Comment

by:nsitedesigns
ID: 35209942
I took "width: auto"  off of ul.MenuBarHorizontal li.  That seems to help.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35209994
Get rid of the color attribute in ul.MenuBarHorizontal a.MenuBarItemSubmenu
0
 

Author Comment

by:nsitedesigns
ID: 35209995
Ok.  Had a full melt-down and now I feel better.  Got some tweak cooking and it is getting closer to what I want.  Still have a problem with Projects and Services buttons.

http://nsitedesigns.com/nsitedesigns/miller/test2.html
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35210000
If you attach a width to an a tag you also have to tell a to display: block
0
 

Author Comment

by:nsitedesigns
ID: 35210068
I added display:block and it did nothing.  Lines 13-17

ul.MenuBarHorizontal .homebutton a {
      width:25em;
      display:block; /*required when you give button width*/
      }


I removed color references and it did nothing.

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
      background-image: url(SpryMenuBarRight.gif);
      background-repeat: no-repeat;
      background-position: 95% 50%;
}
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 35210104
Works in Firefox.  I can only test what you upload, so I'm manually disabling the color attribute in the above example.

It might be easier for us both to focus on one issue per post.
test-for-nsite.png
0
 

Author Comment

by:nsitedesigns
ID: 35210281
one correction leads to another problem.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35210285
That's why they call it Cascading style sheets.
0
 

Author Closing Comment

by:nsitedesigns
ID: 35210294
lets start over.  i will award points for your work but it didn't fix the problem.  I will post new question.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now