✔ Problem mit sprymenu

bettinacosta · 25. Januar 2009

Ich habe ein sprymenu mit Macromedia kreiert. Das Menu ist in eine .inc Datei die wird von verschiedene Seiten angerufen. In index.php (die Hauptseite) wird aufgerufen und richtig angezeigt. In anderen Seiten (die die werden von index.php aufgerufen) wird die submenu nicht angezeigt. In Quellcode sieht man alles. Kannst es sein dass es an die Layer Position liegt (z-index) ?
Vielen Dank im voraus
Bettina

Maik · 25. Januar 2009

Hi,

ist die Seite online erreichbar, um dort mal einen Blick reinwerfen zu können?

mfg Maik

bettinacosta · 25. Januar 2009

Die Seite mit diesem Menu ist nicht online. Dieses Menu mit Macromedia habe ich jetzt gemacht. Ursprünglich war es ein Menu mit Fireworks. Dieses ist unter http://www.sp.coaster.ch zu sehen (Sportanlagen). Das Problem ist, dass das Menu mit Fireworks nicht ganz fix ist (von meinem Rechner sieht alles toll aus, von einem anderen ganz verschoben. Drum habe ich gedacht, ich mache etwas anderes und habe dieses Sprymenu endeckt. Ich darf diese Änderung nicht hinzufügen, da die Seite wird gerade getestet.
Gruss
Bettina

Maik · 25. Januar 2009

Was die vermeintliche Verschiebung des Submenüs betrifft, solltest du zunächst innerhalb der Tabellenzelle für einen validen HTML-Code sorgen, denn die rotmarkierten Passagen haben innerhalb des (ersten) Dokumentkörpers <body> ... </body> nichts verloren:

Code:

<td class="navigation" colspan="4">
		<a href="index.php" class="navigation_link">HOME</a>
    	<a href="executive_committee.php" class="navigation_link">VORSTAND</a>
<html>
<head>
<title>menu.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">

<script language="JavaScript">
<!--
function mmLoadMenus() {
  if (window.mm_menu_0820222138_0) return;
  window.mm_menu_0820222138_0 = new Menu("root",107,32,"Verdana,Arial,Helvetica,sans-serif",10,"#FFFFFF","#000000","#000000","#FFFFFF","center","middle",4,0,1000,-5,7,true,false,true,0,false,false);
  mm_menu_0820222138_0.addMenuItem("St. JOHANN","window.open('sports_facilities.php?key_sport_facilities=1', '_self');");
  mm_menu_0820222138_0.addMenuItem("LANDAUER","window.open('sports_facilities.php?key_sport_facilities=2', '_self');");
  mm_menu_0820222138_0.fontWeight="normal";
  mm_menu_0820222138_0.hideOnMouseOut=true;
  mm_menu_0820222138_0.menuBorder=0;
  mm_menu_0820222138_0.menuLiteBgColor='#FFFFFF';
  mm_menu_0820222138_0.menuBorderBgColor='#555555';
  mm_menu_0820222138_0.bgColor='#555555';
  mm_menu_0820222138_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
</head>
<body bgcolor="#FFFFFF">
<script language="JavaScript1.2">mmLoadMenus();</script>
		<a href="#" class="navigation_link" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0820222138_0,360,159,null,'menu');">SPORTANLAGEN</a>
</body>
</html>    	<a href="download.php?key_page=1" class="navigation_link">DOWNLOAD</a>
	</td>

mfg Maik

bettinacosta · 25. Januar 2009

Ok. Die rotmarkierte Passagen habe ich weggenommen.
Jetzt habe ich "align links" gemacht (anstatt center), jede Item vom Menu in einem Zell getan (<td>) und z.B. eine feste Breite eingegeben (z.B. 150px), dann habe ich das Submenu auf 310 posisioniert (10 von padding, 2x150 von die erste 2 Items im Menu).
Aber ich würde gerne wissen, wieso ein sprymenu nur in die erste Seite funktioniert....
Schöne Grüsse
Bettina

Maik · 26. Januar 2009

bettinacosta hat gesagt.:
Aber ich würde gerne wissen, wieso ein sprymenu nur in die erste Seite funktioniert....

Hi,

und wie sollen wir auf diese Frage näher eingehen, wenn du hier keinen Einblick in den Quellcode (HTML & CSS) der Haupt- und Unterseite mit dem Sprymenu gewährst?

Wir können alles, außer hellsehen!

mfg Maik

bettinacosta · 26. Januar 2009

Hier sind die Quellcodes:

1) index.php (hier funktioniert das Menu richtig.

PHP:

<?
ob_start();
session_start();
define("DEFAULT_LANG", "ge");
if (isset($_GET["lang"])) {
	$_SESSION["lang"] = $_GET["lang"];
} else if (!isset($_SESSION["lang"])) {
	$_SESSION["lang"] = DEFAULT_LANG;
}
$lang = $_SESSION["lang"];
require("lang.{$lang}.inc.php");
include("connection_db.php");
?>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="author" content="Bettina Costa">
<meta name="keywords" content="Sportclub, Sportklub, sports club, Novartis">
<meta name="descriptions" content="Sportclub Novartis">
<meta name="robots" content="index,follow">
<title><? echo $sportclub_novartis ?></title>
</head>
<body topmargin="0">
<center>
<table cellpadding="0" cellspacing="0" class="wide_table">
<?
	include("banner.inc");
	include("main_navigation.inc"); => hier wird die Navigation bar aufgerufen.
?>	
</table>	
<table cellpadding="0" cellspacing="0" class="wide_table">	
	<tr>
		<td class="main_table" valign="top">
			<table cellpadding="0" cellspacing="0">
				<tr><td class="photo"><img src="sections/GENERAL/animation.gif" height="200" width="648"></td></tr>
				<tr>
					<td class="main_content">
						<h1><? echo $main_heading ?></h1>
      					<? echo $main_text ?>
    					<h2><? echo $sportclub_novartis ?></h2>
					</td>
				</tr>
  			</table>
		</td>
		<td></td>
		<td class="menu" valign="top">
<?
			include("menu_sections.inc");
			include("search.inc");
?>	
		</td>
	</tr>
	<tr><td class="x_separator" colspan="4"></td></tr> 
<?
	include("bottom.inc");
?>	
</table>
</center>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

2) main_navigation.inc

PHP:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<tr>
	<td class="navigation" colspan="4">
		<ul id="MenuBar1" class="MenuBarHorizontal">
		  <li><a class="MenuBarItemSubmenu" href="index.php"><? echo $navigation_item_0 ?></a></li>
		  <li><a href="executive_committee.php"><? echo $navigation_item_1 ?></a></li>
		  <li><a class="MenuBarItemSubmenu" href="#"><? echo $navigation_item_2 ?></a>
		    <ul>
		      <li><a class="MenuBarItemSubmenu" href="sports_facilities.php?key_sport_facilities=1"><? echo $club_name_1 ?></a></li>
		      <li><a href="sports_facilities.php?key_sport_facilities=2"><? echo $club_name_2 ?></a></li>
	        </ul>
	      </li>
		  <li><a href="download.php?key_page=1"><? echo $navigation_item_3 ?></a></li>
		  </ul>
	</td>
</tr>
<tr><td class="x_separator" colspan="4"></td></tr>

3) download.php => hier wird main_navigation.inc auch aufgerufen. Man sieht das Popup Menu unter Sportanlagen aber nicht.

PHP:

<?
ob_start();
session_start();
define("DEFAULT_LANG", "ge");
if (isset($_GET["lang"])) {
	$_SESSION["lang"] = $_GET["lang"];
} else if (!isset($_SESSION["lang"])) {
	$_SESSION["lang"] = DEFAULT_LANG;
}
$lang = $_SESSION["lang"];
define("DEFAULT_KEY_PAGE", "");
if (isset($_GET["key_page"])) {
	$_SESSION["key_page"] = $_GET["key_page"];
} else if (!isset($_SESSION["key_page"])) {
	$_SESSION["key_page"] = DEFAULT_KEY_PAGE;
}
$key_page = $_SESSION["key_page"];
if ($key_page == 1) {
	$key_sport_id = "GEN";
} else {	
	define("DEFAULT_KEY_SPORT_ID", "");
	if (isset($_GET["key_sport_id"])) {
		$_SESSION["key_sport_id"] = $_GET["key_sport_id"];
	} else if (!isset($_SESSION["key_sport_id"])) {
		$_SESSION["key_sport_id"] = DEFAULT_KEY_SPORT_ID;
	}
	$key_sport_id = $_SESSION["key_sport_id"];
}
require("lang.{$lang}.inc.php");
include("connection_db.php");
?>
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta name="author" content="Bettina Costa">
<meta name="keywords" content="Sportclub, Sportklub, sports club, Novartis">
<meta name="descriptions" content="Sportclub Novartis">
<meta name="robots" content="index,follow">
<title><? echo $sportclub_novartis ?></title>
</head>
<body topmargin="0">
<center>
<table cellpadding="0" cellspacing="0" class="wide_table">
<?
	include("banner.inc");
	include("main_navigation.inc");
?>	
</table>	
<table cellpadding="0" cellspacing="0" class="wide_table">	
	<tr>
		<td class="main_table" valign="top">
			<table cellpadding="0" cellspacing="0">
<?
....................

4) Hier ist die Stylesheet:

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;
	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: left;
	cursor: pointer;
	width: 8em;
	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: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.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
{
	width: 8.2em;
}
/* 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: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	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: #33C;
	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: #33C;
	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%;
}
/* 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;
		f\loat: left;
		background: #FFF;
	}
}

Any ideas? Danke im Voraus.
Bettina

Maik · 26. Januar 2009

Und wenn du mal zu Testzwecken diese beiden Zeilen

Code:

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

aus main_navigation.inc herausnimmst, und sie stattdessen im Header der Seiten aufrufst, so wie es üblich ist?

mfg Maik

bettinacosta · 26. Januar 2009

Genau so war ursprünchlich und hat es auch nicht funktioniert. Drum habe ich rausgenommen und in main_navigation.inc hinzugefügt.

Maik · 26. Januar 2009

Dann stell mal die Seite online, damit man sie sich live anschauen kann.

mfg Maik

✔ Problem mit sprymenu

bettinacosta

Grünschnabel

Maik

bettinacosta

Grünschnabel

Maik

bettinacosta

Grünschnabel

Maik

bettinacosta

Grünschnabel

Maik

bettinacosta

Grünschnabel

Maik

Neue Beiträge