Menu bar horizontal project seven
QUESTIONWhat must I do to get the individual menu items to fill the width of a document?
BACKGROUND
Recently, I went from a menu bar horizontal menu bar SRPY to a seven project horizontally. After substantial manipulation of this last I reached all of my goals except one - individual menu items that expand to fill the width of the page. For now, everything is crowded to the left.
Unfortunately each tweek I can think about adjust the results to disaster menu bar. There may be a combination of tweeks I have to apply at the same time as I do not know.
It is a very clean page that has been validated for HTML and CSS.
The WEB page
http://homepage.Mac.com/moogoonghwa/Imagine_Prototype/contents/utility/practice.html
Roddy
Quote:
http://www.Projectseven.com/testing/customers/Adobe/Fubar/
Thank you, al. Unfortunately, I pretty much decided to abandon the idea of a bar of menus elastic, as it turned out to be too difficult for me to realize. However, I will post the link you provided as a response to this topic so that others more advanced that I could "take advantage" of the it.
Roddy
Tags: Dreamweaver
Similar Questions
-
Menu bar horizontal Spry and IE11
I inserted a drop-down list of the Horizontal Spry menu bar in a .dwt file model and created a file .html from him.
See: http://www.peterbarker.plus.com/exp.html
I have not changed the original CSS
Unfortunately the drop-down menu options menu may not work as expected. Choice open laterally to the right seen in my browser IE11.
I had friends check using their browser. They have looked at the page via Firefox, Chrome, mobile Windows 8.1 and different versions of IE. In each case, the Menu bar horizontal Spry exploited properly. It seems to be a problem with my browser.
I would appreciate any advice please.
Is there something I can do with coding CSS or Spry or maybe there is a setting of IE that will solve the problem for me and / or others who may visit IE11 or similar?
It seems that there is a problem with my browser.
Do not use IE Compatibility Mode.
You should not use spaces or special characters in file names. This image file name is invalid code.
images/Myshkin, Yaroslavl, Russia Compressed.jpg
Rename it without spaces or commas.
Nancy O.
-
Menu bar horizontal moves between pages
Hello
I have all the properties of the page on the same values; However I notice the menu bar horizontal at various levels when I load my pages. The site is AbileneDentist.com.
Any idea on what could be the cause to happen?
Thank you
MarkHello
In my view, the vertical scroll bar is initially objects to be moved.
To resolve this problem, you can add a scroll bar to all pages. To achieve the same thing:
On the file menu in Muse, select Site Properties. The visibility for the scroll bars vertical browser, set to Always.
It will be useful,
Sonam
-
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;
}
-
Green color in the menu bar horizontal
can someone tell me why I can't get rid of this Green in my horzontal bar. It's my old menu bar which I changed it as image, same image name and location, just changed the pic. I have tried everything changin all links in my bar menus spry to the new image, but these few tabs are still green... All of the suggestions.
In http://www.hpbsurgery.net/SpryAssets/SpryMenuBarHorizontal.css
Line 174 remove background image attribute
UL. MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarDown.jpg);
background-repeat: no-repeat;
background-position: 50 95%;
}
-
Help - my menu bar horizontal displays
I have read another view on similar problems and tried these suggestions. But I can still get my menu bar to display.
Please re-read my post. Nothing has changed. The two files that I mentioned are NOT on site at the specified location. They are both at the root of the site, which means your site definition is not properly specified in DW.
For now, change these two links to this topic-
And download page. See what's happening.
-
I tried to create a Table version of the-Tablet command line just below the horizontal menu, but it creates a blank page and no content of the version of office without worrying. I cleared the table and tried several times but no result.
Just look closely at the opoins:
Here is no option to copy the content of a page
-
menu bar horizontal Spry does not work properly in Internet Explorer
Here is the link to my website: www.ees-energy.com
Check it in IE, it does not work well. Works fine in Chrome and Firefox. Please let know hwo to fix this in Internet Explorer, because a lot of people still use IE
Thank you
Obaid
Using IE Tester that worked for me in the 6 and 7.
What problems are you seeing?
Martin
-
Menu bar drop-down horizontal-> bar drop down Vertical menu
Hello
I need help to put a drop down menu bar horizontal to a drop-down menu bar vertical. I'm not experienced with CSS so don't know how to change the code correctly. I would get the submenu passes vertically next to the main menu.
http://www.villalotus.NET/test/test.htm
Thanks in advance!
Thanks Ken! Position is now correct.
But the submenu does not disappear once hovered and if you move down to the next link. It disappears if I move the mouse to the left or go under submemnu.
Post edited by: Karonaful
-
Need to justify horizontal of Spry Menu bar on the left
I use DW CS6. Menu bar horizontal Spry is in a div of fluid set grid on the page.
The menu bar horizontal floated a CSS change left until what I did (I think). It floats right now and I cannot figure out how to get back to float left. Does anyone know a fix?
Spry Menu CSS is:
UL. MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
cursor: default;
Width: auto;
}
and presentation of fluid grid CSS to div's
{#menuHorizontal}
Clear: both;
float: left;
left margin: 0;
display: block;
}
Is the current page to the http://www.bedroomandmore.com/1_b_fluidGrid.html
Thank you very much!
Thank you Al,.
Use the w3 validator I've corrected everything except one point, where it is said there was a string of code, when in fact there was only my tag closure at the bottom of the page.
... still can't seem to get the menu bar horizontal Spry back to left well aligned.
Correction:
I had css for fluid grid layout div for the bar of menus with a set width:
{#menuHorizontal}
Clear: both;
float: left;
left margin: 0;
Width: 100%;
display: block;
}
Thank you
Eric
-
Menu bar not working not properly in IE9
My spry menu bar works perfectly in Chrome, Firefox, and Safari, but not working in IE9. The submenus to the menu bar horizontally not to fall down, they go on the side. Any ideas?
http://littlechisel.com/Ideal_Window/
Here is my code:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
" < html xmlns =" http://www.w3.org/1999/xhtml "> <!-InstanceBegin template="/Templates/Ideal_Header.dwt ' codeOutsideHTMLIsLocked = 'false'->
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<!-InstanceBeginEditable name = "doctitle"-->
< title > < /title > ideal window manufacturing
<! - InstanceEndEditable - >
<!-InstanceBeginEditable name = "head"->
<! - InstanceEndEditable - >
< style type = "text/css" >
body, td, th {}
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
}
{body
background-color: #A74131;
}
a: link {}
text-decoration: none;
}
a: visited {}
text-decoration: none;
}
a: hover {}
text-decoration: underline;
}
a: active {}
text-decoration: none;
}
< / style >
< link href = "IdealWindowTemplate.css" rel = "stylesheet" type = "text/css" / > "
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
< / head >
< body >
< table width = "900" border = "0" align = "center" cellpadding = "0" cellspacing = "0" >
< b >
< class td = "White-13-AlignRt" > < a href = "Contact.html" > contact us < /a > | Dealer Login < table >
< /tr >
< b >
"< td valign ="top"> < a href =" index.html "> < img src = images/thanks" "width ="243"height ="145"border ="0"/ > < /a > < img src =" images/Ballet_Header.jpg "width ="657"height ="145"border ="0"/ > < table >
< /tr >
< b >
< td >
< table >
< /tr >
< tr bgcolor = "#FFFFFF" >
< td align = "center" valign = "top" > < ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a class = "whyideal MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >
< ul >
< li > < a class = "whyidealsub" href = "#" > why ideal < /a > < /li >
< li > < a class = "whyidealsub" href = "#" > story < /a > < /li >
< /ul >
< /li >
< li > < a class = "products MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >
< ul >
< li > < a class = "productssub" href = "#" > ranges < /a > < /li >
< li > < a class = "productssub" href = "#" > doors Patio < /a > < /li >
< li > < a class = "productssub" href = "#" > garden window < /a > < /li >
< li > < a class = "productssub" href = "#" > forms architectural < /a > < /li >
< /ul >
< /li >
< li > < a class = "intermodality MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >
< ul >
< li > < has a class = "energysub" href = "#" > Energy Saving packages < /a > < /li >
< li > < a class = "energysub" href = "#" > R5 window program < /a > < /li >
< li > < a class = "energysub" href = "#" > Options package < /a >
< ul >
< li > < a href = "#" > LowE Glass < /a > < /li >
< li > < a href = "#" > gas Argon/Krypton < /a > < /li >
< li > < a href = "#" > Triple pane < /a > < /li >
< li > < a href = "#" > foam fill < /a > < /li >
< /ul >
< /li >
< /ul >
< /li >
< li > < a class = "news" href = "#" > < span > < / span > < /a > < /li >
< li > < a class = "custody MenuBarItemSubmenu" href = "#" > < span > < / span > < /a >
< ul >
< li > < a class = "caresub" href = "#" > cleaning & amp; Operation < /a > < /li >
< li > < a class = "caresub" href = "#" > Condensation < /a > < /li >
< li > < a class = "caresub" href = "#" > glossary < /a > < /li >
< /ul >
< /li >
< li > < a class = "guarantee" href = "#" > < span > < / span > < /a > < /li >
< /ul > < table >
< /tr >
< b >
< td height = "5" align = "left" valign = "top" > < table >
< /tr >
< b >
< td align = "left" valign = "top" bgcolor = "#FFFFFF" > <!-InstanceBeginEditable name = "EditRegion1"->
< table width = "900" border = "0" cellspacing = "0" cellpadding = "0" >
< b >
< td width = "19" align = "left" valign = "top" > < img src = "images/BarShadow19.jpg" width = "19" height = "34" / > < table > "
< td width = "525" align = "left" valign = "top" > < img src = "images/indexPhoto.jpg" width = "525" height = "362" / > < table > "
< td width = "336" > < table >
< td width = "20" align = "left" valign = "top" > < img src = "images/BarShadow20.jpg" width = "20" height = "34" / > < table > "
< /tr >
< /table >
<!-InstanceEndEditable--> < table >
< /tr >
< b >
< td align = "center" valign = "top" > < class p = 'Footer' > ideal window manufacturing | 100 West 7th Street, Bayonne, NJ 07002 | Tel: 800-631-3400 | Fax: 800 758-7528 < br / >
© Ideal window manufacturing 2012 all rights reserved < br / >
" Web Design by < a href =" http://www.littlechisel.com "target ="_new"> small chisel Design < /a > < /p > "
< class p = 'Footer' > < / p > < table >
< /tr >
< /table >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "..."}) "" / SpryAssets/SpryMenuBarDownHover.gif ', imgRight: ".. ({"/ SpryAssets/SpryMenuBarRightHover.gif"});
< /script >
< / body >
<! - InstanceEnd - > < / html >
Sections:
@charset "UTF-8";
/ * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
The AVAILABLE INFORMATION: Describes the box model, positioning, the order
*******************************************************************************/
/ * The outermost container for the menu bar, an area of width auto without margin or padding * /.
UL. MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
do-size: 100%;
cursor: default;
Width: auto;
}
UL. MenuBarHorizontal ul a {}
background-color: #514B 97.
color: #CCC;
}
UL. MenuBarHorizontal a.whyideal {}
background-image: url (.. / images/WhyIdeal.jpg);
height: 28px;
Width: 139px;
}
UL. MenuBarHorizontal a.whyideal.MenuBarItemSubmenu {}
background-image: url (.. / images/WhyIdeal.jpg);
height: 28px;
Width: 139px;
}
UL. MenuBarHorizontal a.whyideal.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/WhyIdealRoll.jpg);
height: 28px;
Width: 139px;
}
UL. MenuBarHorizontal a.whyideal span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.whyideal:hover, ul. MenuBarHorizontal a.whyideal:focus, ul. MenuBarHorizontal a.whyideal.MenuBarItemHover, ul. MenuBarHorizontal a.whyideal.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.whyideal.MenuBarSubmenuVisible {}
Background: url (.. / images/WhyIdealRoll.jpg);
}
UL. MenuBarHorizontal a.products {}
background-image: url (.. / images/Products.jpg);
height: 28px;
Width: 138px;
}
UL. MenuBarHorizontal a.products.MenuBarItemSubmenu {}
background-image: url (.. / images/Products.jpg);
height: 28px;
Width: 138px;
}
UL. MenuBarHorizontal a.products.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/ProductsRoll.jpg);
height: 28px;
Width: 138px;
}
UL. MenuBarHorizontal a.products span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.products:hover, ul. MenuBarHorizontal a.products:focus, ul. MenuBarHorizontal a.products.MenuBarItemHover, ul. MenuBarHorizontal a.products.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.products.MenuBarSubmenuVisible {}
Background: url (.. / images/ProductsRoll.jpg);
}
UL. MenuBarHorizontal a.energysavings {}
background-image: url (.. / images/EnergySavings.jpg);
height: 28px;
Width: 169px;
}
UL. MenuBarHorizontal a.energysavings.MenuBarItemSubmenu {}
background-image: url (.. / images/EnergySavings.jpg);
height: 28px;
Width: 169px;
}
UL. MenuBarHorizontal a.energysavings.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/EnergySavingsRoll.jpg);
height: 28px;
Width: 169px;
}
UL. MenuBarHorizontal a.products span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.energysavings:hover, ul. MenuBarHorizontal a.energysavings:focus, ul. MenuBarHorizontal a.energysavings.MenuBarItemHover, ul. MenuBarHorizontal a.energysavings.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.energysavings.MenuBarSubmenuVisible {}
Background: url (.. / images/EnergySavingsRoll.jpg);
}
UL. MenuBarHorizontal a.news {}
background-image: url (.. / images/News.jpg);
height: 28px;
Width: 104px;
}
UL. MenuBarHorizontal a.news.MenuBarItemSubmenu {}
background-image: url (.. / images/News.jpg);
height: 28px;
Width: 104px;
}
UL. MenuBarHorizontal a.news.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/NewsRoll.jpg);
height: 28px;
Width: 104px;
}
UL. MenuBarHorizontal a.news span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.news:hover, ul. MenuBarHorizontal a.news:focus, ul. MenuBarHorizontal a.news.MenuBarItemHover, ul. MenuBarHorizontal a.news.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.news.MenuBarSubmenuVisible {}
Background: url (.. / images/NewsRoll.jpg);
}
UL. MenuBarHorizontal a.care {}
background-image: url (.. / images/CareMaint.jpg);
height: 28px;
Width: 205px;
}
UL. MenuBarHorizontal a.care.MenuBarItemSubmenu {}
background-image: url (.. / images/CareMaint.jpg);
height: 28px;
Width: 205px;
}
UL. MenuBarHorizontal a.care.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/CareMaintRoll.jpg);
height: 28px;
Width: 205px;
}
UL. MenuBarHorizontal a.care span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.care:hover, ul. MenuBarHorizontal a.care:focus, ul. MenuBarHorizontal a.care.MenuBarItemHover, ul. MenuBarHorizontal a.care.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.care.MenuBarSubmenuVisible {}
Background: url (.. / images/CareMaintRoll.jpg);
}
UL. MenuBarHorizontal a.warranty {}
background-image: url (.. / images/Warranty.jpg);
height: 28px;
Width: 145px;
}
UL. MenuBarHorizontal a.warranty.MenuBarItemSubmenu {}
background-image: url (.. / images/Warranty.jpg);
height: 28px;
Width: 145px;
}
UL. MenuBarHorizontal a.warranty.MenuBarItemSubmenu:hover {}
background-image: url (.. / images/WarrantyRoll.jpg);
height: 28px;
Width: 145px;
}
UL. MenuBarHorizontal a.warranty span {}
visibility: hidden;
}
UL. MenuBarHorizontal a.warranty:hover, ul. MenuBarHorizontal a.warranty:focus, ul. MenuBarHorizontal a.warranty.MenuBarItemHover, ul. MenuBarHorizontal a.warranty.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.warranty.MenuBarSubmenuVisible {}
Background: url (.. / images/WarrantyRoll.jpg);
}
#MenuBar1. MenuBarSubmenuVisible a {}
background-image: none;
background-repeat: no-repeat;
Width: 139px;
height: 28px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-color: #FFF;
Color: #000;
text-align: center;
vertical-align: bottom;
background-color: #d3c7b7;
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
}
#MenuBar1. MenuBarSubmenuVisible a: hover {}
make-weight: bold;
background-color: #eee9e3;
}
#MenuBar1. MenuBarSubmenuVisible a.whyidealsub {}
background-image: none;
background-repeat: no-repeat;
Width: 139px;
height: 28px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-color: #FFF;
Color: #000;
text-align: center;
vertical-align: bottom;
background-color: #d3c7b7;
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
overflow: visible;
line-height: 28px;
float: none;
}
#MenuBar1. MenuBarSubmenuVisible a.whyidealsub:hover {}
make-weight: bold;
background-color: #eee9e3;
}
#MenuBar1. MenuBarSubmenuVisible a.productssub {}
background-image: none;
background-repeat: no-repeat;
Width: 138px;
height: 28px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-color: #FFF;
Color: #000;
text-align: center;
vertical-align: bottom;
background-color: #d3c7b7;
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
line-height: 28px;
}
#MenuBar1. MenuBarSubmenuVisible a.productssub:hover {}
make-weight: bold;
background-color: #eee9e3;
}
#MenuBar1. MenuBarSubmenuVisible a.energysub {}
background-image: none;
background-repeat: no-repeat;
Width: 169px;
height: 28px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-color: #FFF;
Color: #000;
text-align: center;
vertical-align: bottom;
background-color: #d3c7b7;
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
line-height: 28px;
}
#MenuBar1. MenuBarSubmenuVisible a.energysub:hover {}
make-weight: bold;
background-color: #eee9e3;
}
#MenuBar1. MenuBarSubmenuVisible a.caresub {}
background-image: none;
background-repeat: no-repeat;
Width: 205px;
height: 28px;
border-top-width: 1px;
border-top-style: solid;
border-bottom-color: #FFF;
Color: #000;
text-align: center;
vertical-align: middle;
background-color: #d3c7b7;
do-family: Tahoma, Geneva, without serif.
do-size: 12px;
line-height: 28px;
}
#MenuBar1. MenuBarSubmenuVisible a.caresub:hover {}
make-weight: bold;
background-color: #eee9e3;
}
/ * 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;
float: left;
vertical-align: middle;
}
/ * 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;
position: absolute;
left:-1000em;
vertical-align: middle;
text-align: center;
display: block;
}
/ * 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
{
line-height: 28px;
}
/ * 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: #EEE;
Color: #333;
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: # 33;
color: #FFF;
}
/*******************************************************************************
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 or change
UL. MenuBarHorizontal ul li {}
display: block;
float: none! important;
Width: auto;
white-space: nowrap;
}
The! important bit is to substitute the JS
GRAMPS
-
I use CS 5.5 and I just inherited a site as well as the CS software and I am very new to DW (noob so apologies). in any case, the navigation of the site is managed by a simple menu bar horizontal at the top of the page (what we call a spry menu bar to be more precise, although I don't know what it is). All the pages share the same menu bar, and there is nothing to distinguish it from one page to the other as a marker to designate what page you are, etc.. I need to add some new elements of navigation bar. The first thing I noticed on the menu bar is that it is not editable, except the new page model which is great for new pages, but doesn't help really with existing pages. The second thing I noticed is that the menu bar is wrapped, as well as many other things, in <! - InstanceEndEditable - > and <!-InstanceBeginEditable name = 'text_content'-> which I guess is what is made unmodifiable.
So my questions are:
1 are the tags <! - InstanceEndEditable - > and <!-InstanceBeginEditable name = 'text_content'-> work as I suggest?
2. I suppose they might be added or removed as needed by bouncing back between Notepad, but what is the right way to DW to manage these sections? I mean, I'm sure that they have not been put there by the Elves.
3. If 1 and 2 have not yet addressed this, how add or deduct my menu bar items?
4. If 1 to 3 have not yet addressed, since all the pages share the same menu bar, is there a way I can mass update bar menu once and have it automatically propagate to all pages? Copy and then paste on the other is of course an option but it would be cool if there was a more automated management and simple way that.
Your pages are controlled by a DW model and your description, work as it should. Models are used to maintain consistency between pages. It is useful to put common elements such as navigation, headers, footers, locked in the model areas. These regions are locked on the pages of the child and must be changed in the model itself. Once the model is modified and saved, DW invites you to automatically update all the child pages has created this model. The models must be in a folder called 'Templates' to the root of the site. If you have inherited this site, you get all the source files or just download them from the remote site? Check the "Templates" folder and see if it is there.
The use of templates for common elements is good on small sites, but can become troublesome since you need to download all the pages of the child whenever you change the model. For larger sites, SSI are a better option.
Spry is a javascript framework that is now obsolete.
-
I downloaded the Menu CSS-Only (1.0) in my Dreamweaver CS5.5 as a widget, when I uploaded my site to the logic of start it under the menu bar horizontal to vertical. How can I fix it?
This isn't a matter related only to dreamweaver, what is necessary for a Web site.
Basically, it boils down to what is running on the local computer, need to be downloaded on (replicated on) the remote control. So the answer to your question is Yes, you must download the folder and its contents.
GRAMPS
-
Spry menu bar not working do not on the other pages
Hello
I've been struggling with this all day - I want to copy my menu bar horizontal spry in several pages of my site. I am doing this creating a model .dwt with the original menu bar, to research and to behave as it should. The new page displays the bar correctly but does not - no function drop-down list. I don't know if this has nothing to do with the menu bar being a library item (and not on the css and js?) Can anyone help?
Instead of using a template, take a look at this article http://foundationphp.com/tutorials/sprymenu/ssi.php
GRAMPS
-
Spry menu bar display in IE compatibility mode
The menu bar horizontal spry on http://ww.ituna.ca works fine except that if a person has their defined to display IE browser compatibility javascript is disabled and the Drop downmenu does not work. Someone who isn't savy to this setting will find that the menu bar does not - there was a way to avoid this - works fine in chrome and firefox.
Pat
Ok. Now I understand what you are getting. In IE8, there is a compatibility button which resets the browser IE7 standards. This has nothing to do with JavaScript.
Test the page in IE7, I see the problem. There are a few errors in the markup.
The or to line 385 the line reads
autoHeight: 'false. '
Being the last property in the constructor, there should be no comma at the end, so the line should be
autoHeight: 'false. '
The second problem is caused by the implementation of the link to the SpryMenuBar.js. Just move this link to the top of the links as per
Finally, to rid the place of the comapibility the following line just under the opening button
tagGRAMPS
Maybe you are looking for
-
After three attempts at passwordPassword check failedFatal error... System, CNU92888LW
-
OK, I know that this may be simple for most, but I have an of a moment _ this find. As I said legal copy that has been saved... I backed up all my files on DVD, I don't care if I lose all the programs that I can always download them later. Basicall
-
This FTP site cannot be displayed in Windows Explorer.
I'm running Windows 7 Home Premium and am unable to access FTP OR internet files from Windows Explorer. "Under 'internet options' on the Advanced tab, I checked enable them FTP" folder view "(outside of Internet Explorer) and" use FTP mode liabilitie
-
This is my situation. I have decreased my creative cloud subscription and must retire to my last non - CC version. It is no longer installed and I have no CD. Not sure if I had CDs at the same time or downloaded the original.I use a new generation
-
How can I get Indesign CC 2015 run more quickly without crashes?
Hi all, recently updated my application Indesign from Adobe InDesign CC 2015 and it works very, very slowly and continually crashes when trying to open the new file, or export a 1 small page in PDF file. This seems to be a major problem. It is basica