Spry Menuleiste

[Scholle86]

Hi,
folgendes Problem:

Ich habe zwei horizontale Menüleisten erstellt.
In der SpryMenuBarHorizontal.css
habe ich die Einträge verdoppelt, um beide Menüleisten unabhängig voneinander gestalten zu können.
Also steht da:

ul.MenuBarHorizontal
{
	margin: 0;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 200px; <--
	padding-top: 130px; <--
}

und

#MenuBar2 ul.MenuBarHorizontal
{
	margin: 0;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 20px; <-- sollen z.B. so verändert werden
	padding-top: 20px; <-- sollen z.B. so verändert werden
}

allerdings greift die zweite Spry Menüleiste "MenuBar2" trotzdem noch auf

ul.MenuBarHorizontal
{
	margin: 0;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 200px; <--
	padding-top: 130px; <--
}

ohne "#MenuBar2 " zu!

Dadurch kann ich die padding werte der zweiten Menüleiste nicht anpassen ohne das ich gleichzeitig auch wieder die erste mitverändere!!

Kann mir da jemand helfen?

Ihr merkt schon ich bin nur absoluter anfänger in solchen Code Geschichten!

Gruß

[Scholle86]

Mh vllt versteht ihr mein Problem nicht!

Fang ich mal anders an:
Ich habe eine Spry Menüleiste eingebunden und soweit fertig formatiert!

Nun möchte ich auf meiner Homepage auf einer unterseite übersichtshalber noch eine weitere Spry Menüleiste einbinden.
Also schnelle auf Einfügen-->Spry Menüleiste fertig.
Jetzt sieht die Menüleiste allerdings genauso aus vom äußerlichen wie meine erste. Die Menüelemente sind natürlich verschieden!

Dadurch das ich die Padding Werte der ersten Menüleiste verändert habe, ist auch die zweite erstmal viel zu weit nach rechts gerückt.
Wie kann ich also die zweite Menüleiste unabhängig von der ersten verändern.

Normalerweise gehe ich in die css datei und füge dort z.B. so einen Eintrag hinzu:

#MenuBar2 a:hover, #MenuBar2 a:focus {
	background-color: #825226;
}

wodurch ich die hover-Farbe nur für die zweite Menüleiste verändern konnte.
Das gleiche wollte ich jetzt auch mit dem Punkt ul.MenuBarHorizontal machen, um die paddingwerte nur für die zweite Menüleiste zu verändern. Das klappt aber nicht!
Warum nicht?
Was mache ich falsch oder was habe ich nicht beachtet?

[wildmieze]

hmm .. ich hätte eigentlich schwören können, daß die Änderungen in #MenuBar2 ul.MenuBarHorizontal auch nur diese betreffen .. zumindest, solange sie im CSS UNTER den andere Anweisungen stehen .. aber wenn das nicht klappt ..
.. kannst Du den Klassennamen (MenuBarHorizontal) des zweiten Menüs ändern?

[Scholle86]

mh weiß jetzt nicht genau was ich ändern soll?

also mal hier die vollständige css datei

@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;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 200px;
	padding-top: 130px;
}
/* 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: 7.5em;
	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: 10px;
	z-index: 1020;
	cursor: default;
	width: 54em;
	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: 9em;
}
/* 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;
	color: #FFF;
	text-decoration: none;
	width: auto;
	padding-top: 0.5em;
	padding-right: 0em;
	padding-bottom: 0.5em;
	padding-left: 0em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}
/* 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: #360;

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

}

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

 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-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-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-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-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;
	}
}
#MenuBar2 ul.MenuBarHorizontal
{
	margin: 0;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 0px;
	padding-top: 0px;
}

#MenuBar2 a:hover, #MenuBar2 a:focus {
	background-color: #825226;
}

leider sind trotzdem die paddingwerte bei der zweiten Menüleiste auf 130px(top) und 200px(left)!
obwohl ich ja 0px angegeben habe!
bei dem hover mit der background-color klappt übrigens!!
irgendwie will er das nicht erkennen!

was genau soll ich jetzt mal ändern?

[wildmieze]

zeig mal den zugehörigen html-code ..

[Scholle86]

also jetzt ist das problem die menüleiste mit der id "MenuBar3"! :-D
Hab jetzt zwei Menüleisten die sich nur in der Farbe unterscheiden! Aber das ist egal!

Die "MenuBar3" erfüllt wie beschrieben nicht ihren zweck!
das verändern der paddingwerte in
#MenuBar3 ul.MenuBarHorizontal
hat keine auswirkungen auf die "MenuBar3"
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;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 200px;
	padding-top: 130px;
}
/* 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: 7.5em;
	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: 10px;
	z-index: 1020;
	cursor: default;
	width: 54em;
	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: 9em;
}
/* 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;
	color: #FFF;
	text-decoration: none;
	width: auto;
	padding-top: 0.5em;
	padding-right: 0em;
	padding-bottom: 0.5em;
	padding-left: 0em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}
/* 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: #360;

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

}

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

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

#MenuBar2 a:hover, #MenuBar2 a:focus {
	background-color: #825226;
}

#MenuBar3 ul.MenuBarHorizontal
{
	margin: 0;
	list-style-type: none;
	font-size: 12px;
	cursor: default;
	width: 100%;
	text-align: center;
	padding-left: 0px;
	padding-top: 0px;
}

html

<!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"><!-- InstanceBegin template="/Templates/hauptvorlage2.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Unbenanntes Dokument</title>
<!-- InstanceEndEditable -->
<link href="stylesheets/layoutbraun.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css"> 
/* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body class="twoColFixLtHdr">

<div id="container">
  <div id="header">
    <!-- end #header -->
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="News.html">News</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Saison 09/10</a>
        <ul>
          <li><a href="Kader.html">Kader</a></li>
          <li><a href="U16Kreisliga.html">U16 Kreisliga</a></li>
          <li><a href="Pokal.html">Pokal</a></li>
          <li><a href="Hallensaison.html">Hallensaison</a></li>
          <li><a href="Statistiken.html">Statistiken</a></li>
          <li><a href="Spielberichte.html">Spielberichte</a></li>
        </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Nostalgie</a>
        <ul>
          <li><a href="Saison_0809.html">Saison 08/09</a>          </li>
          <li><a href="Presseberichte.html">Presseberichte</a></li>
          <li><a href="Wiedererleben.html">Wiedererleben</a></li>
          <li><a href="Sonstiges.html">Sonstiges</a></li>
        </ul>
      </li>
      <li><a href="Bilder.html">Bilder</a></li>
      <li><a href="Forum.html">Forum</a></li>
      <li><a href="Gaestebuch.html">G&auml;stebuch</a></li>
      <li><a href="Kontakt.html">Kontakt</a></li>
      <li><a href="wm.html">WM-Tippspiel</a></li>
    </ul>
  </div>
  <div id="sidebar1"> <br />
    In Erinnerung an vergangene Zeiten
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    <!-- end #sidebar1 -->
  </div>
  <div id="mainContent"> <!-- InstanceBeginEditable name="main" -->
  Sonstiges<br />
  <ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a href="#" class="MenuBarItemSubmenu">Element 1</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Element 2</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Element 3</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Element 4</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
  </ul>
  <br />
  <script type="text/javascript">
<!--
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
  </script>
  <!-- InstanceEndEditable -->
<!-- end #mainContent --></div>
	<!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
  <div id="footer">
    <p>&nbsp;</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>

[wildmieze]

ahso .. ich glaub, ich sehs:

#MenuBar2 ul.MenuBarHorizontal denkt, daß die ul IN einem Element mit der ID "MenuBar2" steckt. Sie IST aber das Element mit der ID "MenuBar2".
Versuchs mal so:

ul#MenuBar2.MenuBarHorizontal {...}

[Scholle86]

auch wenn es die MenuBar3 jetzt ist! ;-)... es hat geklappt!!

Vielen Dank!

[wildmieze]

datt is die Hauptsache^^