Help with a very simple horizontal Spry menu

Hi,
I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover. The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over. As I said, without the border it works perfect.
Any suggestions will be appreciated.

steve0308 wrote:
Hi,
I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover. The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over. As I said, without the border it works perfect.
Any suggestions will be appreciated.
You also have to apply the border to the 'a' css selector. If you just apply it to the 'a:hover' css selector then the tab will grow slightly bigger because its adding more width and height to the overall structure.

Similar Messages

HELP PLEASE!!! Horizontal Spry Menu

I'm having trouble with my horizontal spry menu. I have added
it and it looks great in Firefox. No problems at all, exactly how I
like it. But when previewed in Internet Explorer it doesn't show at
all. There's nothing. I've inserted the "mark of the web." Nothing.
I don't really know where I'm going wrong. I'm relatively new to
Dreamweaver and am using CS4. Can someone please help?

Thank you Beth,
That has helped me a great deal, there is still a slight problem though... while the menus are falling vertically now they are not inline with the menu buttons, (slightly to the right each time).
You suggested I upload the website to a server but I am not at this stage yet and I'm not sure how to do this either! I don't know if it's possible to help me without this? My code is still the same, the only difference now being that both ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li have stated widths as you suggested; 8em.
Maybe this will help show you the problem:
I know this is really bad quality I think you can see how the sub menu isn't directly underneath the heading (highlighted in blue). I want the sub heading to be inline with the 'About us' heading, do you know how to do this?
Thank very much for the help so far,
Kyra

Need help with something VERY SIMPLE

I'm brand new to Motion - as if today - but I'm only trying to do some VERY simple motions with photos - a simultaneous zoom in and reposition. What I've been doing is setting the starting key frame at one position (adjusting the x, y) and setting the scale. Then I create a second key frame and adjust the postion and scale. It will do the zoom, but then it re adjusts the starting position. If I readjust the starting key frame, it automatically readjusts the second key frame. I don't get it! Applying the various 'behaviors' doesn't seen to help. Certainly there's something obvious here that I'm missing - as I was able to do this in FCP. For some reason the key frames are not fixed when it comes to position.

hi,
a couple of thoughts?
did you actually set a keyframe for position at the first frame?
Also unless you are parked right on a keyframe or have the record button on, if you adjust a value, all the values for all keyframes adjust accordingly. I often mess something up because I wasnt parked on a keyframe.
hth
adam

Need help with a very simple example. Trying to reference a value

Im very new to Sql Load and have created this very simple example of what I need to do.
I just want to reference the ID column from one table to be inserted into another table as DEV_ID.
Below are my: 1) Control File, 2) Datafile, 3) Table Description, 4) Table Description
1) CONTROL FILE:
LOAD DATA
INFILE 'test.dat'
APPEND
INTO TABLE p_ports
FIELDS TERMINATED BY ',' OPTIONALLY ENCLOSED BY '"'
DEV_id REF(CONSTANT 'P_DEVICES',NAME),
NAME FILLER ,
PORT_NO
2) DATAFILE:
COMM881-0326ES09,6
3) TABLE DESCRIPTION:
SQL> describe p_ports
Name Null? Type
ID NOT NULL NUMBER(10)
DEV_ID NOT NULL NUMBER(10)
PORT_NO NUMBER(3)

hi,
i managed to do this for my app. (think i referred to viewTransitions sample code and modified quite a bit)
i can't remember this well cos i did this quite a while back, but i will try to help as much as possible
1) from the appdelegate i initialize a root controller (view controller class)
2) this root controller actually contains two other view controllers, let's call it viewAController and viewBController, for the screens which u are going to toggle in between. and there's also a function, let's call it toggleMenu, which will set the menus to and fro. i copied this whole chunk from the sample code. it actually defines the code on what to do, i.e. if current view is A switch to B and vice versa.
3) inside the controller files, you need to implement the toggleMenu function too, which basically calls the rootController's toggleMenu
4) we also need viewA and viewB files(view class)
5) need to add the .xib files for the respective views and link them up to the controller class. i did not use the .xib files for ui layout though, because of my app's needs. however, it will not work properly without the .xib files.
5) inside the view class of both views, i.e. viewA.m and viewB.m, you need to create a button, that will call the toggleMenu function inside the respective controller class.
it will look something like this:
[Button addTarget:ViewAController action:@selector(toggleMenu:) forControlEvents:UIControlEventTouchUpInside];
so the flow is really button (in view)-> toggleMenu(viewController) -> toggleMenu(rootController)
i'm sorry it sounds pretty hazy, i did this part weeks before and can't really remember. i hope it helps.

[New] Help with a VERY simple asterisk program.

Alright...I feel like a complete idiot asking this question..but I'm having such trouble writing this program. The program description is here:
Write a Java application using two for loops to produce the following pattern of asterisks.
I guess I'm really bad at algorithms yeah? Haha...well, any help would be very much appreciated.

Hi,
I don't think you don't need to look through any C programming books.
When you have a problem like this, do some thinking about what methods you need to use and what the general structure of the program will be.
You need to print asterisks out to the screen... so you'll need:
System.out.println
System.out.printAnd you already know that you need two loops.
Now you can ask yourself how you might use the print statements with two loops in order to design a basic structure for the program.
You have 8 lines, so you might want a loop that runs through 8 times, one of the lines printed each time.
Within this loop, you need another loop that prints out *'s. This loop could run once for each asterisk, but because there is a different number of asterisks on each line, the number of times this loop runs would be variable.
So a basic structure:
//loop1 that runs 8 times
    //loop2 that runs once for each *
        print one star
    //end loop2
//end loop1The key now is to recognise the difference between print and println. I don't know if you alread know, but System.out.print will print a string without creating a new line at the end, and println will create a new line at the end of the printed string.
Hope that helps. If you have any other problems, post specific questions along with the code you've written and are having trouble with.

Need Help with a very simple view transition scenario

Hello All,
I am trying to learn how view transitions work and I am having a very hard time with the sample apps (like transition view app etc)...I need something much more simple at first. Can you please provide me a little guidelines on how to set up this following scenario:
App loads up and shows a title screen with a button that says go. When you click on the go button the title screen fades out and a new view fades in (or slides in, or anything at all).
Right now I have 3 nib files. There is the main one that is called on application start (tied with MainViewController, a subclass of IUViewcontroller just like in the hello world app. After the app loads the app delegate object tells the MainViewController object to load in another view controller object (via addSubview) which is tied with the second nib file; my title screen with the button. When I press the button I was thinking in the IBAction function to tell the MainViewController object to remove (or transition out somehow) the title screen view controller object then add the other view (third nib file in). This is the part I can't get working. Am I on the right track or have a gone hideously astray? Thank you!

hi,
i managed to do this for my app. (think i referred to viewTransitions sample code and modified quite a bit)
i can't remember this well cos i did this quite a while back, but i will try to help as much as possible
1) from the appdelegate i initialize a root controller (view controller class)
2) this root controller actually contains two other view controllers, let's call it viewAController and viewBController, for the screens which u are going to toggle in between. and there's also a function, let's call it toggleMenu, which will set the menus to and fro. i copied this whole chunk from the sample code. it actually defines the code on what to do, i.e. if current view is A switch to B and vice versa.
3) inside the controller files, you need to implement the toggleMenu function too, which basically calls the rootController's toggleMenu
4) we also need viewA and viewB files(view class)
5) need to add the .xib files for the respective views and link them up to the controller class. i did not use the .xib files for ui layout though, because of my app's needs. however, it will not work properly without the .xib files.
5) inside the view class of both views, i.e. viewA.m and viewB.m, you need to create a button, that will call the toggleMenu function inside the respective controller class.
it will look something like this:
[Button addTarget:ViewAController action:@selector(toggleMenu:) forControlEvents:UIControlEventTouchUpInside];
so the flow is really button (in view)-> toggleMenu(viewController) -> toggleMenu(rootController)
i'm sorry it sounds pretty hazy, i did this part weeks before and can't really remember. i hope it helps.

Help with a VERY simple Automator script

i spent a few minuted trying to figure this out, but concluded it might be easier to simply ask in the forum how to do this.
I want to
1) open a terminal window
2) execute the following commands:
cd /Users/lenny/ventrilo/
lenny$ /Users/lenny/ventrilo/ventrilo_srv
thats it...
please help using very small works
ideally i would like this to be execute when i start up my computer. (i.e. a login script)

If you need the Terminal window to stay open, then you're looking at scripting Terminal. You can do this with Automator's run applescript action, or you can just use Script Editor (in Applications > AppleScript). Either way you will need to save the workflow/script as an application and drag it to your Login Items (in System Preferences > Accounts).
click here to open this script in your editor<pre style="font-family: 'Monaco', 'Courier New', Courier, monospace; overflow:auto; color: #222; background: #DDD; padding: 0.2em; font-size: 10px; width:400px">tell application "Terminal"
activate
set commands to "cd /Users/lenny/ventrilo/
/Users/lenny/ventrilo/ventrilo_srv"
do script commands in front window
end tell</pre>
PowerMac G5 (June 2004) 2x1.8GHz 1.25GB, PowerBook G4 (12-inch DVI) 1x1GHz 768MB Mac OS X (10.4.3)

Help with Forte: very simple question, please help!

I recently downloaded the community version of Forte (Sun One) but can't seem to get any new empty class programs to execute properly. I know something is probably not set up right, which is why I really need a little help to get started. Regardless of the code I try to execute, the output error is always:
"java.lang.NoClassDefFoundError: (name of program)
Exception in thread "main" "
Please let me know what I'm not doing right. I would really appreciate anybody's thoughts on this problem because I would love to get Forte working so I can start learning Java. Thanks for your input!

I would tell you that Forte is not a tool for the beginner. you should look at something simpler. Forte is a fully integrated development environment. I would look at a simple editor like emacs, available at gnu.org. The commands of this editor are quite difficult to get use to.
As for setting the class varialbe. It depends on the O/s that you are using. win98/me is different than NT/xp. Need to know one or the other before explaining.
email me if you have question. email address is in my profile.

Help with a very simple password field

The following question can be observed, and manipulated with
the following:
Source:
http://www.ucsdkya.com/kyaonly.fla
SWF:
http://www.ucsdkya.com/kyaonly.swf
I am using embedded fonts for this flash file, and it seems
that no matter what, it converts my text field to an HTML one. The
trace feature made it quite obvious! What can I do to remedy this,
while keeping it the same looking the same. Is there a cheap
workaround? Thanks!

Well, it hit me almost a few seconds after (go figure) that I
could just copy and past the entire trace message as the required
string for entry. Easy solution.

ERROR with Horizontal Spry Menu & IE 7 ONLY!

I created a new website with CS3 adding a horizontal Spry Menu across the top of the page. I am having a problem with this menu in Internet Explorer 7 ONLY! I don't have this problem with Firefox, Chrome or Safari. I wouldn't care so much but IE is the dominant browser. The site is: http://www.sunscapesolar.net. The problem is that when you mouse over any of the top-level menu titles that have sub-menus below like: PRODUCTS, SYSTEMS, INCENTIVES, etc., the body text shifts down and I get a white box popping up that says "false." I've checked everything I know but since DW created the javascript code, I don't know where to go. I have posted this problem three times and nobody has responded! Someone has to know what's wrong! Please help... I don't want to create the site from scratch. . .
Thanks in advance...
Mike

fixed it myself - please ignore

Level 2 Submenu problems - Horizontal Spry Menu

Okay, I have successfully implemented a horizontal spry menu. Most links don't have drop downs but there are some that has submenus. For example.
Main Link
   > Products
   > Services
          Service 1
          Service 2
          Service 3
etc
The 1st submenu works fine (i.e. the one that would show products and services) and the second level submenu links work okay as well (ie Service 1, 2 etc) BUT ONLY in Firefox, Safari and Chrome. I CANNOT for life nor money get the second submenu to work in ie8. It just doesn't show! I need help urgently!
The site is in design process so there isn't a URL yet. If it would be helpful, I could upload everything onto my server so the files can be viewed. Just let me know what is required.
Has anyone encountered anything like this before? All very weird...and needless to say...very annoying too.
Thanks in advance for any suggestions.
Ben

Update - it's a problem with opacity!
I wnated to have a submenu with 0.85 opacity. I had the following CSS in the file:
ul.MenuBarHorizontal ul
filter:alpha(opacity=85);
    -moz-opacity:0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;
This resulted in the second submenu disappearing in IE8...but it worked okay in all the other browsers.
Any idea for submenus with opacity in IE??
Ben

Horizontal spry menu style appears turned off when on the internet though can view it in live mode!?

The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
this is the coding above the head.
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</script>
I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu). Any help would be greatly appreciated!

thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
thanks again for your help.

Horizontal Spry Menu appears as bullet point list in IE8 and below - fine in firefox, chrome and IE9

This one is breaking my brain! I have an horizontal spry menu bar in my website that renders correctly in all browsers except ie 8 and below where it appears like an unordered list - almost like no CSS had been applied at all. You can check out the site here http://www.webhance.com.au. The spry css looks like this:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 130%;
cursor: default;
width: auto;
float:right;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 150px;
float: right;
text-align:center;
font-family:"AvantGarde Bk BT";
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 150px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 150px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border-right: 1px solid #9fe2fd;
text-align:center;
font-family:"AvantGarde Bk BT";
background-color:#4c859d;
color:#FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
border-right: 1px solid #9fe2fd;
display: block;
cursor: pointer;
background-color: #4c859d;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #4c859d;
color: #9cc9a0;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #4c859d;
color: #9cc9a0;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
float: left;
background: #FFF;
The HTML for the section looks like this:
<div class="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html" id=button1>Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
    <ul>
      <li><a href="design.html">Web Design</a>        </li>
      <li><a href="maintenance.html">Web Maintenance</a></li>
      <li><a href="social.html">Social Media</a></li>
    </ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a>    </li>
</ul>
</div>
I really really need some help - hope someone out there can point me in the right direction :-)
Julie

Hi Gramps - thanks for getting back to me - I took advantage of your advice to others with some other issues I had and they worked a charm so I was really hoping to hear from you :-)
Unfortunately removing media="only screen and (min-width: 769px) from the css call didn't resolve the problem. Check it out on my index page www.webhance.com.au/index.html Any other ideas?
Cheers, Julester

Horizontal Spry Menu Breaks in IE6

I have created an horizontal spry menu using the spry widget
in DreamWeaver CS3. I would like the width of each menu item to
adjust to the text (width: auto;) and that works fine in current
browsers (FireFox, IE7, Opera, Netscape) but in IE6 the menu items
are displayed vertically instead of horizontally. As soon as I give
them a width, it displays appropriately in IE6, but that changes
the look. You can see the page in question at
http://www.inachordwebdesign.com/ccc/test.html
Is there any way to work around this problem with the older
IE versions?
Any help would be greatly appreciated! Please let me know if
I need to upload any code. This is one of my first posts, so I'm
not sure what all I need to post.
Thanks!

I have updated the Spry Assets as suggested, but still have
the same results. Removing the float:left for the menu bar doesn't
help with the item alignment in IE6 and actually introduces a
problem in the current version of Firefox, so that isn't the
problem either.
Any other thoughts? The only thing that seems to force the
menu bar to display horizontally in IE is to have fixed widths for
the list items in the unordered list (ul.MenuBarHorizontal li). As
soon as I change that from a defined width to auto, or remove the
width designation altogether, it falls back to a vertical
arrangement in IE6, though it works in all the more recent browsers
just fine. We'd rally prefer to let the list items size
automatically, but if there is no way around it, I'll have to try
to replicate that effect by assigning a different width to each
item. That will add a lot of extra code, unfortunately.
Thanks.

Horizontal spry menu floats around differently in FF and IE

Hi there !!
I would like to ask you about the following:
When I use a horizontal spry menu and have it adjusted for FireFox, I get a result I can live with.
Except that the submenu's under the heading 'cultuur' and 'projekt' do not slide down altogether, but are horizontal as well...
How can I fix it so that they are positioned under its 'parent' ??
But that's my minor question, actually...
When I open my site in Internet Explorer (7 & 8) the spry menu looks different; it is far more stretched. First it also floated left, but I managed to fix that. The major problem is that the submenu's appear on the left of the page. I can't get them under their respective parents at all.
Can you please help me with that?
My site:
www.mnette.nl
(if you need more info, I'm glad to provide it )

When I use the original SpryMenuBarHorizontal.css, your page behaves extremely well. I realise that you wish to customise the menu to suit your site, but these modifications are to be made under strict rules so that the cross browser functionality is not compromised.
Have a look at the following 10 commandments http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
May I suggest that you ressurrect the original style sheet and work your way from there making sure that you keep to the above commandments.
If you still have problems, please come back here for further assistance.
Go Aussies and Hup Holland!
Ben

Help with a very simple horizontal Spry menu

Similar Messages

Maybe you are looking for