mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 01:10 Benutzername: Passwort: Auto-Login

Thema: falsche Darstellung der Navigation vom 15.05.2006

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> falsche Darstellung der Navigation
Autor Nachricht
Unpredictable
Threadersteller

Dabei seit: 11.05.2006
Ort: Siegen
Alter: 37
Geschlecht: Männlich
Verfasst Mo 15.05.2006 10:54
Titel

falsche Darstellung der Navigation

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Ähnliche Themen [CSS] Falsche Darstellung unter IE6 + IE5.5
Tabelle mit 100% im IE falsche Darstellung
CSS Navigation - Darstellung im IE
[ERLEDIGT] [PHP] Falsche Darstellung von String
Div-Tag mit CSS formatieren - falsche Darstellung auf Safari
falsche Darstellung im Internet Explorer
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.