PDA

View Full Version : spry horizontal transparent bg & drop down color bg


jammer
03-02-2010, 03:37 AM
hey everyone,

just trying to figure out if its possible on the spry menus to keep the horizontal with a transparent background and the drop down menus a white background?
I have a gradient background for the horizontal menu and the drop down goes over the top of an image which makes the text hardly visible.
this is driving me nuts, ive been mucking around with the code for hours so any help would be greatly appreciated

jammer

DWcourse
03-02-2010, 05:03 AM
You need to add new style rule that applies only to the sub-menu links:

ul.MenuBarHorizontal ul a (notice the extra ul which applies the rule to lists within the main list - submenus)

You'll probably also need to add rules to cover other states of the submenu links such as:

ul.MenuBarHorizontal ul a:hover
ul.MenuBarHorizontal ul a:focus

jammer
03-02-2010, 07:04 AM
thank you that has fixed it, didn't realize i had to add a rule.
i have another problem now,
how do i center the text on the top horizontal and left align the text on the sub menu?

DWcourse
03-02-2010, 08:27 AM
Same principal:

ul.MenuBarHorizontal { text-align: center;}

ul.MenuBarHorizontal ul { text-align: left;}

jammer
03-02-2010, 10:34 AM
I tried that under a new rule and the existing rule and it did not work

DWcourse
03-02-2010, 02:59 PM
I'd need to see the page can you post it somewhere?

jammer
03-02-2010, 10:51 PM
@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
{
padding: 0;
list-style-type: none;
font-size: 10pt;
cursor: default;
width: auto;
font-family: Arial, Helvetica, sans-serif;
float: right;
margin-bottom: 0px;
margin-top: 125px;
font-weight: normal;
color: #FFF;
text-align: center
}
/* 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: 70px;
float: left;
color: #333;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #666;
color: #000;
text-align: left;
}
/* 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: 140px;
background-color: #666;
color: #000;
}
/* 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: auto;
text-align: left;
}
.header_spacer {
float: left;
height: 20px;
width: 900px;
}

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.25em 0.75em;
color: #FFF;
text-decoration: none;
text-align: left;

}
/* 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: #F30;
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: #F30;
: #FFF;;
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: ;
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: ;
background-repeat: no-repeat;
background-position: 95% 50%;
color: #FFF;
background-color: #666;
}
/* 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: ;
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: ;
background-repeat: no-repeat;
background-position: 95% 50%;
color: #FFF;
background-color: #2E365F;
}

ul.MenuBarHorizontal ul a:hover

{background-color: #2E365F;
}
ul.MenuBarHorizontal ul a:focus
{
}



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

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: #666;
}
}
.flash_box {
float: left;
height: 350px;
width: 900px;
background-image: url(../whiteflash_bg2.gif);
}

DWcourse
03-02-2010, 11:05 PM
try removing the text-align: center from the ul.MenuBarHorizontal li rule

and then text-align: left only once (in the ul.MenuBarHorizontal ul rule) should work

jammer
03-02-2010, 11:35 PM
thanks alot it worked!

just to be annoying one more time, is it possible to change the spry menu boxes individual width for both the top and submenu? tried setting it to auto and that did not achieve what i wanted

jammer

DWcourse
03-03-2010, 04:19 AM
Possible? Yes.

Something that is worth the effort of creating a number of custom style class rules and applying them to various parts of the menu. Not in my opinion.