Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Spry Meny Formatting (http://www.dreamweaverclub.com/forum//showthread.php?t=38262)

azzzu 12-08-2010 12:34 AM

Spry Meny Formatting
 
Hi

I am having many issues with this.

Basically i want to create a menu with four top level items and some of these have sub items.

I need the entire menu bar be the width of the page, so i changed width to 100% and that seems to work

However i want the submenus to open up downward and be the size of the top level menu item it belongs to, so i thought changing to 25% would do it, but it does not. My menu is totally messed up now.

If i wanted to change the background color, hover colour (of both top level and submenu items), and the width size of top level and submenu items and make the entire bar fit into the width of the page. Which CSS should i touch and what properties in them?

Thank you!

DWcourse 12-08-2010 04:06 AM

A link would help but you probably want the submenus to be 100% (of the width of the top level menu item).

azzzu 12-08-2010 06:54 AM

Hi!

Thanks,
i did try that but it's all screwed up. My link is www.ecokala.com

Here is the code I have, some things i switched around


Thanks much for your help.


/* 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: 100%;
background-color: #4A0700;
}
/* 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: 80%;
position: relative;
text-align: center;
cursor: pointer;
width: 8.2em;
float: left;
font-weight: bold;
display: inline;
}
/* 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: circle;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: 0%;
display: inline;
}
/* 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;
display: inline;
}
/* 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: #4A0700;
padding: 0.5em 0.75em;
color: #FFF;
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: #63732D;
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: #63732D;
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%;
text-align: center;
font-size: 100%;
}
/* 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;
float: left;
background: #FFF;
}
}

gentleone 12-08-2010 11:16 AM

Just like DWcource said. If you change in your CSS width: 8.2em; to width: 100%; then you're getting pretty close what you're after.

DWcourse 12-08-2010 02:57 PM

ul.MenuBarHorizontal li should be 25% (each of the four list items will be 25% of the width of ul.MenuBarHorizontal).

ul.MenuBarHorizontal ul should be 100% (the width of the list item - ul.MenuBarHorizontal li - that contains it)

ul.MenuBarHorizontal ul li should also be 100% (the width of the submenu: ul.MenuBarHorizontal ul)

azzzu 12-08-2010 05:37 PM

thank you, I had done this but while it works in firefox, it does not work in IE.
The submenus come out disaligned unlike in Firefox. Any ideas? I have put it back to that so you can see what i mean
www.ecokala.com

thanks!

DWcourse 12-08-2010 05:58 PM

yeah, IE sucks!

You'll need to use an absolute width (px, ems, etc.) for ul.MenuBarHorizontal ul. That won't match the width of the menu items above but it's probably the easiest solution.

Otherwise you have two options:

1. Insert an IE specific CSS hack
2. Use a conditional, IE only style sheet

There's some info here: http://css-tricks.com/how-to-create-...ly-stylesheet/

azzzu 12-08-2010 07:34 PM

i am not taht advanced to try the conditional IE sheet.
I tried the first advice to change to em , this helps with size but not positioning, submenus still show far off.

DWcourse 12-08-2010 08:00 PM

Well the only other guess I have is that you've added the display: inline property to a number of rules. That might be affecting IE.

Also, in this rule:

Code:

/* 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;
        }
}

You seem to have deleted the backslash from f\loat. I don't think that's your issue though.


All times are GMT. The time now is 11:48 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com