logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-17-2010, 09:08 AM   #1
Roly
 
Join Date: Feb 2010
Posts: 31
Question Spry submenu now left of page -I've committed a sin?

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

Thanks

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

Code:
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;

Last edited by Corrosive; 06-18-2010 at 09:16 AM.. Reason: wrapped code
Roly is offline   Reply With Quote
Old 06-17-2010, 11:45 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 06-18-2010, 09:16 AM   #3
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by DWcourse View Post
as God and Adobe intended
I thought Jobs and Adobe weren't on speaking terms any more...
Corrosive is offline   Reply With Quote
Old 06-18-2010, 01:50 PM   #4
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Quote:
Originally Posted by Corrosive View Post
I thought Jobs and Adobe weren't on speaking terms any more...
Well played sit!
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 06-18-2010, 04:27 PM   #5
Roly
 
Join Date: Feb 2010
Posts: 31
Default

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.

Code:
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)

Last edited by Corrosive; 06-19-2010 at 08:32 AM.. Reason: wrapped in code tags
Roly is offline   Reply With Quote
Old 06-18-2010, 05:09 PM   #6
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 06-19-2010, 08:33 AM   #7
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Roly; post code by all means but please use code tags. Thanks
Corrosive is offline   Reply With Quote
Old 06-19-2010, 08:45 AM   #8
Roly
 
Join Date: Feb 2010
Posts: 31
Default

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

Code:
@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;
 }
}

Last edited by Corrosive; 06-19-2010 at 08:51 AM.. Reason: wrapped in code tags
Roly is offline   Reply With Quote
Old 06-19-2010, 08:51 AM   #9
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by Corrosive View Post
Roly; post code by all means but please use code tags. Thanks
Second time of asking Roly, please wrap code in code tags!
Corrosive is offline   Reply With Quote
Old 06-19-2010, 12:19 PM   #10
Roly
 
Join Date: Feb 2010
Posts: 31
Default

Sorry Brigadier but I don't know what you mean?

roly
Roly is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:11 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com