I have cut and pasted old menubars that worked. I have downloaded Sry again and uploaded hundred menubar changes, but not much happens and I never get the submenus.
I am redesigning a webpage at www.vienergy.org (The Virgin island Energy Office)
My sample of the new design that I can't get to work can be reached by clicking on the BuIlding page at that site.
my email is dbuchanan@vienergy.org
I have spent many hours on this and would appreciate any help. I am sure it is something dumb that a nonprofessional like me does not see.
How to I get menubar to display...You may have left an extra SpryMenuBarHorizontal.css stylesheet in the root level of your site. That will give you difficulties.
Also, for heaven's sake, don't make the menus blink!:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
?display: block;
?cursor: pointer;
?background-color: #39617B;
?color: #000000;
text-decoration: blink;
?font: bold;
?border: thin solid #0000FF;
?padding-top: .4em;
?padding-right: 0.75em;
?padding-bottom: 0.4em;
?padding-left: 0.75em;
}
Really the best way to get your SpryMenuBar to work is to build it properly by Inserting it in Dreamweaver.
If you are redesigning a page in the midst of an active site, it seems as if you are apt to encounter difficulties due to the CSS that is already in use on the rest of the live site.?Can you isolate your files sufficiently so that you will be able to identify when your CSS is in need of fixing and when it is CSS that belongs to the rest of the site?
Beth
How to I get menubar to display...I guess I have gone around it all wrong. I was designing new pages and hoping to replace them on the active site one at a time. This seemed to be a good plan until I started running into problems with this one horizontal menubar.
The only menubar I can get to work is the one on the pages I want to replace.
By isolating the files to you mean creating a new folder for spry assets or defining a new site?
Thanks for your suggestions. I was going to experiment with the blinking text and then I ran into all these problems and forgot about it.
Don
I guess I have gone around it all wrong. I was designing new pages and hoping to replace them on the active site one at a time. This seemed to be a good plan until I started running into problems with this one horizontal menubar.
The only menubar I can get to work is the one on the pages I want to replace.
By isolating the files to you mean creating a new folder for spry assets or defining a new site?
Thanks for your suggestions. I was going to experiment with the blinking text and then I ran into all these problems and forgot about it.
Don
Well, you can have the pages in a folder on your primary site, but you will need to have your own SpryAssets folder within that...in other words, you're right...define a new site (make a new definition)...that points to the subfolder as your ''new'' root folder.
Better yet, it will live locally in a totally separate folder and in an isolated folder online, as well, but online it can be a subfolder (see above).
The problem with having the files intermingled as they are now is that when you change the CSS file, you affect the presently live pages as well as the new ones. You can copy the CSS stylesheet into your new folder; be sure that you link within the site after you move things.
When you FTP to your subfolder, make sure your definition is identical to your primary definition (FTP-wise) EXCEPT add the subfolder name in the ''Directory'' field on the definition dialog.
Beth
I did it all. Defined a new site. Tried to add new spry assets and delete all old ones. Thought maybe it was even my div container and killed it. Still I can't get the submenues to appear.
Everything else seems fine with the pages. The vertical bar is fine, but the horizontal just won't work.
I have just about run out of ideas.
Thanks for any other insights anyone might have.
don
Don, I found a few errors, but was not able to reconstruct the menu to the point of getting it to work. There is some other CSS overriding your SpryMenuBarHorizontal2.css file.
But, that said, I did try out some changes:
@charset ''UTF-8'';
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* 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: square;
?font-size: 100%;
?cursor: default;
?width: auto;
/*?float: none;?I don't think you want to unfloat your menubar (this style cascades to all elements of the menu)
?height: auto;
?list-style-position: inside;*/
}
/* 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;
?text-align: left;
?cursor: pointer;
?width: 122px;
?float: left;
}
/* 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: 8.2em;?/* this had been changed to 8.2px, which is mighty narrow for a ul */
?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: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
?position: absolute;
?margin: -5px 0 0 95px;
}
/* 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: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
?display: block;
?cursor: pointer;
?background-color: #39617B;
?color: #000000;
?font: bold;
?border: thin solid #0000FF;
?padding-top: 0.4em;
?padding-right: 0.75em;
?padding-bottom: 0.4em;
?padding-left: 0.75em;
}
/* 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: #666666;
?color: #FFF;
}
/* 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: #33C;
?color: #FFF;
}
/*******************************************************************************
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;
}
/* 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;
?f\loat: left;
?background: #FFF;
?}
}
Thanks Beth,
Rebuilding the page worked and it was not as difficult as I imagined it would be.
Don
You're welcome!
Beth
No comments:
Post a Comment