✔ Die (vermutlich) kleinen Probleme eines Anfängers

N

Necris

Grünschnabel
Hallo Allerseits.

Ich (blutiger Anfänger) habe da mal ein vermutlich sehr einfaches Problem.
Ich bastel derzeitig an einer Seite. den Anfang habe ich auch hinbekommen.(glaube ich zumindest):-)
Beim Menü bin ich dann aber gescheitert. Also habe ich versucht , das Menü mit Dreamweaver einzufügen. Im FF klappt es auch. Nur im IE nicht. (Problem ist auf den Bildern zu erkennen)
Nu weiß ich absolut nicht mehr weiter. Ich habe schon diverse Ratschläge, die ich in anderen Themen gefunden habe auszuprobieren, jedoch ohne Erfolg. Meine Hoffnung ist nun, das mich jemand von Euch auf den richtigen Weg bringen kann.
Hier der HTML-Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../MeineWebsite3/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../MeineWebsite3/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Stil1 {font-family: Arial, Helvetica, sans-serif}
.Stil3 {font-family: Arial, Helvetica, sans-serif;font-size: 90%;}
.Stil4 {font-size: 90%}
.Stil5 {font-family: Arial, Helvetica, sans-serif; font-size: 90%; }
-->
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
	<tr>
		<td height="149" valign="middle" bgcolor="#B8C5CE">
	      <table width="800" height="600" border="0" align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td width="800" height="600" background="../MeineWebsite3/Bilder/Hintergrung.jpg" valign="top">
			<img border="0" src="http://www.tutorials.de/forum/MeineWebsite3/Bilder/SHE Solution400x82.jpg" width="400" height="82" align="top" valign="top">
			<ul id="MenuBar1" class="MenuBarVertical">
			  <li><a href="#" class="Stil1 MenuBarActive Stil4">Home</a></li>
			  <li><a href="#" class="MenuBarItemSubmenu Stil1 Stil4">Produkte</a>
			      <ul>
			        <li><a href="#" class="Stil5">SHE-Rescue Lift</a></li>
			        <li><a href="#" class="Stil5">SHE-Climbtec</a></li>
			        <li><a href="#" class="Stil5">SHE-Rescue Barrel</a></li>
		        </ul>
		      </li>
			  <li><a href="#" class="Stil5">Dienstleistung</a></li>
			  <li><a href="#" class="MenuBarItemSubmenu Stil1 Stil4">News / Events</a>
		        <ul>
		          <li><a href="#" class="Stil3">News</a></li>
			        <li><a href="#" class="Stil3">Events</a></li>
		        </ul>
		      </li>
			  <li><a href="#" class="Stil5">Kontakt</a></li>
			  <li><a href="#" class="Stil5">Impressum</a></li>
			</ul>
			</td>
	    </tr>
		</table>
		</td>
  </tr>
</table>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>

</html>
und hier der aus der CSS Datei:
CSS: 
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 80%;
	cursor: default;
	width: 8px;
}
/* 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 same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: auto;
	width: 110px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
	margin: 0% 0 0 95%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 50px;
	top: 0;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 120px;
	float: none;
	background-color: transparent;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: transparent;
	background-color: transparent;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: px solid #CCC;
	background-color: transparent;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: text;
	background-color: transparent;
	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.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	display: block;
	background-color: transparent;
	background: transparent;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	color: #0080FF;
}

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

 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.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: transparent;
	display: block;
}

/* 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.MenuBarVertical 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.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
}
/* 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.MenuBarVertical li.MenuBarItemIE
	{
	display: block;
	f\loat: left;
	background: Transparent;
	}
}
Da ich leider nicht weiß, ob es ein CSS- oder ein HTML Problem ist, hab ich es mal hier hinein geschrieben.

Für Hilfe wäre ich sehr dankbar.

Bis dann
 

Anhänge

  • FF.jpg
    FF.jpg
    33,9 KB · Aufrufe: 16
  • IE7.jpg
    IE7.jpg
    26,8 KB · Aufrufe: 31
Hi,

ist die Seite online erreichbar?

Ansonsten lad hier bitte mal die Script-Datei "SpryMenuBar.js" hoch, damit das Menü zu Testzwecken in den Browsern auch funktional genutzt werden kann.

mfg Maik
 
Oh,Sorry

kommt sofort

Javascript: 
var Spry;
if(!Spry)
{
	Spry = {};
}
if(!Spry.Widget)
{
	Spry.Widget = {};
}

// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);

	// represents the current (sub)menu we are operating on
	this.currMenu = null;

	var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
	{
		// bail on older unsupported browsers
		return;
	}

	// load hover images now
	if(opts)
	{
		for(var k in opts)
		{
			var rollover = new Image;
			rollover.src = opts[k];
		}
	}

	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			this.initialize(items[i], element, isie);
			if(isie)
			{
				this.addClassName(items[i], "MenuBarItemIE");
				items[i].style.position = "static";
			}
		}
		if(isie)
		{
			if(this.hasClassName(this.element, "MenuBarVertical"))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
	{
		return false;
	}
	return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};

// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'javascript:false;';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};

// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = menu.parentNode.getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};

// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
	{
		this.hideSubmenu(menus[i]);
	}
	this.removeClassName(this.element, "MenuBarActive");
};

// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};

// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	
	if(menu)
	{
		this.addClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(typeof document.uniqueID != "undefined")
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, "MenuBarActive");
};

// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		this.removeIframeLayer(menu);
	}
};

// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);

	var hasSubMenu = false;
	if(menu)
	{
		this.addClassName(link, "MenuBarItemSubmenu");
		hasSubMenu = true;
	}

	if(!isie)
	{
		// define a simple function that comes standard in IE to determine
		// if a node is within another node
		listitem.contains = function(testNode)
		{
			// this refers to the list item
			if(testNode == null)
			{
				return false;
			}
			if(testNode == this)
			{
				return true;
			}
			else
			{
				return this.contains(testNode.parentNode);
			}
		};
	}
	
	// need to save this for scope further down
	var self = this;

	this.addEventListener(listitem, 'mouseover', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}
		clearTimeout(closetime);
		if(self.currMenu == listitem)
		{
			self.currMenu = null;
		}
		// show menu highlighting
		self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
		if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
		{
			opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
		}
	}, false);

	this.addEventListener(listitem, 'mouseout', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}

		var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
		if(!listitem.contains(related))
		{
			clearTimeout(opentime);
			self.currMenu = listitem;

			// remove menu highlighting
			self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
			if(menu)
			{
				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
			}
		}
	}, false);
};
 
Mit einer entsprechenden Breitenerhöhung wird das Submenü bei mir im IE korrekt ausgerichtet:

Code: 
ul.MenuBarVertical ul
{
margin: 0% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 110px;
top: 0;
left: -1000em;
}


mfg Maik
 
hmm, stimmt. Die Ausrichtung passt nun, aber ich hab in meinem IE leider immernoch nen weißes Kästchen. :(
Hättest du da vielleicht auch noch eine Idee?
 
Das weiße "Kästchen" ist ein im JS-Code generierter iFrame, den IEs grundsätzlich nicht transparent darstellen, wie die übrigen Browser.

Code: 
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 0px solid #CCC;
background-color: transparent;
}
Wenn du hier stattdessen den Hintergrund "#B8C5CE" der umgebenden Tabellenzelle wählst, erscheint das Submenü "durchsichtig".

mfg Maik
 
Super.

Danke dir Maik.

Ich verrate dir jetzt lieber nicht, wie lange ich schon an diesem Problem gesessen hab. :-):-)
 
Hallo nochmal.
Ich muss leider nochmals ne kleine Frage vom Stapel lassen.

Das mit der Transparenz hab ich jetzt verstanden, aber ich habe leider ein neues Problem.
Die Seite soll später so aussehen, das das Hintergrundbild und alles was darauf liegt,
mittig sitzt. Sowohl Vertikal als auch Horizontal.
Wenn ich die Seite in der Vorschau anschaue, ist´s im IE alles mittig bis auf das Menü.(Auflösung 1680x1050) Das sitzt viel zu hoch.
Im FF sitzt die Seite komplett am oberen Rand.

In beiden Browsern ist´s also falsch dargestellt. Meiner Meinung nach, kann es nur an der Positionierung des Menü´s liegen.
Ich habe auch schon versucht das zu verändern, jedoch sah es danach noch schlimmer aus als vorher.
Hat da jemand vielleicht auch noch ne Idee zu?

Danke schonmal im vorraus.

MfG Matthias
 
Das Menü lässt sich innerhalb der Tabellenzelle auf diese Weise horizontal zentrieren:

Code: 
ul.MenuBarVertical
{
margin: 0 auto;
padding: 0;
list-style-type: none;
font-size: 80%;
cursor: default;
width: 8px;
}


Ob hier die deklarierte 8px-Breite so richtig ist, wirst du vermutlich besser wissen :-)

Zur horizontalen und vertikalen Zentrierung hab ich erst heute Nachmittag in dem Thema Container mit Text in Browserfenstermitte Platzieren ein paar Beispiele zur technischen Umsetzung empfohlen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück