DW "Positionierung von horizontaler Spry Menüleiste"

flashmaus

Mitglied
hallo
hab in ein "nav div" eine horizontale Spry Menüleiste eingebaut
einzige Veränderung:
“ul.MenuBarHorizontal li” : Float Right anstatt Left.
wie kann ich in diesem "nativen" Menü die Breite der Menüeinträge ändern ?
es handelt sich um 4 Menüpunkte.
danke
 
Zuletzt bearbeitet:

flashmaus

Mitglied
danke für die schnelle Antwort
hab das jetzt gemach, hat funktioniert bis auf eines:
das menu-item hat 6 em
das submenu-item hat 6,2 em
wenn man jetzt die submenus "überfährt" dann ist die hintergrundfarbe genauso breit wie die Hintergrundfarbe der Hauptmenu-items und sie müsste eigentlich etwas breiter sein (6.2 em)
 
M

Maik

Aus der Beschreibung ist die Ursache nicht ersichtlich.

Steht die Seite irgendwo online zur Verfügung, um dort einen Blick drauf werfen zu können?

mfg Maik
 

flashmaus

Mitglied
tut mir leid, leider nicht
hier der code der css
Code:
@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: 90%;
	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: left;
	cursor: pointer;
	width: 6em;
	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: 6.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
{
	float: none;
}
/* 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: #FCF6E8;
	color: #333;
	text-decoration: none;
	text-align: left;
	padding-top: 0.5em;
	padding-right: 0.75em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #F30;
}
/* 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: #F60;
	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: #F90;
	color: #FFF;
}

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

 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;
	}
}
 
M

Maik

Erweiter mal das Stylesheet mit dieser Regel:
CSS:
ul.MenuBarHorizontal ul a { width:4.65em; }

mfg Maik
 

flashmaus

Mitglied
vielen dank, hab das unter
ul.MenuBarHorizontal ul { width:4.65em; }
eingetragen
das meintest Du doch ?
nur, dann sind alle "hover" gleich gross
ich möchte aber dass die Untermenüs schon 6.2 em besitzen und dass das "Drüberfahren" auch diese 6.2 em bringt
 
M

Maik

Die Regel soll für die Links der zweiten Menüebene (Submenüs) gelten - bei dir fehlt aber im Selektor am Ende das a-Element.

mfg Maik
 
M

Maik

Das ist doch jetzt kein Hexenwerk:
Code:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
        display: block;
        cursor: pointer;
        background-color: #FCF6E8;
        color: #333;
        text-decoration: none;
        text-align: left;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        border-left-width: thin;
        border-left-style: solid;
        border-left-color: #F30;
}

ul.MenuBarHorizontal ul a { width:4.65em; }


mfg Maik
 

Neue Beiträge