background images with spry "horizontal menu"
hi again
i trying work spry: "horizontal menu"
i want put background images menu bar not submenu
and problem: background images appears overall
what can ?
<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 active menu bar class, setting z-index accomodate ie rendering bug: http://therealcrisp.xs4all.nl/meuk/ie-zindexbug.html */
ul.menubaractive
{
z-index: 1000;
}
/* menu item containers, position children relative container , 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 parent (top: 0) higher z-index, off left side of 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 showing class designation menubarsubmenuvisible, set left auto comes onto screen below parent menu item */
ul.menubarhorizontal ul.menubarsubmenuvisible
{
left: auto;
}
/* menu item containers same fixed width parent */
ul.menubarhorizontal ul li
{
width: 100px;
height: 30px;
}
/* submenus should appear overlapping right (95%) , (-5%) */
ul.menubarhorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* submenu showing class designation menubarsubmenuvisible, set left 0 comes onto screen */
ul.menubarhorizontal ul.menubarsubmenuvisible ul.menubarsubmenuvisible
{
left: auto;
top: 0;
}
/*******************************************************************************
design information: describes color scheme, borders, fonts
*******************************************************************************/
/* submenu containers have borders on sides */
ul.menubarhorizontal ul
{
border: 1px solid #ccc;
}
/* menu items light gray block padding , 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 have mouse on or focus have blue background , white text */
ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus
{
color: #ff0;
}
/* menu items open submenus set menubaritemhover blue background , 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 submenu under given menu item
*******************************************************************************/
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenu
{
background-color: #fef3e4;
}
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenu
{
background-color: #0f9;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenuhover
{
background-color: #fef3e4;
color: #ff0;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far left (95%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenuhover
{
background-color: #f99;
}
/*******************************************************************************
browser hacks: hacks below should not changed unless expert
*******************************************************************************/
/* hack ie: make sure sub menus show above form controls, underlay each submenu iframe */
ul.menubarhorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* hack ie: stabilize appearance of menu items; slash in float keep ie 5.0 parsing */
@media screen, projection
{
ul.menubarhorizontal li.menubaritemie
{
display: inline;
f\loat: left;
background: #fff;
}
}
i'm not awfully familar spry css try giving top-level anchor class below (class="menubarbg")
<ul id="menubar1" class="menubarhorizontal">
<li><a href="#" class="menubarbg">element 1</a> </li>
then add new css selector existing css styles:
#menubar1 .menubarbg {
background-image: url(menubarbg.gif);
background-repeat: no-repeat;
}
might work, css spry menus bit overly complex in view. no new css needs go in , alter it.
pile of old donkies pooh, nothing new there adobe. expect company has little repect custommers, isn't it.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment