Spry Menu text cannot in one line?

Hi all,
Need your help!
I always have this problem which is when i put the text on the spry menu, then the text like about bonvo / business division tab is on 2 lines in IE and firefox. But in safari, the text is layout so well in one line.
Please refer to this link http://bonvo.com/corporate/index291009.html
I try to change the width in css as in auto, 100% and inherit but no diffence and the best is i use 100%.
Anyone know how to make it nicely fit one line whithout making the font size smaller?
Thanks

First off, I have not seen Spry Menu Bars implemented in quite the way you have done it. Typically, all my menu items are in one set of nested lists. No harm in your method, but it seems a little laborious!
That said, I think the reason your menu items are stacking up on two lines is having to do with the padding. If you change the padding on the list items from 5px all around to 0 5px, zero top and bottom and 5px left and right, you will have given each of them just a little more elbow room and they should not break lines.
Beth

Similar Messages

Spry Menu Text Alignment

I'm wondering if there is any way to have the text centered
in the main menu bar but align text left the in the submenus. I've
tried, but any alignment I apply in the CSS seems to affect all
text.

I just happened to do this example page someone else:
http://www.projectseven.com/testing/customers/adobe/fubar/
Perhaps it will help. The spry menu is the second one.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"efredian" <[email protected]> wrote in
message
news:gnnq9i$3bu$[email protected]..
> I'm wondering if there is any way to have the text
centered in the main
> menu bar but align text left the in the submenus. I've
tried, but any
> alignment I apply in the CSS seems to affect all text.

How can I make a form where text flows from one line to another?

I have created a fillable multi page form in Adobe Acrobat Pro XI. The form was originally created in InDesign, using lines for text. I saved as an interactive pdf, opened in Acrobat Pro, and created a form using the "Create Form" function. This worked great, but some parts of the form have multiple lines that need to be filled out, so the customer would continue typing and the type would flow from one line to the next. Right now the lines are individual fields. Can I easily convert these fields so that the text goes from one line to the next as the person filling out the form types?
Thank you for the help.

The easiest way is to do a slight redesign to get rid of the lines and then use a multiline field instead of multiple single line fields. If you really need to have the lines, you can use an approach that's demonstrated in the following sample: https://workspaces.acrobat.com/?d=AG6oZ3bi3DYHokxDPeWN7A
You may come across attempts to use JavaScript to automatically move to the next field when the previous one is filled-up, but I've never seen this work very well.

After saving a htaccess file, why the text is on one line

hello all,
I am a webmaster and some time I have to setup a htaccess file (.txt file)When I edit it with Textedith, I make a modification and I save it. Nothing works.
When I open the same file with a PC, all the text is in one line. of course it will not work.
Can some one tell me why the file is not saved in the format when I open it, so it saved in one line?

TextEdit isn't the best choice for editing configuration files, since it doesn't use Unix line endings -
I thought TextEdit did use Unix line endings (LF). The reason it is all one line on a PC is that PC's do not, and thus will only display new lines if line endings are Windows format (CR + LF).
I don't think there should be any problem editing config files with TextEdit, but TextWranger is better, and it also easily handles file names that begin with a dot.

Is there a fax cover template? If not, how can I have 2 text fields on one line?

Is there a fax cover template? If not, how do you add two text fields on one line?

No fax cover template. This forum posts explains how to put multiple fields on one line:
http://forums.adobe.com/message/5032849

Spry Menu Bar wraps to second line on a few monitors

Hello-
I am stuck on a spry horizontal menu bar and have discussed with a few local dreamweaver users and we can't figure this out. I'm using CS4 to create an internal site for my company (sorry, I can't send you link). I tested the site on firefox and explorer on my computer and everything works beautifully. When going through the soft launch one computer out of the six computers who reviewed the site had an issue with my navigation bar. I used the horizontal spry menu bar to create a navigation with six options. The problem computer wrapped the last two to a second line which makes everything weird on pages within the site.
Screen captures are below. Three images show the main page where the navigation wraps on top of the side column and right column. The second image shows the menu bar wrapping behind the left column on additional site pages which is happening on all additional site pages.
The code for the spry menu assets should be below the images. If you need additional information, if I didn't provide everything, I'll send it. I'm very new to this and pretty much self-taught. I have taken an online class through ed2go.com, I've asked a ton of questions from other designers using Dreamweaver, and I've watched MANY tutorials online. ANY help you can give would be MUCH appreciated. THANK YOU!!
MAIN PAGE/HOME PAGE
ADDITIONAL SITE PAGES
@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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #D6D6D6;
background-image: url(/Images/Autry_Background.jpg);
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -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: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
vertical-align: middle;
background-color: #005BAE;
/* 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: #CCC;
color: #000;
text-decoration: blink;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #CCC;
color: #333;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
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;

Hi, Mel,
I see that you are using default widths for the list items in the menus. If you reduce the width of the list items, you should be able to settle on a width that works better than 8em and 8.2em.
Here are the bits that will need editing:
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em; /* make this width smaller */
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em; /* make this width smaller */
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em; /* make this width smaller */
Z

Spry Menu Bar transparency problem - one solution

Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!

This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #fff;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps

Customize Spry menu text

How do i set the css code to get a smaller text size in the
spry submenus than in the main menu? i would like the submenu text
to be 2 px smaller than the text in the main menu. When i change
the submenu text size it also changes the main menu text size in
the hover state. I want the main menu size to remain constant, even
in the hover state, and only have the submenu text size appear
smaller.

Is see the date of this topic and...
Well its laughable...
A normal question unawnsered on the adobe forum.
So many tech people on this site and no one has taken a step to help...
I have also problems with Spry and also liked to get awnsers for it.
But seeing this post makes me sad...
I now have given up hope that someone will be helping me soon.
The only awnsers i got so far is "No" and links to validators that couldnt solve my problem.
Its sad...
Software that is used by possibly millions of people, and still they provide support that raises questions...
Shame on you Adobe!

Text has just one line left on the bottom to write in.

I have a BB Curve 8900 v5.0.0.900 (Bundle 1626, PkRDIEN 5.2.0.96) with T-Mobil service. I did the update for my phone a while ago. When I want to do a text message, the screen displays the previous message over most of the screen with just one line left on the bottom to write in. It makes writing a text a pain because I have to scroll up every time to make sure my text is correct. I've tried to live with this but I don't love it. Can I change this?
Thank you,
Girlfriend

The easiest solution is VPN on Demand
System Preferences -> Network -> (VPN) -> Advanced -> VPN on Demand
Add the hostname/domain name of the resource you're trying to access over VPN to this list. Now the OS will track any access attempt to the specified hostname/domain and will automatically bring up the VPN connection (prompting for username/password if needed).
As for the Dock icon, that depends on the resource you're accessing.
If it's a file share, just mount the share manually then drag the share's icon from your desktop to your Dock. You can now click on the Dock to mount the sharepoint (initiating the VPN connection thanks to VPN on Demand).
If it's a web site, drag the URL from your browser to your Dock. Clicking the icon will launch the URL in your preferred browser (again, triggering VPN on Demand as appropriate).

DW CS4 Spry menu shows up on one page layout, but not in a secondary page

I inserted a spry menu into the homepage. Got it working okay. Then I inserted one into another page layout within the site. Copied and replaced the code with that from the homepage. The secondary page dropdowns aren't dropping down. What am I missing? Help please.
Homepage
Secondary page

Open your Homepage and SaveAs Secondary page. Edit content as desired. Save again.
See also, Dreamweaver Templates in DW Help (F1).
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Menu Text only displays in hover color, doesn't sense browser edge

I have a Spry horizontal menu in a website that is working fairly well in everything except IE6. Firefox, Safari, and IE7 are all fine.
In IE6, random menu items only display in the blue hover color, so they are invisible until you hover over them.
My second problem is that the menu is right-aligned, and the button on the far right has three submenus. I would like the second two submenus to automatically open to the left of the first submenu when opening to the right would cause them to be cut off by the edge of the browser window. How do I do this??
Here is my code (I've customized it with suggestions online, but just can't seem to fix the problem with IE6).
Thanks for any help, I'm really stuck!!
@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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 9pt;
cursor: default;
font-family: Helvetica, Arial, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
height: auto;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 12em;
/* 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: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
/*ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a blue block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000ff;
color: #fff180;
text-decoration: none;
li.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000FF;
color: #FFF180;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
/* Menu items that have mouse over or focus have a yellow background and blue text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff180;
color: #0000ff;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #fff180;
color: #0000FF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
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;
@media screen {
* html ul.MenuBarVertical ul {position: relative!important; float: left;
margin: -10px -1000px -1000px 80px; display: inline;}
* html ul.MenuBarVertical {position: static!important; }
*:first-child+html ul.MenuBarVertical ul {position: relative!important;
float: left; margin: -10px -1000px -1000px 80px;}
*:first-child+html ul.MenuBarVertical {position: static!important; }

If you want to see the website and menu in action, go to http://www.gwnetworks.com/playtri/index_new2.html
Thanks again!

Leaving one line space before starting the text in smartforms

Hi,
I want to leave one line space before starting a text.
i LEFT one line space on the text node but it's not working.
eg: i need to print "Header text". Before printing this i need one line space. Created a blank node for space still not working. Can anyone help me on this.
Thanks,
Rose.

Hi Rose,
Enter a Line Feed in the Smartform Editor.
in the editor type as ,
"Header text"
where / is Line feed and * is a Default Paragraph Format.
Regards,
Balakumar.G.

Trouble with Spry Menu Bar Not Opening on Hover

I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
Rebuild it on another page, and paste in the code?
Suggestions?
ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
Thanks for any help you can offer.
D
HTML for template page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />

<title>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>

<link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="wrapper">
<a href="#skiptomaincontent">
     <img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
height="1" class="invisible" id="spacer">   </a>

<div id="topnav">

<script type="text/javascript">

</script>
<ul id="twittermenu" class="MenuBarHorizontal2">
      <li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
      <li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
      <li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
      <li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
                  <ul>
                        <li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
                        <li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
                  </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
            <ul>
                  <li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
            </ul>
            </li>
</ul>

</div>

<div id="pagebg">
<div id="centralpageborder">

<div id="headerbox">
      <div align="left">
            <img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />

<ul id="MainFourNav" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a>                 <ul>
                     <li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
                     <li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
                  <li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
                  </ul></li>
      <li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
            <ul>
                  <li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
                  <li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
                  <li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
                  <li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
            </ul>
      </li>
      <li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
      <li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
</ul>
<script type="text/javascript">

</script>
            
            <p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
            </div>
</div>
<div id="bodybox">
<div id="pagetitle"><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /></div>
<div id="innerbdybox">
<div id="content">
<div id="maintext">

<a name="skiptomaincontent" id="skiptomaincontent"></a>
<h1>A Tradition Food And Sports: <br />
                        CC & Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
      <h4>Byline: By Jim Bainbridge, The Gazette</h4>
      <p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
            Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
<span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
       </div>

      <div id="photosidebar">
            
            <img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
            <img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /></div>
      
</div>
      
<div id="linkssidebar">
        <p>The Gazette<br />
            The Coloradoan<br />
            The North Forty News<br />
            Colorado Springs Times</p>
</div>

</div>
<div id="footer"> </div>
<br />
<br />
</div> 
</div>
</div>
</div>
</body>
</html>
CSS for Spry Menu Bar:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal2
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    /*margin-top: -10px; */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
    padding-top: 0;
    padding-bottom: 0;
/* 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.MenuBarHorizontal2 li
    list-style-type: none;
    font-size: 95%;
    position: relative;
    text-align: left;
    cursor: pointer;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
/* 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.MenuBarHorizontal2 ul
    margin: 0;
    padding: 0;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal2 ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal2 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal2 ul
    border: 1px solid #9E2532;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal2 a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #F3E8CC;
    text-decoration: none;
    background-color: #663300;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
    color: #FFF;
    background-color: #663300;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal2 a.MenuBarItemSubmenu2
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 100% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 100% 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.MenuBarHorizontal2 iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal2 li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
var Spry;
if(!Spry)
    Spry = {};
if(!Spry.Widget)
    Spry.Widget = {};
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
    this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // load hover images now
    if(opts)
        for(var k in opts)
            var rollover = new Image;
            rollover.src = opts[k];
    if(this.element)
        this.currMenu = this.element;
        var items = this.element.getElementsByTagName('li');
        for(var i=0; i<items.length; i++)
            this.initialize(items[i], element, isie);
            if(isie)
                this.addClassName(items[i], "MenuBarItemIE");
                items[i].style.position = "static";
        if(isie)
            if(this.hasClassName(this.element, "MenuBarVertical"))
                this.element.style.position = "relative";
            var linkitems = this.element.getElementsByTagName('a');
            for(var i=0; i<linkitems.length; i++)
                linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
        return false;
    return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
    if (!ele || !className || this.hasClassName(ele, className))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
    if (!ele || !className || !this.hasClassName(ele, className))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent('on' + eventType, handler);
    catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:false;';
    menu.parentNode.appendChild(layer);
    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
    var layers = menu.parentNode.getElementsByTagName('iframe');
    while(layers.length > 0)
        layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    var menus = root.getElementsByTagName('ul');
    for(var i=0; i<menus.length; i++)
        this.hideSubmenu(menus[i]);
    this.removeClassName(this.element, "MenuBarActive");
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
    return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
    if(this.currMenu)
        this.clearMenus(this.currMenu);
        this.currMenu = null;
    if(menu)
        this.addClassName(menu, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
                menu.style.top = menu.parentNode.offsetTop + 'px';
        if(typeof document.uniqueID != "undefined")
            this.createIframeLayer(menu);
    this.addClassName(this.element, "MenuBarActive");
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
    if(menu)
        this.removeClassName(menu, "MenuBarSubmenuVisible");
        if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
            menu.style.top = '';
            menu.style.left = '';
        this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
    var opentime, closetime;
    var link = listitem.getElementsByTagName('a')[0];
    var submenus = listitem.getElementsByTagName('ul');
    var menu = (submenus.length > 0 ? submenus[0] : null);
    var hasSubMenu = false;
    if(menu)
        this.addClassName(link, "MenuBarItemSubmenu");
        hasSubMenu = true;
    if(!isie)
        // define a simple function that comes standard in IE to determine
        // if a node is within another node
        listitem.contains = function(testNode)
            // this refers to the list item
            if(testNode == null)
                return false;
            if(testNode == this)
                return true;
            else
                return this.contains(testNode.parentNode);
    // need to save this for scope further down
    var self = this;
    this.addEventListener(listitem, 'mouseover', function(e)
        if(self.bubbledTextEvent())
            // ignore bubbled text events
            return;
        clearTimeout(closetime);
        if(self.currMenu == listitem)
            self.currMenu = null;
        // show menu highlighting
        self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
        if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
            opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }, false);
    this.addEventListener(listitem, 'mouseout', function(e)
        if(self.bubbledTextEvent())
            // ignore bubbled text events
            return;
        var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
        if(!listitem.contains(related))
            clearTimeout(opentime);
            self.currMenu = listitem;
            // remove menu highlighting
            self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
            if(menu)
                closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }, false);

It has to do with all of your absolutely positioned elements. What's happening is that the menu is falling behind the absolutely positioned elements on your page. Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window. Personally with that page setup you have now I really don't see a need for absolutely positioned elements. But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.

Multiple paragraph styles in one line

I'm creating a training manual and I am having trouble with paragraph styles. Here's an example of what I am trying to do:
"The Dog walks up the hill"
In the above example, I have created a style for the bolded text and connected it my table of contents. The idea is when I create and update the TOC, "The Dog" will be the entry with the remaining text omitted from the TOC. The issue I am having is because the text is on one line, I cannot have multiple styles. I've tried writing just "The Dog" and then either changing the style or deleting the paragraph break to connect the text below to the main line. Once I erase the paragraph break and the text is on one line, only ONE style is maintained. Now, I can modify the character style; however, because the paragraph style is still the one connected to the TOC, the entire paragraph appears in the TOC.
Any advice would be greatly appreciated! I've searched everywhere to no avail.
Thank you very much for your support.

ajmiddle18 wrote:
I'm creating a training manual and I am having trouble with paragraph styles. Here's an example of what I am trying to do:
"The Dog walks up the hill"
In the above example, I have created a style for the bolded text and connected it my table of contents. The idea is when I create and update the TOC, "The Dog" will be the entry with the remaining text omitted from the TOC. The issue I am having is because the text is on one line, I cannot have multiple styles. I've tried writing just "The Dog" and then either changing the style or deleting the paragraph break to connect the text below to the main line. Once I erase the paragraph break and the text is on one line, only ONE style is maintained. Now, I can modify the character style; however, because the paragraph style is still the one connected to the TOC, the entire paragraph appears in the TOC.
Any advice would be greatly appreciated! I've searched everywhere to no avail.
Thank you very much for your support.
It depends on the breed of dog.
Is the paragraph always a single line?
Is this dog the leader of the pack? IE, does the phrase you want to keep always begin the paragraph? If so, then you can separate the dog from the pack in the TOC. One way is to surround the pack with a unique character or marker in the main text, like End Nested Style Here, - one after dog, and another after hill, and create a paragraph style for the doggie paragraph to use in the TOC. This paragraph should contain a nested character style that applies microscopic text properties, like paper character color, font .1pt, and horizontal scale .1%. The TOC entries should use nested paragraph styles; the source paragraphs need you to insert the End Nested Style Here markers. The nested style definition in the TOC paragraph styles should apply no character style through the first end nested style marker, then apply microscopic through the next end nested style marker. This will shrink the walks...hill text to an invisible speck, so small that it shouldn't interfere with tab leaders and page-references.
Another approach is to use a single-row table for the heading, with the dog pent nicely in the left cell, and the pack in the right cell. Each cell contains a paragraph, so only extract the dog to the TOC.
Search Google for terms like "InDesign hide part of paragraph in toc knowhowpro," "InDesign suppress part of paragraph in contents knowhowpro," "InDesign two paragraph styles on one line," and similar phrases without quotes for some good discussions and a variety of approaches that include layers, anchored frames, and conditional text.
Search Google for terms like "InDesign conditional text," and "InDesign nested paragraph styles," without quotes for details.
http://forums.adobe.com/message/3206266 has a long discussion that may shed some additional light.
HTH
Regards,
Peter
Peter Gold
KnowHow ProServices

"non-scrolling" Spry Menu Bar

I want to use a Spry Menu Bar (at either the top or bottom of the Window) but do not want it to scroll. In otherwords as the visitor is scrolling the content of the page they would always have the Menu Bar visible in the Window. How do I do this? Is there a difference dependent upon whether the Menu Bar is at the top or bottom? I would probably prefer the bottom.
Thanks for your help.
Jim

BEM, thanks. I am almost all the way there. There are four little issues preventing me from implementing.
For reference, here is the css script as I have changed it (didn't change the comments):
<style type="text/css">
#MenuBar1{
position:fixed;/*so the navigation will always be fixed at this location of the viewport/window*/
width:400px; /*or whetever width needed. Be careful or this will cover "static" or normal positioned content*/
height:33px; /*or whetever height is needed*/
left:300px; /*so 10 pixels off the right edge of the viewport/window*/
top: 2px; /*so always 300 pixels from th top of the viewport*/
</style>
And here is a screenshot
1. I have changed the width callout to 400px, yet the width of the dropdown has not increased. It wraps text. I want the Links to be on a single line. Do I have to change things in the SpryMenuBarVertical.css file or somewhere else?
2. When you select a Link from the PullDown and go to the new page, then press the Back button, the Pulldown has not gone away as shown in the above screenshot. Sometimes multiple Links are illuminated in blue. You have to move your cursor over the Links for them to disappear. This is not acceptable. What is going on?
3. When I insert the Spry Menu it inserts a few lines of script at the very bottom of the body of my page, as shown in this screenshot:
Hopefully you can see what I mean. Can I move this into the header or into my external CSS? If so, what do I have to change to make it work? I would prefer to not have it in the Body.
4. Where do I put the other files on the server? i.e. "SpryMenuBar.js" and "SpryMenuBarVertical.css"? I see they are in a SpryAssets folder so I assume I just put that folder on the server in its relative position, or change the path as needed. Korrekt?
Thanks for your help.
Jim

Spry Menu text cannot in one line?

Similar Messages

Maybe you are looking for