Immer noch Navigation

epfan

Hi

meine site ist schon zu 60% fertig, aber ich bin seit dast einem Monat nach einer passen Navigation, habe schon mehrers ausprobiert doch vergeblich. Ich bin so langsam am verzweifeln und habe schon überlegt ob ich meine site umstellen soll, so das eine einfache Navigation zu ihr passt.
So, jetzt mein letzter Anlauf:
ich suche eine horizontale navigation mit aufklabarem Untermenüs und mit der ich meine eigenen Schaltflächen benutzen kann.

Bitte Bitte helft mir...

T0b3

Wie sollen wir das anstellen? o_O

Der Link in deiner Signatur funzt nicht.

epfan

da ich nicht extra ein neues Thema öffnen will, poste ich euch mein kleines Problem einfach hier.

Hab jetzt eine Navigation gefunden, aber habe 2 Pobleme:

1. Problem: wenn man es mit Mozilla anschaut, ist alles doppelt.
2. Problem: wenn man es mit dem IE anschaut, was sollen dann diese grauen Bereiche.

Hier die Navigation: http://epfan.ihzekuh.de

Was muss ich also tun um die Probleme zu beheben:

Falls es hilft hier der quelltext:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test navi</title>
<style type="text/css">
  body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #0066CC;
  }


  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: px solid black;
    background-color: 0066CC;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }


  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }


  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }


  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 9em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: #FFCC00; border-top-color: #FFCC00; border-bottom-color: #FFCC00; border-right-color: #FFCC00;
    color: #FFCC00; background-color: #0000FF;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 9em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: FFCC00;
    border-left-color: FFCC00; border-top-color: FFCC00; border-bottom-color: FFCC00; border-right-color: FFCC00;
    color: FFCC00; background-color: #3300CC;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }


</style>


<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }


  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }


  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }


  window.onload=hoverIE;
}
</script>


</head>
<body>


  <div id="Rahmen" style="width: 988px; height: 92px"><ul id="Navigation">
    [*][url='#Beispiel']Überblick[/url]


    [*][url='#Beispiel']Park[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url='#Beispiel']Attraktionen[/url]
        [*][url='#Beispiel']Shows[/url]
        [*][url='#Beispiel']Themenbereiche[/url]
        [*][url='#Beispiel']Shopping[/url]
        [*][url='#Beispiel']Gastronomie[/url]
      [/list]



    [*][url='#Beispiel']Infos[/url]
    <ul style="position: absolute; left: -24px; top: 27px">
        [*][url='#Beispiel']Eintrittspreise[/url]
        [*][url='#Beispiel']Wetter[/url]
        [*][url='#Beispiel']Events[/url]
        [*][url='#Beispiel']Öffnungszeiten[/url]
        [*][url='#Beispiel']Anfahrt[/url]
        [*][url='#Beispiel']Tipps[/url]
      [/list]





    [*][url='#Beispiel']Sonstiges[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url='#Beispiel']Forum[/url]
        [*][url='#Beispiel']Fans[/url]
        [*][url='#Beispiel']EP im TV[/url]
        [*][url='#Beispiel']Downloads[/url]
        [*][url='#Beispiel']Webcam[/url]
        [/list]



    [*][url='#Beispiel']Impressum[/url]
      <ul style="position: absolute; left: -24px; top: 27px">
        [*][url='#Beispiel']Gästebuch[/url]
        [*][url='#Beispiel']Kontakt[/url]
        [*][url='#Beispiel']Webmaster[/url]
        [*][url='#Beispiel']Links[/url]
        [/list]







</body>
</html>

Alles anzeigen

epfan

also das Problem mit dem IE habe ich jetzt gelöst.
Aber das mit Mozilla... bleibt.

Nochmal:
Warum sieht meine navigation bei zb, Mozilla so komisch aus ???
Was kann ich tun um diesen Fehler zu beheben.
Meine Navigation: http://epfan.ihzekuh.de

testmaso

Hi,

probier mal
http://www.cssplay.co.uk/menus/dd_valid.html

funktioniert in allen gängigen Browsern, ohne Javascript!, nur mittels CSS.
Es werden 2 CSS-Dateien benötigt. Beide extern. Eine davon, für den IE, über conditional comment eingebunden.

epfan

Danke für den tollen Tipp.
Sieht cool aus.
Aber laut copyright darf ich die Navi nur benutzen wenn ich schön werbung für die Site mache, das hatte ich eigentlich nicht vor, aber Trotsdem danke.

So, mein alts Problem bleibt aber.

Bitte Bitte Bitte helft mit

Tags