PDA

View Full Version : Spry submenu now left of page -I've committed a sin?


Roly
06-17-2010, 09:08 AM
Hello

I just wanted to edit my spry to add a new page and then the submenus jumped to the left and not under their respective headers. I tried finding the problem and now I can't change the positions. I think I've committed a cardinal sin!

Dreamweaver gave me a failure warning on the spry and now I can't change my CSS. I can't even change CSS for other styles. What Happened?

How can I redeem myself ? If I try and delete spry and insert a new spry the same setup applies, they move to the left. If I remove the SpryMenuBarHorizontal from Spryassets folder and insert a new menubar it goes really wierd in 'Design' but I see the menubar in 'Live view'.

What is the best course of action to redeem myself from the wrath of DW? to rebuild my horizontal spry before I really screw things up? Or to rebuild my master page from scratch? Can I fix it or has it gone to hell?

www.kingarchitecten.nl (http://www.kingarchitecten.nl)

Thanks

Roly ( spry is postioned right of page under a image)

ul.MenuBarHorizontal
{
width: auto
float: right
text-align: center
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;


ul.MenuBarActive
{
z-index: 1000

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 5em;
float: left;


ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 5;
top: 48;
position: absolute;
left: -1000em;


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: -1


ul.MenuBarHorizontal ul li
{
width: 5;


ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
{
width: -7
left: auto;
top: 0;

DWcourse
06-17-2010, 11:45 PM
I don't know everything you've done but you should change ul.MenuBarHorizontal ul.MenuBarSubmenuVisible back to left:auto; (as God and Adobe intended)

And ul.MenuBarHorizontal ul should have been left set to left:-1000em; rather than changed to -1000px.

That won't fix everything but it's a start.

Corrosive
06-18-2010, 09:16 AM
as God and Adobe intended I thought Jobs and Adobe weren't on speaking terms any more...

DWcourse
06-18-2010, 01:50 PM
I thought Jobs and Adobe weren't on speaking terms any more...

Well played sit!

Roly
06-18-2010, 04:27 PM
After restarting my computer leaving to to cool down I got CSS working again - very happy and was able to change the items around (which you mentioned above) and got the submenus in 'Design' below but when in browser they are above the spry, while they should be directly below. After this I solemnly promise to the almighty Adobe NOT to change CSS.

ul.MenuBarHorizontal
{
font-size: 11pt;
cursor: default;
font-family: Verdana;
color: #000;
text-align: center;
float: right;
list-style-type: none;
margin: 0;
width: auto;
padding-right: 5em;

ul.MenuBarActive
{
z-index: 1000;

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: pointer;
width: 5em;
float: left;
position: relative;
font-family: Verdana, Geneva, sans-serif;
text-align: left;
color: #FFF;

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 5em;
position: absolute;
left: -1000em;
top: 25px;

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;

ul.MenuBarHorizontal ul li
{
width: 6em;

ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0em;
width: 7px;

ul.MenuBarHorizontal ul
{
border: 1px solid #FFF;

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #FFF;

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #F00;

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-align: left;

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

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;

Thanks guys (maybe some twicking)

DWcourse
06-18-2010, 05:09 PM
I don't understand why you added the top: 25px; to the ul.MenuBarHorizontal ul rule. And there should be a section at the end of the style sheet labeled browser hacks that you seem to have deleted.

Corrosive
06-19-2010, 08:33 AM
Roly; post code by all means but please use code tags. Thanks :)

Roly
06-19-2010, 08:45 AM
Hi Guys

Yeah I added the top 25 so in DW the submenus in 'design' view came under my horizontal spry, but looking in the browser it make no difference. they were at the top.

I've copied the sprymenuhorizontal css completly this time, thanks for all your help.

Roly

www.kingarchitecten.nl (http://www.kingarchitecten.nl)

@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
{
font-size: 11pt;
cursor: default;
font-family: Verdana;
color: #000;
text-align: center;
float: right;
list-style-type: none;
margin: 0;
width: auto;
padding-right: 5em;
}
/* 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%;
cursor: pointer;
width: 5em;
float: left;
position: relative;
font-family: Verdana, Geneva, sans-serif;
text-align: left;
color: #FFF;
}
/* 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: 5em;
position: absolute;
left: -1000em;
top: 25px;
}
/* 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: 6em;
}
/* 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: 0em;
width: 7px;
}
/************************************************** *****************************
DESIGN INFORMATION: describes color scheme, borders, fonts
************************************************** *****************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #FFF;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
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: #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
{
color: #F00;

}
/************************************************** *****************************
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%;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-align: left;
}
/* 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;
f\loat: left;
background: #FFF;
}
}

Corrosive
06-19-2010, 08:51 AM
Roly; post code by all means but please use code tags. Thanks :)

Second time of asking Roly, please wrap code in code tags!

Roly
06-19-2010, 12:19 PM
Sorry Brigadier but I don't know what you mean?

roly

Corrosive
06-19-2010, 03:57 PM
When you create a post where you want to post code, click on 'Post Reply' so that you get the advanced text editor rather than using the 'Post Quick Reply' box. Then you should see a button at the top of the editor that has a hash # symbol on it. Click that and it will create an opening and closing 'CODE' tag. Paste your code between these tags and it will appear in your post as a scrolling box which is neater and makes it easier to read. Thanks :)

Roly
06-19-2010, 05:08 PM
@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
{
font-size: 11pt;
cursor: default;
font-family: Verdana;
color: #000;
text-align: center;
float: right;
list-style-type: none;
margin: 0;
width: auto;
padding-right: 5em;
}
/* 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%;
cursor: pointer;
width: 5em;
float: left;
position: relative;
font-family: Verdana, Geneva, sans-serif;
text-align: left;
color: #FFF;
}
/* 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: 5em;
position: absolute;
left: -1000em;
top: 25px;
}
/* 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: 6em;
}
/* 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: 0em;
width: 7px;
}
/************************************************** *****************************
DESIGN INFORMATION: describes color scheme, borders, fonts
************************************************** *****************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #FFF;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
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: #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
{
color: #F00;

}
/************************************************** *****************************
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%;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-align: left;
}
/* 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;
f\loat: left;
background: #FFF;
}
}

Corrosive
06-19-2010, 05:12 PM
Sorry, don't use Spry...spend all my time moaning about code tags ;)

I'm sure someone will have the answer for you.

Thanks for wrapping my friend :)

Roly
06-19-2010, 05:24 PM
Thankyou for your time and patience !

Roly

Roly
06-21-2010, 02:54 PM
Can anyone there help me please?