Unpredictable
Threadersteller
Dabei seit: 11.05.2006
Ort: Siegen
Alter: 37
Geschlecht: 
|
Verfasst Mo 15.05.2006 11:54
Titel falsche Darstellung der Navigation |
  |
|
Hallo leute!
Ich hab ein kleines Problem, ich hab mir eine Navigation mit expanding menü programmiert.Wenn ich die in Dreamweaver 8 anzeigen lasse, ist alles okay, nur wenn ich dann die ganze Sache in Firefox oder IE öffne, stellt er in Firefox alles komplett falsch dar und bei IE muss ich erst pop-up fenster zu lassen. Wie kann ich erreichen, dass das alles richtig dargestellt wird?
| Code: |
<html>
<head>
<script type="text/javascript">
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
var activeMenu = null;
function showMenu(){
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
<style type="text/css">
<!--
#navi
{
float: left;
width: 150px;
height: 300px;
background-color: #cc0000;
padding: 0px;
margin: 0px;
background-repeat: no-repeat;
background-position: bottom;
}
#navi ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
#navi ul li
{
margin: 0px;
}
#navi ul li a
{
display: block;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 13px;
text-decoration: none;
font-size : 8pt;
font-family : Tahoma;
width: 177px;
font-weight: bold;
}
html>body #navi ul li a
{
width: auto;
}
li.active
{
background-color: #000066;
}
#######################################################
ul#menu
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu ol
{
display: none;
text-align: left;
list-style-type: none;
margin: 0;
}
ul#menu li,
ul#menu a
{
font-family: verdana, sans-serif;
font-size: 11px;
color: #FFFFFF
}
ul#menu li
{
border-bottom: none;
line-height: 15px;
}
ul#menu li.active
{
border-bottom: none;
line-height: 15px;
background-color: #000066;
}
ul#menu ol li:before
{
content: "- ";
}
ul#menu a
{
text-decoration: none;
outline: none;
}
ul#menu a.sub
{
background-color: #DBE9F3;
color: #000066;
}
ul#menu a:hover
{
background-color: #000066;
color: #FFFFFF;
}
ul#menu a:link
{
background-color: #fffff;
color: #FFFFFF;
}
ul#menu a.active
{
background-color: #000066;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="navi">
<ul id="menu">
<li><br />Home
<ol>
<li><a href="index.html" class="sub"><p class="hide">News</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Presse</p></a></li>
</ol>
</li>
<li style="display:block;"><br />Verein
<ol>
<li><a href="index.html" class="sub"><p class="hide">Geschichte</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Vorstand</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Termine</p></a></li>
</ol>
</li>
<li><br />Angebote
<ol>
<li><a href="index.html" class="sub"><p class="hide">Babyschwimmen</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Anfängerschwimmkurs</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Erwachsenenschwimmkurs</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Nachwuchsgruppen</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Breitensport</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Aqua - Fitness</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Leistungssport</p></a></li>
</ol>
</li>
<li><br />Seelbacher Weiher
<ol>
<li><a href="index.html" class="sub"><p class="hide">Geschichte</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Preise</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Presse</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Bilder</p></a></li>
</ol>
</li>
<li><br />Kontakt
<ol>
<li><a href="index.html" class="sub"><p class="hide">Kontakt</p></a></li>
<li><a href="index.html" class="sub"><p class="hide">Impressum</p></a></li>
</ol>
</li>
<br /><a href="downloads.html">Downloads</a>
<br /><a href="links.html">Links</a>
</ul>
</div>
</body>
</html>
|
|
|
Willkommen auf dem Portal für Mediengestalter
