+ Antworten
Ergebnis 1 bis 2 von 2

Thema: spry-menüleiste und hintergrundbilder

  1. #1
    TP-Member heiderdeify ist auf einem guten Weg
    Registriert seit
    Aug 2004
    Beiträge
    82

    spry-menüleiste und hintergrundbilder

    hallo zusammen
    hab probs mit spry-menüleiste (horizontal)
    ein container mit 3 menüpunkten
    element1 - element 3 - element 4
    das element 2 hat ein untermenü: "soso" und "lala"
    jetzt möchte ich nur unter das hauptmenü (element1 - element 3 - element 4) ein hintergrundbild legen. dieses soll aber NICHT im untermenü ("soso" und "lala") erscheinen
    das problem ist:
    das hintergrundbild erscheint überall d.h. hinter jedem menü/untermenü
    was mach ich da falsch ?
    code anbei
    css
    Code:
    ul.MenuBarHorizontal
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	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: center;
    	cursor: pointer;
    	width: 100px;
    	float: left;
    	height: 10px;
    }
    /* 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: 100px;
    	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: 100px;
    	height: 30px;
    }
    /* 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: #FEF3E4;
    	padding: 0.5em 0.75em;
    	color: #FFF;
    	text-decoration: none;
    	background-repeat: no-repeat;
    	background-image: url(../rot.jpg);
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	color: #FF0;
    }
    /* 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: #FEF3E4;
    	color: #FF0;
    	background-image: url(../rot.jpg);
    }
    
    
    /* 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-color: #FEF3E4;
    }
    /* 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-color: #0F9;
    }
    /* 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-color: #FEF3E4;
    	color: #FF0;
    }
    /* 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-color: #F99;
    }
    
    /*******************************************************************************
    
     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;
    	}
    }
    html
    Code:
    <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">soso</a>      </li>
          <li><a href="#">lala</a></li>
    </ul>
      </li>
      <li><a href="#">Element 4</a></li>
    </ul>
    <p>&nbsp; </p>
    
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

  2. #2
    TP-Newbie PKM925 macht alles soweit korrekt
    Registriert seit
    Oct 2011
    Beiträge
    2
    Hallo

    Ich habe das gleiche Problem. Hat schon jemand eine Lösung????

    VG

+ Antworten

Ähnliche Themen

  1. Spry Menüleiste falsche Anzeige im IE
    Von titanic31 im Forum Dreamweaver & andere Webeditoren
    Antworten: 3
    Letzter Beitrag: 15.04.2009, 23:49
  2. Dreamweaver CS3 Spry-Menüleiste Farbproblem
    Von timme im Forum Dreamweaver & andere Webeditoren
    Antworten: 5
    Letzter Beitrag: 10.03.2009, 10:51
  3. Spry Menüleiste mit eigenen Grafiken?
    Von bandchef im Forum Dreamweaver & andere Webeditoren
    Antworten: 7
    Letzter Beitrag: 09.01.2009, 09:50
  4. Spry-Menüleiste in einem Frame erstellen
    Von Martin_1983 im Forum Dreamweaver & andere Webeditoren
    Antworten: 3
    Letzter Beitrag: 07.10.2008, 17:06
  5. hintergrundbilder
    Von wuestensohn im Forum Flash & Multimedia
    Antworten: 4
    Letzter Beitrag: 04.12.2002, 13:58

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51