Horizontal Menu
Hi everyone I have a page where i have a horziontal menu...
I have been using showonetab and for each menu I have add a showDetailItem.
For each menu I drag the object that i want to create into the showDetailItem...
When I run the page, everything is ok when i go through the different menu i do find the different forms for each object that i want to create...
My problem is as follows..
I drag and drop the persistEntity on the different forms but when I bind I can only bind to one type of objects.
That is in my page there are 3 different object: ( Person, Client, Project)
If I bind the first persistEntity button all the other buttons have the same binding.
How can I overcome this problem.
Thanking you in advance for your cooperation and help
Please help really important......
Regards
Lutchumaya
Message was edited by:
Lutchumaya
1. Use a vertical menu (vertical = up/down, horizontal =
left/right)
2. Post a link to the page. I am not quite sure what you are
talking about.
Similar Messages
-
How can I get a horizontal menu widget to display at 100% width?
I have created a horizontal menu with uniform spacing and have stretched it out to each side. I can't get the red indicator line to show up on the left side, but it does show on the right. No matter what I do, the menu continues to show up short on the right side of my screen in preview mode.
Does anyone know how to do this properly? Has anyone else had issues with it?
Thanks!Hi,
We are aware of this limitation with the Menu and Panel Widgets and hope to address the same in future.
Thanks,
Vikas -
How do I change vertical menu to a horizontal menu in Dreamweaver CS5?
Doing a website (my first) for a friend of mine. Followed the Adobe tutorial for a lot of it (with Paul Trani) and have everything done but now my friend wants the menu bar to be horizontal instead of vertical. (I have other questions but this is the big one for now) I do have a CSS file that is linked to all 4 pages. I have hunted and searched to no avail. The page started out as a template (2 column fixed, left sidebar, header and footer). I am hoping I just have to paste some code into it and have found a few suggestions on the web but nothing seems to work. I did get it to the point with a list with no bullets with no background but can't get it to go horizontal. Then code started showing up on my design page and I gave up and turned to this forum. I would hate to start over. I do not even see a template that has a horizontal menu on it for one of the choices. Any help would be greatly appreciated.
I think you are confused about how to differentiate between horizontal navigation and vertical navigation.
In HTML, both are exactly the same. You use a list. So both will be just like you describe them:
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, there's your navigation. Done. So how do we do an horizontal nav? Well we tell web browsers to format our HTML code in a style sheet, called a Cascading Style Sheet, or CSS. So let's give the <ul> a tag that tells the browser that it's not just a simple unordered list; it's special and has to be set up a certain way:
<ul id="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, let's go to our style sheet and create the style for the id "nav." And remember, anything with an ID on a web page must occur only once. If you're going to have several "nav" tags on your page, you have to make a class. The difference (in CSS) between a class and an id is the use of a hash "#" for an id and a dot "." for a class.
So here's the CSS for the horizontal navigation:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
#nav li {
float: left;
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
#nav li a:hover {
color: #c00;
background-color: #fff;
Here you're floating both the list and the list items left. Floating the list items left is what pulls them into a nice horizontal row, stacking the items from left to right. However, because of how floats behave, the containing list will collapse to a height of zero unless it is also floated left.
And that wouldn’t be a major problem, except the list has a background color and if the list collapses, that background color won't show. This way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
Additionally, the only margin you see will be the bottom one, so the list items will make their own margins and behave themselves. The list-style is set to “none,” which removes the bullets.
Now all navigation will certainly be a link, so I style the list items that are links (#nav li a) with padding that will space them out, get rid of the default underline, setting the text decoration to none, making them bold and creating a thin right border. Then I change the color on the nav for a hover.
Now, vertical is the default for a list.
Here's the difference:
You keep list-style: none;
You get rid of your floats.
You get rid of the 100% width, unless you have it corralled in a containing div, like a left or right sidebar.
Boom! you're done.
-Mark -
Spry Horizontal Menu Bar not working in IE
Hi! I am new to this forum and new to Dreamweaver. I recently used Dreamweaver to build a website to display my digital portfolio. I am not very good at this and don't understand much of this works. I inserted a spry horizontal menu bar for my navigation. I did change the original set up to have the background the colors I wanted and I also changed the size so it would go across the top of my page. This looks fine in Firefox and Safari but in Internet Explorer the bar displays vertically, which does not look good. Can anyone look at my code and tell me how I can fix this problem?
I appreciate any help I can get with this as I have tried everything I know.
This is the link to my site: www.digitaldesignsbymargee.comHi! I am new to this forum. I inserted a spry horizontal menu bar for my navigation but i cannot able veiw a horizontal menubar in IE though it works fine in google chrome and Mozila. Can anyone look at my code and tell me how I can fix this problem?
w@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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* 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: 0px;
padding: 0px;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 14em;
float: left;
border-color: white;
border-left-style: solid;
border-left-width: 1px;
border-right-style: none;
border-right-width: 1px;
/* 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: 14em;
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: 14em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: 0 0 0 99%;
/* 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.9em 0.75em;
color: white;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, Verdana, sans-serif;
text-decoration: none;
color: white;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #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.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 10px 85%;
/* 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
b/ackground-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 10px 85%;
/* 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
b/ackground-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;
float: left;
/* I have updated and checked the code as mentioned in the forum topic but still it is not working */
ul.MenuBarHorizontal a:visited { color: white;}
ul ul a { background-color: #436d9c; }
ul a.MenuBarItemHover { background-color: #19385a; }
ul .MenuBarItemSubmenu ul li a { border: none; }
ul a.MenuBarItemSubmenu.MenuBarItemSubmenuHover { background-color: #19385a; }
ul.MenuBarSubmenuVisible li { border: none; }
I appreciate any help I can get with this as I have tried everything I know. -
Nube needs help inserting a JQuery horizontal menu bar into my site-help.
Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
This post is in regard to the menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
or how to insert it into my site.
Please help.
Why can't I see the nav bar in the site when I paste in?
All I see is the text and no images. I know I am pasting the code in the wrong place.
Where do I insert it?
Below is the code for the site and below that is the code for the menu bar.
Where do I insert it? Help.
Thank you in advance for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #ffffff;
background-color: #<span class="navmainbg">003366</span>;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffff00;
background-color: #<span class="submenubg">003366</span>;
ul#navlist li a:active
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
<div id="slideshow">
<div id="slideshow">
<div align="center">
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
<div data-ertype="content" style="display: none;"><ul data-erlabel=>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
<img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
</li>
<li>
<img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
<img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplateName="NONE" style=""> <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
<div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> <!-- modify the float on this element to make left/right/none=center aligned. -->
<span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
<span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
</span>
<span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
</span>
</div>
</div>
<div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
<div align="center">
<!-- <div style="float: left; padding: 6px 18px 3px 0; font-weight: bold;">Title text!</div> -->
</div>
<div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
<div align="center">Title1 </div>
</div>
<div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
<div align="center">Title2 </div>
</div>
</div>
<div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
<br /><br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
<br /><br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
</div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</div>
<!-- End DWUser_EasyRotator --></div>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>
Below is the code for the JQuery menu with sub and secondary sub menus:
<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
<!-- <![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexNav - Flexible, Device Agnostic Navigation</title>
<link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14pt;
body {
background-color: #FFF;
a:link {
color: #FFFFFF;
text-decoration: none;
a:visited {
color: #FFF;
text-decoration: none;
a:hover {
color: #F00;
text-decoration: none;
a:active {
color: #900;
text-decoration: none;
</style>
<script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="container">
<header id="site-header">
<div class="menu-button">Menu</div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
\ </div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</body>
</html>Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list.
(see below).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9 />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<style type="text/css">
img {margin:6px; border:solid 2px #FFF;}
img:hover {background: #666;}
</style>
<link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
<div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<div class="#"
<div class="menu-button"></div>
<nav>
<ul data-breakpoint="800" class="flexnav">
<li><a href="HOME">HOME</a>
<li><a href="About Us">ABOUT US</a>
<li><a href="Products">PRODUCTS</a>
<ul>
<li><a href="Bound Products">Bound Products</a>
<ul>
<li><a href="Booklets">Booklets</a></li>
<li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
<li><a href="Newsletters">Newsletters</a></li>
<li><a href="Presentation Books">Presentation Books</a></li>
<li><a href="Manuals">Manuals</a></li>
</ul>
</li>
<li><a href="Brochures">Brochures</a></li>
<li><a href="Business Cards">Business Cards</a></li>
<li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
<li><a href="Copies">Copies</a></li>
<li><a href="Corp. ID">Corporate ID</a></li>
<li><a href="Flyers">Flyers</a></li>
<li><a href="Forms">Forms</a></li>
<li><a href="Menus">Menus</a></li>
<li><a href="Photo Collages">Photo Collages</a></li>
<li><a href="Photo Enlargements">Photo Enlargements</a></li>
<li><a href="Postcards">Postcards</a></li>
<li><a href="Rack Cards">Rack Cards</a></li>
<li><a href="Wide Format">Wide Format</a>
<ul>
<li><a href="Banners">Banners</a></li>
<li><a href="Posters">Posters</a></li>
<li><a href="Signs">Signs</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Services">SERVICES</a>
<ul>
<li><a href="Litigation">Litigation Services</a></li>
<li><a href="Creative">Creative Services</a></li>
</ul>
</li>
<li><a href="FAQs">FAQs</a>
<li><a href="Contact Us">CONTACT US</a>
</ul>
</nav>
</header>
</div>
<script type="text/javascript">$(".flexnav").flexNav();</script>
</div>
<div id="body">
<div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
<div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html> -
Horizontal Menu Bar Help Needed
Hi there, I am somewhat new to web design but I've been helping a friend update his business's page recently. We use Dreamweaver CS3 and our hosting is thru GoDaddy.
My problem appears when I try to insert a horizontal menu bar (Insert>Spry>Menu bar) so that a dropdown menu will appear when I hover over an option, much like the top menu on the GoDaddy homepage, among others. It works correctly when I preview my page in a browser from Dreamweaver, (Firefox, IE) but when I actually upload my page to the GoDaddy servers and view it, it shows up not as a bar with hidden options, but as a long unformatted vertical list.
The site in question is here: http://www.notyouraveragebookkeeper.com/indextabs
I thought it might be a problem with CSS, but I made sure that all of the style sheets are properly uploaded to the servers, and I made sure that my browser accepted any Javascript applets. I've also tried it with my Dreamweaver CS5 trial. Like I said, I am an amateur in every sense of the word and I'm still learning technical terms for things so some of my jargon may be a bit flawed. I have done a good bit of online research in forums and otherwise, and I've tried solutions that have been given to similar problems. Maybe someone could view the source code and find out where I've gone wrong, or suggest tips to identify problems in Dreamweaver. I feel like the problem lies within the Spry framework, but I have very little knowledge on how it works or what it does.
Any assistance in this regard would be extremely helpful and appreciated.Neither SpryMenuBar.js and SpryMenuBarHorizontal.css can be found by your online site.
Possibly these have not been uploaded or uploaded to a wrong location.
Gramps -
Horizontal Menu Bar - Not displaying correctly in Internet Explorer
My issues are occuring in Internet Explorer 8 and 7, haven't tested earlier versions.
I am currently using DW CS5, Spry 1.6.1
The website (not yet complete) is at www3.sympatico.ca/mitchell.richard/
The menu bar as viewed in Firefox is correct. In Internet Explorer the menu bar is left justified, hides visited links, and lists horizontal menu items in reverse order.
I work for a Women's Shelter in Canada, as the Information Systems Manager. We don't have the funds to hire someone to build a website and it was decided and I quote "You know computers, you can buld the website". I couldn't get them to understand the analogy that just because a Neurosurgeon can use a scalpel he isn't a Cardiothoracic Surgeon... needless to say, I am floudering on this menu bar. Any help would be greatly appreciated.
Below is the source for my menubar
CSS
@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: 12pt;
cursor: default;
width: inherit;
font: calibri;
font-family: Calibri;
font-weight: bold;
background-color: #4F91CD;
/* [disabled]height: 27px; */
/* [disabled]border-bottom: 1px solid #A7C9E5; */
/* [disabled]border-top: 1px solid #A7C9E5; */
/* 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: 6
.em;
float: right;
/* 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: 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
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #4F91CD;
padding: 0.2em 0.75em;
color: #FFF;
text-decoration: none;
border-bottom: 1px solid #A7C9E5;
border-top: 1px solid #A7C9E5;
/* 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: #A7C9E5;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #A7C9E5;
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.MenuBarHorizontal a.MenuBarItemSubmenu
/* [disabled]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
/* [disabled]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
/* [disabled]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
/* [disabled]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 ifram=e
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;
HTML
<tr>
<td colspan="10" class="navbarrepeat"><ul id="navbar" class="MenuBarHorizontal">
<li><a href="contact_us.html">Contact Us</a> </li>
<li><a href="helpful_links.html" class="MenuBarItemSubmenu">Resources</a>
<ul>
<li><a href="helpful_links.html">Helpful Links</a></li>
<li><a href="community_agencies.html">Community Agencies</a></li>
<li><a href="of_interest.html">Of Interest</a></li>
</ul>
</li>
<li><a href="checklist.html" class="MenuBarItemSubmenu">Safety</a>
<ul>
<li><a href="safety_checklist.html">Safety Checklist</a></li>
<li><a href="things_to_bring.html">Things to Bring</a></li>
<li><a href="child_safety_plan.html">Child Safety Plan</a></li>
</ul>
</li>
<li><a href="signs.html" class="MenuBarItemSubmenu">Abuse</a>
<ul>
<li><a href="what_is_abuse.html">What is Abuse?</a></li>
<li><a href="signs.html">Signs of Abuse</a></li>
<li><a href="characteristics.html">Characteristics</a></li>
<li><a href="why_women_stay.html">Why Women Stay</a></li>
<li><a href="donate.html">Survivors Speak</a></li>
</ul>
</li>
<li><a href="donate.html" class="MenuBarItemSubmenu">Support Us</a>
<ul>
<li><a href="donate.html">Donate</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="volunteering.html">Volunteering</a></li>
<li><a href="statistics.html">Statistics</a></li>
</ul>
</li>
<li><a href="join_us.html">Join Us</a> </li>
<li><a href="our_story.html" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="residential.html">Our Services</a></li>
<li><a href="our_mission.html">Our Mission</a></li>
<li><a href="our_story.html">Our Story</a></li>
<li><a href="board_of_directors.html">Board of Directors</a></li>
</ul>
</li>
</ul></td>
<td><img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>/* 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: 6
.em;
float: right;
The red coloured line causes your menu to be displayed the wrong way round in FF. IE shows the menu as you have listed it with Contact Us as the first item.
Advice:
change the float to left so that the listed items start on the left hand side
change the listed items in the order that you want them to appear. -
Recently created this page: http://musicnotes.net/MNI/SPRY.html using Dreamweaver CS3 but it does not look the same in all browsers.
It starts out with the table width set for 100% and then hard sets the
column widths to force the complete heading to something like 1600 pixels
wide. The cell widths should be allowed to set themselves.
In IE 6.0, and probably IE 7.0, the mouse over point to change colors is a
narrow strip between the links. Results in white flashes as you move down.
In IE 8.0, which is now similar to FireFox, the mouseover color changes work
okay but the secondary panels overlap the primary column. It's workable but
doesn't look quite right.
Except for being forced super wide and too big, everything seems to work
okay in Firefox.
Does anyone know if these issues are resolved using CS4.Thanks Gramps, will take a look and get sorted!
Date: Mon, 14 Feb 2011 19:00:03 -0700
From: [email protected]
To: [email protected]
Subject: I am having problems with my spry horizontal menu bar defaulting to the top of page in IE
The structure of your document needs fixing. You will be able to get a lot of information from here http://www.adobe.com/devnet/dreamweaver/css.html
After you have fixed the structure start with a fresh copy of SpryMenuBar. Read this before making any changes http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Gramps
> -
Another SPRY horizontal menu problem with IE7
I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs -
Spry horizontal menu problem in IE and Chrome
First I'd like to express my frustration with spry. I spend way too much time trying to "band-aid" spry to work in different browers. I'll admit that I'm new to the web game but I seem to spend a large percentage of my time simply trying different "fixes" to something that I don't think should be this much of a problem. Regardless ...
I've made a pretty simple web page, put a spry horizontal menu on it and it works and displays just like it's supposed to in FF but IE and Chrome both seem to have a problem with it. Currently there are no links attached to it but that's not my problem - getting it to display correctly is. Possibly this issuehas already been addressed but I couldn't find it in the forum. Webpage can be viewed here
I've put (what I believe to be) the relevant css on the Main Content section of the page. Any help will be much appreciated. Thanks in advance.I am so glad that you started again, this is the best way to learn, trial and error.
To fix your woes to date, have a look at the following
.thrColFixHdr #header {padding:0;} /*remove the padding from the menubar container*/
ul.MenuBarHorizontal{width:auto;margin:0;} /*remove the fixed width and auto margin*/
ul.MenuBarHorizontal li{width:16.6667%;} /*spread the 6 items over the full width 6*16.6667% = 100%*/
ul.MenuBarHorizontal ul a{text-align:left;} /*Set the the alignment back to left for any menu item links that are in a sub menu*/
To add images to your menu items have a look at the following http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html, you will find it at the bottom of the page.
I did not realise that SolidWorks still existed, started using it in the mid 1990's, excellent product, easy to use and promotes fast product development. I lost track of it when I went for retirement 10 years ago.
Gramps. -
Background images with spry "horizontal menu"
hi again
I am trying to work with the spry: "horizontal menu"
I want to put some background images into the menu bar not into the submenu
and that is the problem: the background images appears overall
what can I do ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
and css
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* 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: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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;
background-color: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #FEF3E4;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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;Complete page and css code below (scroll down)
All you should be concerned with at this moment to get the background image to appear in the top level anchor is the css style below:
/* 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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
I've added the background-postion because presumably you want it to appear flush left. This overides the out-of-the-box setting which positions it 95% far left.
Here is the code and css:
<!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>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<head>
<style type="text/css">
<!--
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
-->
</style>
<style>
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* 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: center;
cursor: pointer;
width: 100px;
float: left;
height: 10px;
/* 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: 100px;
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: 100px;
height: 30px;
/* 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;
background-color: #FEF3E4;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
background-repeat: no-repeat;
background-image: url(../rot.jpg);
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FF0;
/* 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: #FEF3E4;
color: #FF0;
background-image: url(../rot.jpg);
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-color: #000;
background-image: url(../rot.jpg);
background-repeat: no-repeat;
background-position: left top;
/* 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-color: #0F9;
/* 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-color: #FEF3E4;
color: #FF0;
/* 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-color: #F99;
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);
</style>
</head>
<body>
<div id="container">Raum für den Inhalt von id "container"
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Element 1</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
<ul>
<li><a href="#" class="MenuBarHorizontal">heija</a> </li>
<li><a href="#">soso</a></li>
</ul>
</li>
<li><a href="#">Element 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> -
Spry horizontal menu alignment problem
There is an issue I am dealing with that is causing problems.
I am trying to avoid having the borders double up in thickness, anywhere within the menu.
I have achieved this by using the left and bottom border everywhere I can and then adding class or id tags where appropriate and adding my own top and right borders.
Works fine everywhere except at the top of the dropdown section of the submenus where it connects with the main horizontal menu.
I would like that top box of the submenu to align perfectly with the main horizontal menu bar so that there is a clean single pixel line.
A clean contiuous line around all menu objects.
When I add a top border on that top box of the submenu, I can adjust the placement a little but it always seems to either over ride the main horizontal menu, which causes me to either lose the border or double up on it.
if I have a border completely around both the horizontal menu and the submenu, then when I align them so that the borders sit on top of each other, I get an artifact at the corners of the lines that appear as a gap. It is NOT clean.
I can edit the position of the submenu in the CSS code below, I have done this with the margin-top statement. I have adjusted that between 0 and -1, and will inlcude images of the problem. Hopefully this will work.
I want a very clean continous line around the menu boxes that does NOT leave gaps, does NOT double up in thickness or leave any strange looking artifacts anywhere.
Any help would be greatly appreciated!
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
margin-top: 0px;
margin-left: 0px;Posting screenshots only demonstrates the problem. For anyone to troubleshoot it for you, they need to see the actual menu. Upload the problem page to a public website, and post the URL here. Then someone can have a look at it for you.
-
Spry horizontal menu perfect on Mac, screwy on PC
I created a Spry Horizontal menu for http://www.ljwdesign.com/clients/TotalFab.
The only edit I made to http://www.ljwdesign.com/clients/TotalFab/SpryAssets/SpryMenuBarHorizontal.css was to add the positioning of the <div> container that holds the menu. You'll see it as the first thing in the CSS document. I left the rest of the code exactly the way Dreamweaver created it.
My main CSS file is http://www.ljwdesign.com/clients/TotalFab/css/mainstyle.css but there is nothing in that file that styles the Spry menu.
In Firefox and Safari on my Mac, it works EXACTLY as expected - exactly how I want it to work.
In IE 6, forget it - doesn't work, but I don't care at the moment.
In IE 7, the drop-downs won't go past the bottom of the table cell the menu is in. Also, once you mouseover then mouseout of any of the top level menu items (there are three), the text for the other two disappears until you mouseover them again.
In Chrome and Firefox, the menus drop just fine and the text stays visible, but the longest of the three drop-downs (the gallery) disappears behind the Flash object below the menu. This does not happen in any Mac browsers.
I've tried playing with z-index everywhere, but nothing helps. I even increased the z-indexes in the Spry CSS file to 9999; didn't make a darn bit of difference.
If anyone knows how to fix this, I'd really appreciate the heads up. Until I get this working in all the above-mentioned IE browsers, I don't dare touch the CSS code to make it match the rest of the site stylistically. Thanks!
Lynda Williams
LJWDesign.comThere's been a recent post and solution to menus that drop below Flash, just in the last two days.
I'll see if I can find it for you. Here it is: http://forums.adobe.com/message/261033#261033
Beth -
Spry Horizontal Menu Submenus Won't Appear - Help
OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@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: auto; padding: 0; list-style-type: none; font-family: "Times New Roman", Times, serif; font-size: medium; font-weight: bold; cursor: default; width: auto; } /* 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: center; cursor: pointer; width: 108px; 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 0 0 50%; padding: 0; list-style-type: none; font-size: 80%; z-index: 1020; cursor: default; width: 108px; float: none; 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: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; z-index:1030; } /* 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: none; top: 0; z-index:1040; } /******************************************************************************* 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; background-color: #000; padding: 5px 5px; color: #FEFEFE; text-decoration: none; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { background-color: #323232; color: #FEFEFE; } /* 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: #323232; color: #FEFEFE; } /******************************************************************************* 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; } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body { font-family: Verdana, Geneva, sans-serif; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ } .twoColFixLtHdr #container { width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */ border: 2px solid #000; text-align: left; /* this overrides the text-align: center on the body element. */ } .twoColFixLtHdr #header { padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ border: 0px solid #000; } .twoColFixLtHdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */ } .twoColFixLtHdr #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 200px; font-size:12px; color:#FEFEFE; background: #000; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000; border-right-color: #660000; border-bottom-color: #000; border-left-color: #000; padding-top: 1px; padding-right: 0px; padding-bottom: 1px; padding-left: 1px; } .twoColFixLtHdr #mainContent { margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ background:#660000; } .twoColFixLtHdr #videomainContent { margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ background: #323232; padding-left:100px } .twoColFixLtHdr #singleframe { background: #323232; } .twoColFixLtHdr #footer { padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ font-size:12px; color:#FEFEFE; background:#000; border: 1px solid #000; } .twoColFixLtHdr #footer p { margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover { text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{ color:#4C0000;} .w1{font-size:14px; color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{ float: left; /* since this element is floated, a width must be given */ width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ padding: 0px 0px 0px 0px; } .b{font-size:12px; color:#000000; } .topbtmmargin { margin-top: 20px; margin-bottom: 20px; } .SidebarPadding { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } .FrontImage { border: 5px ridge #323232; float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 0px; } .FrontImageFltRgt { border: 5px ridge #323232; float: right; margin-left: 10px; margin-bottom: 10px; margin-top: 20px; } .mapRgt { float: right; padding-left: 5px; padding-bottom: 10px; border: none; } .sigRgt { float: right; padding-left: 5px; margin-right: 60px; padding-bottom: 10px; margin-top: 10px; } .textfntrgtcol { padding-left: 200px; font-size:12px; color:#000000; } .textfntlftcol { padding-right: 210px; font-size:12px; color:#000000; } .twoColFixLtHdr #container #mainContent ul li { list-style-type: none; list-style-position: outside; list-style-image: url(images/blackbullet.gif); } .leftpicture { border: 5px ridge #323232; position: absolute; z-index: 20; height: 140px; width: 180px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 210px; left: 150px; top: 326px; } img { border-style: none; } .grooveimg { border: groove; } #apDiv1 { position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px; visibility: visible; } #apDiv2 { position:absolute; width:155px; height:123px; z-index:2; left: 5px; top: 4px; visibility: visible; } #apDiv3 { position:absolute; width:335px; height:122px; z-index:3; left: 173px; top: 3px; visibility: visible; color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 { position:absolute; width:120px; height:45px; z-index:4; left: 390px; top: 105px; visibility: visible; } #apDiv5 { position:relative; width:200px; height:115px; z-index:5; } .menubarWrapper { background-color: #000; float: left; width: 100%; }Move the constructor for the menu bar up to read as follows
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
//-->
</script>
Gramps -
Spry Horizontal Menu problem in Safari Mac/Windows
Hello!
Has anyone run into a problem using a horizontal spry menu and it showing up corectly in Safari? The menu is centered but I cannot get the table to center underneath. I then wrapped the table in a div and center aligned it, after addeding a <br/> (just trying stuff to no avail.)
Here is a link to a site I am working on.
http://tesibridal.com/NEW/index.html
So far I have found it does not work in Safari 3.2.1/Mac & Safari 3.2.2 and gives me a whole new set of spacing problems in Explorer (which I will address all of those next).
Thank you in advance for your time.
~TMC
P.S. - Here is the CSS for the menu:
@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.MenuBarHorizontal
padding: 0;
list-style-type: none;
cursor: default;
width: 55em;
margin: auto;
/* 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: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FF0000;
text-align:center;
position: relative;
text-align: center;
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: 11px;
color:#000000;
background-color:#FF0000;
text-align:center;
z-index: 1020;
cursor: default;
width: 10.1em;
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: 10.1em;
/* 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:#000000;
border-style:solid;
border-width:1px;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FF0000;
color: #000000;
text-decoration: none;
border:#000000;
border-style:solid;
border-width:1px;
padding-top: 1em;
padding-right: 0em;
padding-bottom: 1em;
padding-left: 0em;
/* 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: #FF0000;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FF0000;
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.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;
/* 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: #FF0000;
Message was edited by: TMCDesign
Message was edited by: TMCDesignHi clead16,
What do you mean by "do not load properly in internet
explorer"? I checked the site in IE6 and IE7 and it the menus
render OK.
You may want to also take a look at the
Menu
Samples and
centering
a horizontal menu
on Adobe labs.
-- Florin -
Created a horizontal menu works great in all browsers but IE6, http://www.remodelersoutlet.com. I posted in the forum a couple of weeks ago but no response so I'm giving it another try. I think the problem is with visited links, but can't resolve. Here is the code and some screen shots of the error I'm seeing. Thanks for taking a look.
@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;
float: right;
/* 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: 5.6em;
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: 5.6em;
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: 5.6em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
width: 5.6em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFFFFF;
padding: 5px;
color: #333399;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
border: thin double #757B95;
/* 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: #333399;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
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.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;I added this to my code
<!--
a:link {
color: #FFFFFF;
a:hover {
color: #FFFFFF;
a:focus {
color: #FFFFFF;
a:active {
color: #FFFFFF;
-->
and it seems to have fixed my menu bar disppearing act. It was and a:focus, a:active (ie does not recognize) problem. Now my white text (links) throughout the site has turned purple and I can't figure that out where it is reading that from. Any suggestions? Thanks!
Maybe you are looking for
-
After using perl script, will produce three files 1. file .ctl 2. file .log 3. file .dis When using sqlloader to load file , error messages founds " file .dat cannot be found ". I see that the data that to loaded to table is on file .dis. I usually e
-
From-scratch minimalist backup implementation?
I have done backups since I first used a linux distro, and I've been using a self-designed python script that leverages rsync and LUKS to perform serial encrypted backups to several external drives. I derived the python code from a BASH script I wrot
-
Hi, This is my first DC based web dynpro application. I want to create a web dynpro DC (DC1) and use it in another (DC2). I'll describe exactly what I have done : 1. Created a new configuration file in the CBS build wizard. 2. Created a new DC, DC1,
-
Standard Proxy Deleted:Method To Restore
Hi guys, From the transaction code SPROXY, I was supposed to regenerate the standard proxy so that the changes made on the PI end for the same interface reflect in ECC as well. But my mistake I deleted the standard proxy and when I try to create the
-
Groupwise info missing on admin account
I caused this problem, and I'm trying to figure out if I have fixed it. When I try to open the properties of the admin user in ConsoleONE, I get a message that it can't open the Groupwise properties for the object. There is no Groupwise tab. Here's h