Spry Menu background images? Help, please!
I am trying to create a horizontal model with a spry menu bar, and I don't like the form of the standard box, so I thought I'd use a background image to display a rounded rectangle gradient in CSS for the outermost container (ul. MenuBarHorizontal) and then a regular rectangle degraded (that it either with or without an abderhamanez depends on the existence of the submenus or not) in the CSS li (ul. MenuBarHorizontal li) but to my great regret, I can't have the rounded rectangle is displayed. Someone at - it suggestions?So, how I ended up solving this problem is I have created new classes for the different menus and was able to assign different background for new classes pictures.
Tags: Dreamweaver
Similar Questions
-
With Spry menu bars necessary help please?
Hi all
I'm new on this forum, so please forgive any errors!
My problem is the following:
I created a site with 10 pages in DW and created a horizontal Spry menu drop-down that it contains. I created all links on all pages, and everything works fine. However - Here is my question - if I want to add another page of my site (which in fact 11 pages) is there a way to create just on one page (say index.html) and then automatically update the other 9 pages with this new page - or do I have to open all the pages to add my new page manually?
Please help me if you can.
A big thank you and best regards
Mark
Hello
If you ask an "update" of your spry menu here a tip for you: you can apply to the "server-side includes" for this. David_Powers created a quick tutorial (for me). You will find it here: http://foundationphp.com/tutorials/sprymenu/ssi.php.
Hans G.
-
Menu background image disappears in 30 sec
Hi again
. Here's another problem, I constantly met and I cannot solve.
When I use for my projects of menus ready when I play the DVD menus play ok but after 30 seconds the menu background image
disappears-> background turns completely black and only the menu keys remain visible.
What is the reason for this?
In the Menu-> submenu movement I put "looping" to "forever", but leave the value of 'point loop' as it is for example '0'.
I do not run into the same problem when I do the menus from scratch using PSD files. It tells me that the problem's root in the ready-to-use and some of their settings menus.
Thank you
Igor,
What you are most likely seeing is active movement (video in this case) ending before the other (Audio in this case) did.
Now, there are two choices:
1.) keep you video PrPro and spread it (duplication of the Instance of it) until it fits your Audio
2.) take your Audio in PrPro, or Audition, Soundbooth or another audio-editor and shorten so that it matches your video.
Whatever way you go, make sure that the Audio does not exceed the duration of the video. I stopped it's slightly shorter than the video.
Good luck
Hunt
PS - one consideration is that most users probably will not sit through an Audio track of 4 min before pushing a button, unless it's a devil of a song.
-
My spry menu disappeared. Help!
I had my spry menu all planned except for she was not quite long enough. He went doing the width correct, transparent. I see the Properties menu on the elements and in the code and the blue box is here. I can't see the menu itself in Dreamweaver or online. I can't figure out what I changed that does this.
UL. MenuBarHorizontal
{
list-style-type: none;
cursor: default;
Width: 890
`;
text-align: center;
float: left;
z-index: 1000;
Width: 878px;
Clear: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
Clip: rect (auto 0px auto, 0px);
margin: 0px;
position: relative;
height: inherit;
left: 147px;
Top: 0px;
right: 0px;
Bottom: 0px;
}
/ * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */
UL. MenuBarActive
{
z-index: 1000;
text-align: left;
float: none;
Width: auto;
Clear: right;
height: auto;
}
/ * Menu item containers, position of children relative to this container and are a fixed width * /.
UL. MenuBarHorizontal li
{
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 105%;
text-align: center;
cursor: pointer;
do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
z-index: auto;
make-weight: normal;
white-space: normal;
display: block;
Width: auto;
height: auto;
float: left;
position: absolute;
left: 315px;
top:-310px;
}
/ * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
UL. MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
z index: 1020;
cursor: default;
Width: auto;
left:-1000em;
text-align: left;
float: none;
Clear: right;
position: relative;
height: auto;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
{
text-align: left;
left: auto;
Width: auto;
Clear: right;
float: none;
position: relative;
}
/ * Container of menu items are same fixed width parent * /.
UL. MenuBarHorizontal ul li
{
Width: auto;
float: none
! important;
;
display: block;
white-space: nowrap;
text-align: left;
Clear: right;
}
/ * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
UL. MenuBarHorizontal ul ul
{
text-align: left;
Width: auto;
margin-top:-5%;
right margin: 0;
margin-bottom: 0;
margin left: 95%;
Clear: right;
float: none;
position: relative;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
{
left: auto;
top: auto;
text-align: left;
right: auto;
bottom: auto;
height: auto;
Width: auto;
float: none;
Clear: right;
}/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
text-align: center;
Width: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
float: none;
Padding: 0em;
Clear: right;
position: relative;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: default;
background-color: #102842;
text-decoration: none;
text-align: left;
border: inset thin #FFF.
color: #FFF;
letter-spacing: normal;
Word-spacing: normal;
Width: auto;
list-style-type: none;
margin: auto;
float: none;
padding-top: 0.25em;
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.25em;
do-family: "Trebuchet MS", Arial, Helvetica, without-serif, Biondi;
do-size: 100%;
Clear: right;
position: relative;
}
/ Components menu that have mouse over or focus have a blue background and white text * /.
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-color: #FFF;
color: #102842;
text-align: center;
padding: 0px;
Width: auto;
float: none;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #FFF;
color: #0D8C17;
padding: 0px;
text-align: left;
margin: auto;
Width: auto;
}/*******************************************************************************
Submenu INDICATION: styles if there is a submenu in a given category
*******************************************************************************/
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal a.MenuBarItemSubmenu
{
text-align: left;
margin: auto;
Width: auto;
Padding: 0.5em;
float: none;
Clear: right;
position: relative;}
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 50 95%;
background-color: #102842;
text-align: left;
Width: auto;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
UL. MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: none;
text-align: left;
position: relative;
Width: auto;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
UL. MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 50 95%;
background-color: #FFF;
text-align: left;
position: relative;
}/*******************************************************************************
BROWSER HACKS: hacks below should not be changed, unless you are an expert
*******************************************************************************/
/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
UL. MenuBarHorizontal iframe
{
z index: 1010;
Filter:alpha(opacity:0.1);
text-align: left;
position: relative;
}
/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
@media screen, projection
{
UL. MenuBarHorizontal li. MenuBarItemIE
{
display: block;
f\loat: left;
Background: #FFF;
text-align: left;
position: relative;
Width: auto;
}
}< ul class = "MenuBarHorizontal" id = "MenuBar1" >
< li > < a href = "#" > HOME < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > ABOUT US < /a >
< ul >
< li > < a href = "#" > join < /a > < /li >
< li > < a href = "#" > photo library < /a > < /li >
< li > < a href = "#" > contact us < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > NEWS < /a >
< ul >
< li > < a href = "#" > events < /a > < /li >
< li > < a href = "#" > photo library < /a > < /li >
< li > < a href = "#" > jobs < /a > < /li >
< li > < a href = "#" > Hot Deals < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMUNITY
< ul >
< li > < a href = "#" > Scott Air Force Base < /a > < /li >
< li > < a href = "#" > city of O'Fallon < /a > < /li >
< li > < a href = "#" > welcome Guide O'Fallon < /a > < /li >
< li > < a href = "#" > neighborhood restaurants Guide O'Fallon - Shiloh < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Shiloh
< ul >
< li > < a href = "#" > Village of Shiloh < /a > < /li >
< li > < a href = "#" > Village Services Guide < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > events & amp; Home Planning Guide < /a > < /li >
< li > < a href = "#" > relocation package Info < /a > < /li >
< li > < a href = "#" > Tourism Office Illinois South < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > COMMITTEES
< ul >
< li > < a href = "#" > Board of Directors < /a > < /li >
< li > < a href = "#" > ambassadors < /a > < /li >
< li > < a href = "#" > investors Star < /a > < /li >
< li > < a href = "#" > MSN < /a > < /li > Member Directory
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > CONTACT US < /a >
< ul >
< li > < a href = "#" > Login Member < /a > < /li >
< li > < a href = "#" > MSN < /a > < /li > Member Directory
< li > < a href = "#" > relocation package Info < /a > < /li >
< li > < a href = "#" > Community Business Info < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > EVENTS < /a >
< ul >
< li > < a href = "#" > News < /a > < /li >
< li > < a href = "#" > calendar < /a > < /li >
< li > < a href = "#" > photo library < /a > < /li >
< li > < a href = "#" > Hot Deals < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > JOIN < /a >
< ul >
< li > < a href = "#" > MSN < /a > < /li > Member Directory
< li > < a href = "#" > join < /a > < /li >
< li > < a href = "#" > Hot Deals < /a > < /li >
< li > < a href = "#" > Login Member < /a > < /li >
< li > < a href = "#" > Community Business Info < /a >
< br / >
< /li >
< /ul >
< /li >
< /ul >I added the following to the document (after the link to the sections)
and he was able to see the menu bar.
However, while browsing through the stylesheet, I noticed that he had been ill-treated unrecognizable. In this regard, I would recommend starting with a blank style sheet and by changing only the colors and sizes of font style rules existing. Do not add new rules, do not delete the existing rules.
See how you go and return report problems.
-
Two bars separate spry menu. Need help!
Well, I've looked everywhere and I e hepatitis found nothing more than vague answers to this problem. It is difficult to compare my problem with what other people have met. I have read several posts on this same question in this forum, but received no useful information. ....
Here's what I need, and it makes me ABSOLUTELY crazy! I want to have more of a bar from spry menus on one page, but being controlled by two DIFFERENT style sheets. For example: I currently two bars of menus, but they are both connected together, so what ever I have to one of them, sometimes both. I want to be able to control them separately. I can't, for the life of me, find a way to separate the two.
I did not have this upward on a server at the moment, so I can't provide a link for you to watch. But here's what I have in the code.
< html >
< head >
< style type = "text/css" >
{body
background - image: URL(Graphics/background.jpg);
background-repeat: repeat-x;
font size: 24 PX.
Police: Arial, Helvetica, without serif.
}
{scrolling text
color: #FFF;
text-align: center;
do-family: Arial, Helvetica, without serif.
}
< / style >
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryMenuBarHorizontal2.css" rel = "stylesheet" type = "text/css" > < < < < < this is one famous instance of the file CSS. "< / head >
< body >< h > < marquee >
< p > Brauer Productions announces the launch of iMediaFilms! < /p >
< / marquee >< table width = "100%" border = "0" cellpadding = "0" cellspacing = "0" >
< b >
< td style = "background - image: url(graphics/imediaTitle.png);" background-position: right; background-repeat: repeat no.; width = "40%" height = "177" > < p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< hr color = "d69d00" >
< table >
< td style = "background - image: url(Images/actors.gif);" background-position: left, top; background-repeat: no - repeat; "width ="60% "> < p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< hr color = "d69d00" >
< table >
< /tr >
< /table >< table width = "100%" >
< b >
(< td = style="background-image:url(graphics/navigation%20bar.gif height)"74. " background-repeat: repeat-x; background-position: bottom; text-align: center; "valign ="bottom">
< table width = "100%" border = "1" cellpadding = "0" >
< tr align = "center" valign = "middle" >
< td width = "43%" height = "68" > < ul id = "topNav1" class = "MenuBarHorizontal" > < < < < first menu with a unique ID
< li > < a href = "#" > home < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > about us
< ul >
< li > < a href = "#" > < /a > < /li > President's Message
< li > < a href = "#" > Brauer Productions < /a > < /li >
< li > < a href = "#" > team production < /a > < /li >
< li > < a href = "#" > brief history < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > contact us < /a > < /li >
< /ul >
< table >
< td width = "14%" >
< img src = "graphics/middleReel.png" width = "121" height = "66" > < table > "
< td width = "43%" > < ul id = "topNav2" class = "MenuBarHorizontal" > < < < < second menu with another unique identification number
< li > < a class = "MenuBarItemSubmenu" href = "#" > < /a > investors
< ul >
< li > < a href = "#" > 1.1 < /a > < /li >
< li > < a href = "#" > 1.2 < /a > < /li >
< li > < a href = "#" > question 1.3 < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > Corporate Alliances < /a > < /li >
< li > < a class = "MenuBarItemSubmenu" href = "#" > Giv < /a >
< ul >
< li > < a class = "MenuBarItemSubmenu" href = "#" > point 3.1 < /a >
< ul >
< li > < a href = "#" > section 3.1.1 < /a > < /li >
< li > < a href = "#" > 3.1.2 < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > point 3.2 < /a > < /li >
< li > < a href = "#" > point 3.3 < /a > < /li >
< /ul >
< /li >
< /ul >
< table >
< /tr >
< /table >
< table >
< /tr >
< /table >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("topNav1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
var MenuBar2 = new Spry.Widget.MenuBar ("topNav2", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
< /script >
< / body >< / html >
You call twice the same CSS. Currently, it looks like this:
However, the other must be:
And then make sure your SpryMenuBarHorizontal2.css file to change all that:
UL. MenuBarHorizontal
To do this:
UL. MenuBarHorizontal2
Who should fix everything.
Nick
-
Hi all, need a bit of help with an image of background, tried everything one can think (which is not much, it's the first time I tried doinga Web page) but I can't get my background image to display, I'll put the code I use below.
HTML
< body >
< div id = "container" >
< div id = "banner" > < img src = "Images/features" width = "800" height = "121" alt = "Photography oneshotmas" / > < / div > "
< div id = "image" > < / div >
< div id = "left column" > happy for "left column" id goes here < / div >
< div id = 'center column' > happy for "middle column" id goes here < / div >
< div id = "right column" > Content for id "right column" goes here < / div >
< / div >
< / body >
< / html >
CSS
#container {}
Width: 968px;
Background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#main image {}
background-image: url (.. / Images/background.jpg);
background-repeat: no-repeat;
position: relative;
height: auto;
Width: auto;
DRM for any help
Nick
NJP87 wrote:
Nothing
OK OK set a height on the
. Theneeds a height so that it can display the image.{#mainimage}
background-image: url (.. / Images/background.jpg);
background-repeat: no-repeat;
height: 100px;
}
-
I have a horizontal menu that is #001143 and has a white default background for the spry menu. I have looked through the CSS horizontal menu for the difficulty, but cannot locate. I need to add a property to the existing CSS menu?
Take a look at the nav menu to see what I mean.
http://www.NLF.com/learn.NET/HTML/about.htmlich_kann_schnell_laufen wrote:
> I thought that too. See below. I thought that it would be in the spry style sheets.
>
>bgcolor requires # as part of the value to display properly. At least for Firefox 3. IE seems to show ok for me.
--
Danilo Micen
| http://blog.Extensioneering.com/
| Extensioneer WebAssist
| Adobe Community Expert -
I'm fairly new to PS and have only previously used for things removed as red-eye and slightly increase the photos, but I'm working on a company logo that needs to be looking good unfortunaly it is all a complex design, I need of seem to float when I put it on the website at the moment It is in a white box.
So far, I removed the background with the Eraser tool. However when I save it and upload the image on the website that he still has the white box around it, could someone please help me and tell me what I'm missing the only bit of background, I want to keep is inside the heart, I've been banging my head against a wall for days with this?
I had a similar problem with my logo. Try to convert your logo in PNG format. That should do the trick.
-
Impossible to select one of the layers in my menu accordion. Help, please!
It's super confusing to me and I don't understand why it's happening. Basically, I am building my portfolio page (I'm a video editor) and I decided to use an accordion for the different types of videos I have. The layer 'Interviews & documentaries' is now totally inactive. I can not select and open it as I do with the other layers. However, when I go to preview mode it works fine. In preview mode, I can open it and see everything inside. But I can't do anything for it in Design view. Anyone have any idea why this is happening?
Hello
Most likely, it is locked. Open the page in Design view and go to the object and click on 'unlock all on Page'
If the 'Interviews & documentaries' was locked this command will unlock and you will be able to select it.
Please let me know if this does not help.
Kind regards
Vivek
-
Css Spry menu bar is not compatible with IE7? or compatibility view in IE8?
Well I did my site
. Swimmerbuddy.com
Problem: I used the bar of menus spry on a div tag I've got it works very well on several browser and so on... but hmm. I noticed that IE7 and only on compatibility view the IE8 does not work...
It seems that in the drop down menus covered by the main content underneath...
I started DWT, that I made myself. It's the TPL and css than controll the TPL and the spry menu bar.
PLEASE HELP ME... Thank you
IT'S THE TPL PAGE RUNS AWAY
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
"< html xmlns ="http://www.w3.org/1999/xhtml">".
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<!-TemplateBeginEditable name = "doctitle"-->
< title > Untitled Document < /title >
<! - TemplateEndEditable - >
"" < link href = "... / CSS/main.css ' rel ="stylesheet"type =" text/css"/ >
<!-TemplateBeginEditable name = "head"->
<! - TemplateEndEditable - >
< style type = "text/css" >
a: link {}
Color: #000;
text-decoration: none;
}
< / style >
"" < script src = "... / SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script >
"" < link href = "... / SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / >
< style type = "text/css" >
a: visited {}
Color: #000;
text-decoration: none;
}
a: hover {}
text-decoration: none;
Color: #000;
}
a: active {}
text-decoration: none;
}
< / style >
< / head >< body >
< div id = 'wrapper' >
< div id = "header" >
"" "< div id ="networkicons"> < a href ="http://www.facebook.com/?ref=logo#! profile.php? id = 100001554936595"target ="_blank"" > < img src = ""... / _images/facebook.png "alt =" facebook.com "width ="45"height ="45"border ="0"title ="facebook.com"/ > < /a > < a href ="http://www.myspace.com/swimmerbuddy"TARGET ="_blank"" > < img src = ".." "" / _images/myspace.png "alt =" myspace.com"width ="44"height ="45"border ="0"title ="myspace.com"" / > < /a > < a href = "http://twitter.com/swimmerbuddy" TARGET = "_blank" > < img src = ".. "" / _images/twitter.png "alt =" twitter.com"width ="43"height ="45"border ="0"title ="twitter.com"" / > < /a > < a href = "http://www.youtube.com/swimmerbuddy1" TARGET = "_blank" > < img src = ".. "/ _images/youtube.png" alt = "youtube.com" width = "44" height = "45" border = "0" title = "youtube.com" / > < /a > < / div > "
< div id = "buyNow1" >
"" < p > < a href = "... / order_now.html" > < img src = "... / buynowbutton.png" alt = "bt1" width = "130" height = "25" border = "0" longdesc = "Order your Buddy swimmer today!" / > < /a > < /p >
< / div >
< / div >
< div id = 'mainNav' >
< ul id = "mainNavcontent" class = "MenuBarHorizontal" >
"< li > < a href ="... / index.htm "> home < /a > < /li >"
"< li > < a href ="... / swimmer.html "> boyfriend swimmer < /a > < /li >"
"< li > < a href ="... / order_now.html "> order now < /a > < /li >"
< li > < a href = "#" class = "MenuBarItemSubmenu" > Gallery < /a >
< ul >
"< li > < a href ="... / photo_gallery.html "> Photos < /a > < /li >"
"< li > < a href ="... / video_gallery.html "> videos < /a > < /li >"
< /ul >
< /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > Products Zinger < /a >
< ul >
"< li > < a href ="http://www.winkyscoop.com/ "> Winky Scoop < /a > < /li >"
"< li > < a href ="http://www.1800succeed.com/ "> Hypmovation < / a > < /li>"
"< li > < a href ="http://www.1800succeed.org/ "> 1800SUCCEED < / a > < /li>"
"< li > < a href ="http://www.zingerproducts.com "> Zinger store < /a > < /li >"
< /ul >
< /li >
"< li > < a href ="... / about.html "> about us < /a > < /li >"
"< li > < a href ="... / contact.html "> contact us < /a > < /li >"
< /ul >
< / div >
<!-TemplateBeginEditable name = "mainContent"->
< div id = "pageInfo" >
< div id = "info_page" >
< class p = "regionID" > region ID < /p >
< hr class = "breaklinePageInfo" / >
< class p 'breadcrum' = > & gt; "< a href ="... / index.htm "> Breadcrum < /a > < /p >"
< / div >
< div id = "mainContent" >
< div id = "content" >
< p > main content goes its < /p >
< / div >
< / div >
< / div >
<! - TemplateEndEditable - >
<!-TemplateBeginEditable name = "buynow2"->
"" < div id = "buyNow2" > < a href = "... / order_now.html" > < img src = "... / buynowbutton.png" width = "130" height = "25" / > < / has > < / div >
<! - TemplateEndEditable - >
< div id = "footer" >
< div id = "footertext" >
< class p = "footertextclass" > Copyright © 2010 SwimmerBuddy.com. All rights reserved. "SwimmerBuddy.com part of < a href ="http://www.zingerproducts.com"class ="footertextclass"> Products Zinger < /a >." Designated brands and trademarks are the property of their respective owners. This page was last updated on September 28,2010. Swimmer Buddy - Pattent pending 2010 < /p >
< / div >
< div id = "footerlinks" >
"" < p classs = "footerlinkspacing" > < span class = "footerlinkspacing" > < a href = "... / Disclaimer.html" "> WARNING < /a > < a href ="... / terms.html "> terms of Service < /a > < a href ="... / contact.html "> contact us < /a > < / span >"
< / div >
< / div >
< / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("mainNavcontent", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
< /script >
< / body >
< / html >
IT'S THE MAIN. CSS@charset "utf-8";
{#networkicons}
height: 50px;
Width: 200px;
top of the margin: 160px;
margin left: 15px;
position: absolute;
}{#wrapper}
Width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
left margin: auto;
text-align: left;
position: relative;
}
{#mainNav}
text-align: center;
position: relative;
margin-right: auto;
left margin: auto;
Width: 934px;
padding-bottom: 15px;
Clear: both;
overflow: visible;
}
{#navwrapper}
Width: 935px;
margin-right: auto;
left margin: auto;
}#mainContent {}
Width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
}
#content {}
Width: 910px;
position: relative;
}
#wrapper #footer #footerlinks p .footerlinkspacing a {}
right margin: 20px;
}#footer {}
Width: 930px;
background-color: #fff;
position: relative;
top of the margin: 5px;
text-align: center;
Color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
}
#header {}
Width: 930px;
height: 209px;
background-image: url (.. / _images/header.jpg);
background-repeat: no-repeat;
}
{#buyNow1}
height: 25px;
Width: 140px;
float: right;
do-family: Arial, Helvetica, without serif.
make-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
}
{.buyNow1}
color: #666;
}
#wrapper #pageInfo #info_page .breadcrum {}
color: #003;
}
#wrapper #pageInfo #info_page .breadcrum a {}
color: #003;
}
HTML, body {}
margin: 0px;
padding: 0px;
}
{#buyNow2}
height: 25px;
Width: 130px;
float: right;
do-family: Arial, Helvetica, without serif.
make-weight: bold;
text-align: center;
padding: 5px;
position: relative;
}
#wrapper #buyNow2 a {img
position: absolute;
top:-30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}{#pageInfo}
Width: 930px;
background-image: url (.. / _images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color: #FFF;
text-align: left;
padding-bottom: 15px;
top of the margin: 18px;
position: relative;
overflow: visible;
visibility: visible;
}
#wrapper #mainNav #mainNavcontent {}
position: absolute;
left: 0px;
Width: 930px;
}
{.regionID}
do-size: 2em;
make-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
}
{.breaklinePageInfo}
top of the margin: 0.5em.
color: #FAFEAB;
}
{.breadcrum}
color: #003;
font size: 1.1em;
make-weight: bold;
text-decoration: underline;
margin-top :-0 .2em;
margin left: 15px;
}
{#breadcrum}
make-weight: bold;
color: #003;
}{#footertext}
Width: 910px;
font size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
}
{#footerlinks}
Width: 930px;
font size: 0.7em;
make-weight: bold;
do-family: "Lucida Sans Unicode", "Lucida Grande", without serif.
Color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
}
{.footertextclass}
Color: #000;
}
{.footerlinkspacing}
margin-top :-0 .5em;
color: black;
height: 10px;
make-style: normal;
line-height: normal;
do-variant: normal;
letter-spacing: normal;
}
{p}
margin: 0px;
padding: 0px;
}{body
text-align: center;
top of the margin: 5px;
background-color: #073e78;
background-image: url (.. / _images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
do-size: 100%;
}IT's THE list drop-down menu.css
@charset "UTF-8";
/ * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
The AVAILABLE INFORMATION: Describes the box model, positioning, the order
*******************************************************************************/
/ * The outermost container for the menu bar, an area of width auto without margin or padding * /.
UL. MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
cursor: default;
Width: auto;
}
/ The menu bar value active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html * /.
UL. MenuBarActive
{
z-index: 1000;
}
/ * Menu item containers, position of children relative to this container and are a fixed width * /.
UL. MenuBarHorizontal li
{
margin: 0px;
padding: 0;
list-style-type: none;
do-size: 100%;
position: static;
text-align: center;
cursor: pointer;
Width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
}
/ * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.
UL. MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
z index: 1020;
cursor: default;
Width: 132.8px;
position: absolute;
left:-1000em;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible
{
left: auto;
}
/ * Container of menu items are same fixed width parent * /.
UL. MenuBarHorizontal ul li
{
Width: 8.2em;
}
/ * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
UL. MenuBarHorizontal ul ul
{
position: absolute;
margin:-5% 0 0 95%;
}
/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.
UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible
{
left: auto;
top: 0;
}/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: #333;
color: #FFF;
}
/ * Menu items are a light grey 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;
background-image: url (.. /_images/bar-Top.png);
background-repeat: no-repeat;
}
/ Components menu that have mouse over or focus have a blue background and white text * /.
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
color: #003;
background-image: url (.. /_images/bar-Bottom.png);
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #003;
background-image: url (.. /_images/bar-Bottom.png);
background-position: bottom;
}/*******************************************************************************
Submenu INDICATION: styles if there is a submenu in a given category
*******************************************************************************/
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url (.. /_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
}
/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.
UL. MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
UL. MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url (.. /_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right;
}
/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" positioned on the far left (95%) and centered vertically (50%) * /.
UL. MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}/*******************************************************************************
BROWSER HACKS: hacks below should not be changed, unless you are an expert
*******************************************************************************/
/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.
UL. MenuBarHorizontal iframe
{
position: absolute;
z index: 1010;
Filter:alpha(opacity:0.1);
}
/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.
@media screen, projection
{
UL. MenuBarHorizontal li. MenuBarItemIE
{
display: inline;
f\loat: left;
Background: #FFF;
}
}There are too many mods in your sections for me to go through.
I recommend you first read this http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Then, start with an original sections based on these rules.
Other useful links can be found here http://www.adobe.com/devnet/dreamweaver/spry.html and go to design application to the Spry widgets
-
Menu Bar Spry Widget 2.0 with several background images.
Hello
I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).
Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.
http://www.mentalwarddesign.NET/Dynamech/about/index.html
http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html
1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?
2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?
3 here is what is referenced in the subject. The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?
Thanks in advance for helping this newbie. The responces are greatly appreciated.
Ed
If the markup of my menu bar is the following
so I can style each button as follows
#MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}
background-color: orange;
}
#MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}
background-color: red;
}
#MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}
background-color: white;
}
#MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}
background-color: blue;
color: white;
}
GRAMPS
-
Menu Spry, problems with background images in Internet Explorer
Hello
Looking for help from someone more qualified than me with some menus spry. I have problems with background images don't show is not for some of my items menu in Internet Explorer. Safari and firefox seem to accept it's ok.
Here is a link to the menu: http://www.scottbrownwebdesign.com/beta/HTML/index.html
and here is a link to the spry .css: http://www.scottbrownwebdesign.com/beta/HTML/SpryAssets/SpryMenuBarHorizontal.CSS
I know that these are the elements that have the drop down or the side of the arrows. I can't have two background images that I can?
Thanks in advance,
-Scott
My first thought...
display: inline; f\loat: left; background: #FFF; Try declaring the background-image here as well... where it says not to mess with unless you know what you are doing. I'm just guessing though. If I had more time I'd look into it further but I do not. -
The Spry menu bar personalized with background Images
Hello
Is there a way to make a spry menu horizontal bar by using an image of different background of a different width for each item? In other words, the format individually each menu item. I'm doing a bar with drop down menus using custom images, that I created in Photoshop, but have only been able to use the same image for all the items in the menu. Thank you.
Each menu item will require that this is the style and the name of the class of its own.
Each class will have to be applied to each following anchor tag:
http://ALT-Web.com/demos/multi-colored-list-menu.shtml
Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
-
Help please. My spry menu bar font sizes are smaller in some pages than others.
My spry menu bar font sizes are smaller on some pages compared to others. I can't understand why since I am referencing the same file of sprymenbarhorizontal.css on both pages. I am new to dreamweaver and HTML. Help, please.
I'll post my code if someone tell me how do.
Hello
You can use a different font instead of '%' in px size in your "sections" like I did (12px was that my choice to see what is happening. Of course you can use all the other sizes):
1. in the present case:
UL. MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 12px;
/ * font size: 70%; * /
cursor: default;
Width: 865px;
}2. here:
UL. MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 12px;
/ * font size: 70%; * /
position: relative;
text-align: left;
cursor: pointer;
Width: 168px;
float: left;
border-bottom: 1px solid #660066;
border-right: 1px solid #660066;
border-left: 1px solid #660066;
border-top: 1px solid #660066;
}3. in the present case:
UL. MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 12px;
/ * font-size: 100%; * /
z index: 1020;
cursor: default;
Width: 164px;
position: absolute;
left:-1000em;
}Hans G.
-
I posted this question earlier and I'm sorry to post it again so soon, but I titled it's bad and I wanted to make sure that would not get looked more because of my mess up.
I have two questions. First of all if you can take a look at this http://www.gcfa.org/episcopal-revised.html , you will see how my spry menu leaves the space where it should be. (Between the third and fourth content). This does not happens in Internet Explorer, it does not is FF, Safari, opera. Also, in a world of perfert I would like it if the menu has not been opened, while it was originally opened by the user. Can someone help me please. Thanks in advance!
I don't see the problem space, but what about your state 'Open', remedy in Higlighting the DIF. "" CollapsiblePanel #panelnamehere "the Spry Panel desired difficulty and DW will give you 2 options in the bottom panel with display: select open or closed and by default, choose open or closed.
Maybe you are looking for
-
The screen of my MacBook Pro suddenly transformed read and have a message that says basically that it of a Google virus and gives a number to call for support. When it is called the number was a wrong number. Everyone has never seen that and is - i
-
Wireless adapter WUSB1.1v2.6: someone knows if this will support WPA security? Sheet mentions only WEP. Could there be a driver update to provide WPA? Thank you all...
-
I can't update my pc Windows vista Home premium. 80072EFD error code appears.
After it has downloaded about 11% error code 80072EFD. Also when I try to downloadupdates through website windos my microsoft InternetExplorer says that I lost the connection when downloading any product microsoft WHY does? Help, please HELP Please!
-
whenever a read an e-mail header appears on my taskbarso I have to click manually on erase them, it fills all of my taskbar
-
Malware removed, but my computer is slower than before.
Very well. I had a few irritating problems with my computer for awhile, and after some research diligent on my part, I came to know that it was a malware problem. So after I downloaded the appropriate programs and cleaned my computer, everything was