• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

navigationsleiste mag nicht so, wie ich will

C

cyberoner1

Neues Mitglied
hallo, ich mal wieder :)

bin ja jetzt schon einen ganzen schritt weiter gekommen und habe mich an das Thema Menü gewagt. Sieht im IE7 ja schon ganz ordentlich aus, aber im Firefox geht das garnicht....


RDG - Ring Deutscher Gutachter GmbH
hier mal der code

css:
Code: 
body {
 margin: 0;
 padding:0;
 width: 100%;
 height:100%;
 background-color:#bec7fe;
}

#background {
 margin: 10px auto;
 width: 990px;
 height:800px;
 background-image:url(http://cyberoner1.kilu.de/rdg/images/bg1.JPG);
 background-repeat:no-repeat;
}


#leiste_oben {
 background-color:#000080;
 width:990px;
 margin:20px auto;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-style: italic;
 color: #ffffff;
 font-size: 17px;
 word-spacing:10px;
}

#leiste_unten {
 background-color:#000080;
 width:990px;
 margin:520px auto;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-style: italic;
 color: #ffffff;
 font-size: 14px;
 height: 22px;
 
 }
 
div#Rahmen {
    width: 990px;
    
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 990px;
    w\idth: 990px;
  }
  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: center;
    margin: 3px; padding: 1px;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -5px;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0px;
  }

  ul#Navigation li ul {
margin: 0px; padding-top: -6.1em;
    position: center;
    top: 19px; left: 1.7em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:-0.1em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 5.2em;
  }

  ul#Navigation a, ul#Navigation span {
    
    width: 157px;  /* Breite den in li enthaltenen Elementen zuweisen */
    
    text-decoration: none; font-weight: bold;
    
    border-left-color: white; border-top-color: white;
    color: #ffffff; background-color: #000080;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 157px;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth:157px;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: silver;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #000080; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: silver;
  }

und der html:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    

    
     <link rel="stylesheet" type="text/css" href="stylesheet1.css"/>
    

<title>notitle</title>
<meta name="audience" content="alle" />


</head>

<body>
                    
 <div id="background">
 <div id="leiste_oben">Experten-Suche Rechtsanwälte Sachverständige Gutachter Bau-Gutachter KFZ-Gutachter Medizin-Gutachter etc.</div>
 <div id="leiste_unten">
 
  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Über&nbsp;uns</a></li>

    <li><a href="#Beispiel">Expertensuche</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">SV-Fortbildung</a></li>

    <li><a id="aktuell" href="#Beispiel">RDG-Werbemaßnahme</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">RDG-Shop</a></li>
    <li><a href="#Beispiel">Gerichts-Urteile</a></li>
    <li><a href="#Beispiel">Registrierung</a></li>
    <li><a href="#Beispiel">Login</a></li>
    <li><a href="#Beispiel">Partner</a></li>
    <li><a href="#Beispiel">Rechtliches</a></li>
  </ul><div></div></div>

 <!--
   <ul id="Navigation">
    <li><a href="#Beispiel">Über&nbsp;uns</a></li>
    <li><a href="#Beispiel">Expertensuche</a></li>
    <li><a href="#Beispiel">SV-Fortbildung</a></li>
    <li><a href="#Beispiel">RDG-Werbemaßnahme</a></li>
    <li><a href="#Beispiel">RDG-Shop</a></li>
    <li><a href="#Beispiel">Gerichts-Urteile</a></li>
    <li><a href="#Beispiel">Registrierung</a></li>
    <li><a href="#Beispiel">Login</a></li>
    <li><a href="#Beispiel">Partner</a></li>
    <li><a href="#Beispiel">Rechtliches</a></li> 
  </ul>
  -->
  </div>
</div>
</body>
 </html>


Ich habe gelesen, das ich dieses javascript dür den IE einfügen soll. Nur wie bekomme ich eine vernünftige Ansicht im Firefox?

und....

wie bekomme ich es hin das die menüs nach oben aufgehen? macht mich echt irre...

Danke für eure Hile
 
Du hast einen Fehler in deinem Doctype, den solltest du beheben, vielleicht ändert sich dann auch schon die Darstellung im FF.

Dein Menü hat keine Fehler, das liegt am CSS.

wie bekomme ich es hin das die menüs nach oben aufgehen?
Zum Vergrößern anklicken....
Vielleicht kannst du hiermit was anfangen, war nur ein schneller Versuch von mir, aber so hast du schonmal die umgekehrte Reihenfolge.
PHP: 
    <ul id="nav">
      <li class="expand">
        <ul id="sub">
          <li>Link4</li>
          <li>Link3</li>
          <li>Link2</li>
          <li>Link1</li>
        </ul>
        Menü
      </li>
    </ul>
Code: 
#sub {display: none;}
.expand:hover #sub {display: block;}
 
bleiben wir erst mal bie der Thematik Menü nach oben...

irgendwie klappt das hier nicht oder aber ich bin nicht in der Lage den Tipp von Dir hier umzusetzen.

Wenn ich den CSS Code mit eingebe dann wird alles nur noch blau und die schrift ist nicht mehr zu erkennen.
Dann dachte ich, ich könnte vielleicht mit einem Margin im negativen Bereich arbeiten, aber das bringt auch nicht soviel bei unterschiedlich langen menüs. Es muß doch eine ganz einfache Lösung geben die Box nach oben aufgehen zu lassen und nicht nacht unten???
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben