Spry Menu background

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.html

ich_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

Tags: Dreamweaver

Similar Questions

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.

place pictures in the same div as a spry menu not as background

Hi all
I'm unable to find a solution to my problem, is it possible to put an image next to the ether of a spry menu, but not as a background image, I tried dragging, deletion and insertion of images but dreamwever keeps placing them armel the menu spry itself is there any way to get around this or anything that I cannot know who is logging the image beside alsong rather than the spry menu?

Switch to code view and insert your images at the beginning and end of your Spry nav div. Not sure if it will work as expected, but it's worth a try.

End caps are most often added to the background.

Nancy O.

How to make my Spry Menu transparent background bar?

I am a beginner and create my first website and just started coding for the first time today. I'm trying to do my transparent background behind the text, or at least replace the text + the background of a menu with my own photo. Is it possible that I can do as possible. You can get an overview of my problem here on my test site.
http://visualizecontrollers.webege.com/
I'm trying to make it similar to my design that I made in photoshop. I change it a little though of course.
http://gyazo.com/598320901c425f5c47a8118306d8506d
As you can see in the picture above, below the menu bar, there is a line with a small arrow pointing up under the House, don't worry about this. Will just change for each page I do.
If you want the code, I'm going here.
HTML/CSS
http://pastebin.com/pZ1HWZnW
Sections
http://pastebin.com/9QSzgsHP
SpryMenuBar.js
http://pastebin.com/LzyjVuSg
I have a backup plan if it is not possible. Can I just replace the menu with pictures that will respond as buttons when you click right align horizontal.
If you need additional information, please let me know!

I discovered how to change. If you have a default color as background of your Spry menu bar, simply click on the default code of the background color and then delete and leave the field blank. It will automatically make your transparent background.

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:
- Point 1
- Point 2
- Point 3
http://ALT-Web.com/demos/multi-colored-list-menu.shtml

Nancy O.

ALT-Web Design & Publishing

Web | Graphics | Print | Media specialists

http://ALT-Web.com/

Background of the Spry menu bar problem
Hello
I tried to search for this problem, and although I found others with the same problem, there has been no response (probably so obvious I missed it and they understood.) And I update the Spry menu bar to the latest version.

The Horizontal Spry menu bar works fine on Firefox and IE 7, the background is white and the submenus, not the intention. Alignment and size is fine, just designed background colors do not work (on the menu itself, I want a transparent background on submenus, #777079.)
Website: September Entertainment Site
Style sheet Spry: Spry CSS

Thank you in advance for any help you can give me.
See you soon,.
Janell
Hello
Just found the problem for someone who is having the same thing happen. This is the cut down "Sections":

/*******************************************************************************

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;
}
}

Where it says: "background: fff;" change to everything that you need, in my case, "background: transparent;"

Voila!
See you soon,.
Janell

How do I Center my spry menu bar? (to learn)

I have a simple Web page, I have a background (color) and a background image of the Center and a picture of the top banner. Then, I inserted a "Spry menu bar" but her sitting to the left of the page? IV been tried at the Center, I tried to put a < div align = "center" > all about all this, but nothing works. even if I switch to the design view and click on the menu bar and click on 'align'-> 'Center', but it still does not. can you please help me!

Link code in Green is placed just above of your

Code HTML of Jon added two places below red

The CSS of Jon code in blue could go in a block style above the tag

or it could be added to your stylesheet to distance
Hakisak wrote:

Hello thanks for the reply, sorry I couldn't respond sooner (I've been busy). but I'm still learning the creation of Internet sites, and I don't understand where to put this code, you said?

Dreamweaver has insert 'menu spry bar' that looks like this, but I'm still not sure how to Center?
- Point 1
  - Point 1.1
  - 1.2
  - Point 1.3
- Point 2
- Point 3
  - Point 3.1
    
    Point 3.1.1
    
    3.1.2
  - Point 3.2
  - Point 3.3
- Point 4

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.

Cannot change the color of hover in the Spry menu bar

I try to customize my horiztonal Spry menu bar and managed to almost I want, except the point State. It should be easy enough since I want all (top of page menus and submenu items) to go to the image background even when red flew over (as well as having the top red menu item when its submenu is open).
Currently I have while hovering to the correct color, with the exception of the top Menu of the page that contains submenus (even if their submenus are fine, but also high Menu with no submenus items).
I thought that I had put my finger where to change this in the CSS Spry, but something can be in conflict, since change it doesn't seem to work as it has in other menus, I tested it on that...
Here is the project of the site- http://beta.deltsig.com/
(Notice that the elements of the first menu 4 goes to red when hovered on)
Here's the section of the CSS where I think it should be - I can post more of it if necessary:
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: pointer;
Padding: 0.5em 0.75em;
color: #363837;
text-decoration: none;
background-image: url (.. / css/images/menu-graygradient.gif);
}
/ Components menu that have mouse over or focus have a red gradient background text.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover.
This section changes stationary State to childless Parents and children? */
UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-image: url (.. / css/images/menu-redgradient.gif);
color: #363837;
}

Try to remove this CSS rule on line 124

UL. MenuBarHorizontal a.MenuBarItemSubmenu {}

background-image: url("..) ("/ css/images/menu-graygradient.gif");

}

Spry menu questions

Hey, I have configured a bar horizontal Spry Menu for my site and have been broadcast in the problem after the problem, but I managed to knit them all. So far.
About half of the pages of my site, the drop down sumbmenu covers the content of the page (which is what I want), while on the other half of the pages, the submenu is covered by the content of the page (which I don't). I went back in the code of each page to make sure that I was not absent from all the necessary links with the spry, but everything is exactly the same, everything in all areas. I wonder if there is anyone out there who might have any idea where I might have turned bad.
Also, I use images flown over to my menu (the main bar and the submenus), but there is a gap between each submenu ball to see, and I can't find a way to close the gap. I tried to add a background image for the full menu, but it does not work so far. the closest I came to what I wanted he had to appear in a small section of the menu.
If anyone can help me, it would be much appreciated. Thanks in advance.

Your image links are incorrect for the menu.

Change this

.. /ryanolsenstudios/gallerytab.jpg

TO:

gallerytab.jpg

for the image of the Gallery menu.

Same for all the mouseover images. They are located at wrong - therefore does not:

.. /ryanolsenstudios/gallerytabroll.jpg

All of these images are currently located here:

gallerytabroll.jpg

I recommend that you put it all in a folder called 'images' and a link to the image in this folder. This way, your main folder will have only .html files. Folder images are .jpg and other image files.

Teeney little information coming out of my Spry menu bar

Hello all-
Grateful for the help to get rid of the gray background in the Spry menu bar to:
http://www.gratefulcreative.com/Andre_Madiz/index.html
Thank you!
Ken D
Creative Director
grateful creative
www.gratefulcreative.com

Change the value of highlighteded

UL. MenuBarHorizontal {}

top of the margin: 15px;

list-style-type: none;

do-size: 100%;

cursor: default;

Width: 600px;

background-color: #161616;

float: right;

}

GRAMPS

Gap between the header and spry menu bar (school project)?

Hello I have a project for school and they want me to a dw premade layout html, with a header image, and a spry menu bar located in the header. Which I did, but there is this small gap between the header image and the spry menu bar and the header that I can't get rid of. There is no additional line break tag or paragraph in there, I have NO idea what is wrong, please help if you know. Thank you.
Joint below is code html and css. Sorry there all text in dw premade in there too. Basically, I have also attached the css external to the spry menu bar, and the page just in case.
<! DOCTYPE HTML >
< html >
< head >
< meta charset = "UTF-8" >
< title > Rapids Transit - Buffalo River Outfitters < /title >
< link href = "css/rapids_transit.css" rel = "stylesheet" type = "text/css" > "
< style type = "text/css" >
<!--
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
Background: # 42413;
margin: 0;
padding: 0;
Color: #000;
}
/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0; / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}
/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
color: # 42413.
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
color: #6E6C64;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
}
/ * ~ ~ This container fixed-width surrounds the other div ~ ~ * /.
. Container {}
position: relative;
Width: 960px;
Background: #FFF;
margin: 0 auto; / * set to auto on the sides, coupled with the width, the layout centres * /.
}
/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background-color: #fff;
padding-right: 5px;
padding-left: 5px;
}
/ * ~ ~ It's layout information. ~~
(1) padding is only placed on the top or the bottom of the div. The items in this div have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.
*/
. Happy {}
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
/ * ~ ~ Footer ~ ~ * /.
.footer {}
padding: 10px 0;
background: #CCC49F;
}
/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
->
< / style >
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" > "
< style type = "text/css" >
{#river_level}
position: absolute;
left: 500px;
top: 325px;
Width: 245px;
height: 80px;
z-index: 1;
background-color: #ffcc33;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: #960;
border-right-color: #960;
border-bottom-color: #960;
border-left-color: #960;
text-align: center;
do-family: Verdana, Geneva, without serif.
font-size: medium;
}
< / style >
< / head >
< body >
< div class = "container" >
< div class = "header" > < a href = "#" > < img src = "assets/rt_banner.jpg" alt = "Banner Rapids Transit" width = "950" height = "120" / > < / a > "
< ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "index.html" > home < /a > < /li >
< li > < a href = "guides.html" > our Guides < /a > < /li > ""
< li > < a href = "rates.html" > rates < /a > < /li > ""
< li > < a href = "lodging.html" > Lodging < /a > < /li > ""
< li > < a href = "before.html" > Before You Go < /a > < /li > ""
< /ul >
<! - end .header - > < / div >
< div class = "content" >
< p align = "left" class = "body_text" > welcome to rapid Transit. We are a rental service and canoe river guide located on the banks of the beautiful Buffalo River to Gilbert (Arkansas). We also offer kayak and raft rental. Our experienced guides will be pleased to offer trips on the river suitable for all levels - from beginner to expert. They will also be pleased to accompany you all the way! Stop at our country store and pick up your picnic supplies in the process of disappearance. We will even Pack it for you in airtight containers. (Just a precaution!) Call us to make your reservations. < /p >
< p align = "left" class = "contact_info" > Rapid Transit < br / >
Highway 55 North < br / >
Gilbert, Arkansas 75497 < br / >
(555) 365-5228 < br / >
< a href = "mailto: " [email protected] ' > Mike Andrew < /a > < /p > .
< h1 > < / h1 >
<! - end content - > < / div >
< div class = "footer" >
< p > < em > Copyright 2000 - 2012 < br / >
Last updated on
<!-#BeginDate format: Am1-10 April 2012 > <!-#EndDate->
You < /i > < / p >
<! - end .footer - > < / div >
<!-end .container-> < div id = "river_level" > current River Conditions: < br >
good floating today < br >
with a few spots of class II < / div > < / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
< /script >
< / body >
< / html >
-------------------------------------------------------
ALSO, HERE IS MY EXTERNAL STYLESHEET
{.body_text}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: normal;
}
{.paragraph_header}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: normal;
make-weight: bold;
color: #036;
}
{.contact_info}
do-family: Arial, Helvetica, without serif.
do-size: 14px;
make-style: italic;
Color: #000;
}
-----------------------------------------------------
HERE'S MY SPRY MENU BAR CSS TOO
@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: 14px;
cursor: default;
Width: auto;
do-family: Arial, Helvetica, without serif.
}
/ * 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;
}
/ * Menu item containers, position of children relative to this container and are a fixed width * /.
UL. MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
Width: 190px;
float: left;
height: 25px;
}
/ * 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: 8.2em;
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: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
UL. MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #2E9712;
Padding: 0.5em 0.75em;
color: #fff;
text-decoration: none;
}
/ 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: # 33;
color: #FFF;
}
/ * 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: #3FA7A8;
color: ##ffffff;
}
/*******************************************************************************
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 (SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 50 95%;
}
/ * 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 (SpryMenuBarDownHover.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 ul a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarRightHover.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;
}
}

Add the below css to your styes css selector:

. Header img {}

display: block;

}

Change your padded 30px high 'content' css selector and also include clear: both; (as shown below).

. Happy {}

padding-top: 30px;

padding-right: 0;

padding-bottom: 10px;

padding-left: 0;

Clear: both;

}

I colored the spry menu, but it does not appear in the preview.

I changed the color of my spry menu of beige to black. It appears on my work page, but when I try to preview, it's as if I had never changed color. I also tried to go to the page via Firefox, but it does not appear there either. The code says the bottom of the menu is #000, we design signs it indicates the background color is #000 institutions. Can someone tell me what I'm missing that deploys the spry menu stay in the default color?

Not a good option, unfortunately.

"allow multiple consecutive spaces" is an old option in DW who must be stopped. He inserts just several nonbreaking spaces when you press the SPACEBAR.

It's ugly and unpredictable because it depends on the font size, sizing of browser text etc.

Better to use CSS

tracking http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

Wee http://www.w3schools.com/cssref/pr_text_word-spacing.asp

Spry menu bar: problems in IE and Firefox

Hello! This is my first time writing the forum. I tried to fix this site and I'm about to break! I found a lot of help just brwosing here in the past and I hope that somone can point me in the right direction.

I have validated successfully the site using the W3C CSS Validator thinking which might help, but no go. (In fact, everything what was spoil the vertical alignment of elements of menu in Safari, Chrome and other browsers in which the menu used to work properly). I tested on the latest version of Firefox for Mac and testing for IE using the Adobe browser lab.

Here's what happens:

The menu is completely useless in all versions of Internet Explorer.

In Firefox the menu seems to work fine except the menu under flash items then disappear a site navigation very frustrating.

Here is the site: http://oregapet.com/

And here's my sections

@charset "UTF-8";
ul.MenuBarHorizontal {
          margin: 0;
          list-style-type: none;
          font-size: 80%;
          cursor: default;
          width:auto;
          font-family: Verdana, Geneva, sans-serif;
           [disabled]font: 11px;


          padding-top: 4px;
          font-weight: bold;
          padding-bottom: 2em;
}
ul.MenuBarActive {
          z-index: 1000;
}
ul.MenuBarHorizontal li {
          margin: 0;
          font-size: 100%;
          position: relative;
          text-align: left;
          cursor: auto;
          width: auto;
          float: left;
          background-color: #AAA;
          color: #FFF;
          padding-top: 0.3em;
          padding-right: 3.5em;
          padding-bottom: 0.3em;
          padding-left: 1em;
          min-height: 22px;
}
ul.MenuBarHorizontal ul {
          margin: 0;
          list-style-type: none;
          font-size: 90%;
          z-index: 1020;
          cursor: default;
          width: 0px;
          position: absolute;
          left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
          left: auto;
}
ul.MenuBarHorizontal ul li {
          width: 15em;
          margin-left: -12px;
           [disabled]color: #FFF;


}
ul.MenuBarHorizontal ul ul {
          position: absolute;
          margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
          left: auto;
          top: 0px;
}
ul.MenuBarHorizontal ul {
          border: 0;
}
ul.MenuBarHorizontal a {
          display: block;
          cursor: pointer;
          background-color: #AAA;
          padding: 0.3em 0 0 0;
          color: #FFF;
          text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
          background-color: #AAA;
          color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          padding-top: 10px;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
          text-decoration: none;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
          background-repeat: no-repeat;
          background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe {
          position: absolute;
          z-index: 1010;
           [disabled]opacity:0.1;


           [disabled]filter:alpha(opacity=1);
  For IE8 and earlier 
}
 @media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
          display: inline;
          f\loat: left;
          background: #FFF;
}
}

Thank you very much!

GRAMPS! Thank you very much. I really, really appreciate your help. In addition to your suggestion I changed all other instances of z-index that relate to the menu bar. I put them all to 10000 (more than the z-index of 1002 on the fadeslideshow.js). Now it works like a charm and is no longer hides behind the fadeslideshow. Yay!

Thanks to Nancy O. for his suggestion as well. For anyone having problems woth Spry Menu bar in IE and Firefox especialy: The Spry Menu Bar 2.0 version works much better than the previous version.

Melody

Space additional Spry menu bar

I put a spry menu bar in Dreamweaver and everything works except there is a small space on the left of the submenus within the boundary of the submenu. It is quite difficult to see because everything is blue, but if you look closely you can see.
I played around with the css (and probably messed up a few things on the way), but I can't seem to get rid of this space.
Capture screen and css below:
@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;
are-size: 100%;
cursor: default;
width: auto;
}
/ * 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;
}
/ * Menu item containers, position of children relative to this container and are a fixed width * /.
UL. MenuBarHorizontal li
{
padding: 0;
list-style-type: none;
are-size: 100%;
position: relative;
text-align: left;
cursor: point;
width: auto;
float: left;
margin left: 3%;
}
/ * 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;
are-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 8th;
}
/ * Submenus should appear slightly overlapping to the right (95%) and upward (-5%) * /.
UL. MenuBarHorizontal ul ul
{
position: absolute;
}
/ * 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: 0px;
top: 0;
}
/*******************************************************************************
INFORMATION DESIGN: Describes the set of colors, borders, fonts
*******************************************************************************/
/ * Submenu containers have borders on all sides * /.
UL. MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/ * Menu items are a light grey block with padding and no text decoration * /.
SLH MenuBarHorizontal a
{
display: block;
cursor: point;
color: #FFF;
text-decoration: none;
background-color: #173362;
}
/ Components menu that have mouse over or focus have a blue background and white text * /.
SLH MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus
{
background-color: #BCC5C2;
color: #000;
}
/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.
SLH MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #173362;
color: #FF0;
}
/*******************************************************************************
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%) * /.
SLH MenuBarHorizontal a.MenuBarItemSubmenu
{
}
/ * 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%) * /.
MenuBarHorizontal ul a.MenuBarItemSubmenu SLH
{
background-repeat: no-repeat;
}
/ * 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%) * /.
SLH MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
}
/*******************************************************************************
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 * /.
SLH 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;
}
}

Connect to the Widget from Adobe Exchange and grab the latest Spry Menu 2.0 (less problems).

Widget Browser
http://labs.Adobe.com/technologies/widgetbrowser/

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB

Spry Menu background

Similar Questions

Maybe you are looking for