Forum Doku Wiki Blog

Forumsarchiv 2007, Dezember
Drop Down Menü

archivierte Beiträge lesen

  1. (CSS) Drop Down Menü von GaHero, 29. 12. 2007, 12:12

Drop Down Menü

Der folgende Beitrag wurde am 29. 12. 2007, 12:12 Uhr von GaHero veröffentlicht.

Hallo,

ich habe folgenden Code für ein Drop Down Menü hier gefunden und ein wenig angepasst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">

  div#Rahmen {
    width: 60%;
    padding: 0px;
    border: 0px;
    float: right;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: right;
    position: relative;
    margin: 0px; padding: 0;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0px; /* Abstand Button - unterer Rand Rahmen*/
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 26px; left: 0px;
    display: none;  /* Unternavigation ausblenden */
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    padding-bottom: 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: 0px;
  }

  ul#Navigation a{
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 0px;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    color: white; background-color: gray;
  }

</style>
</head>
<body>
  <div id="Rahmen">
  <ul id="Navigation">

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

    <li><a href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

  </ul><div></div></div>
</body>
</html>

Klappt auch alles, so wie ich es haben will. Allerdings ist die Darstellung in den verschiedenen Browsern noch immer ein Problem. Viele Sachen ahbe ich schon selber hinbekommen, aber der Abstand zwischen Menüleiste und Drop Down Menü beträgt entweder 0px (FF 2/3b2) oder 1px (INet 7/ Opera 9.25). Woran liegt das? Wie kann man das beheben?

Viele Grüße
GaHero

Drop Down Menü

Der folgende Beitrag wurde am 29. 12. 2007, 17:25 Uhr von nils-hero veröffentlicht.

Hallo,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">

* {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 1em;
 line-height: 1em;
}

div#Rahmen {
 width: 60%;
 float: right;
}

div#Rahmen div {
 clear: left;
}

ul#Navigation {
 text-align: center;
}

ul#Navigation li {
 list-style: none;
 float: right;
 position: relative;
}

* :first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
 margin-bottom: 0px; /* Abstand Button - unterer Rand Rahmen*/
}

ul#Navigation li ul {
 position: absolute;
 top: 16px;
 left: 0px;
 display: none; /* Unternavigation ausblenden */
}

* :first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
 padding-bottom: 0em;
}

ul#Navigation li:hover ul {
 display: block; /* Unternavigation in modernen Browsern einblenden */
}

ul#Navigation li ul li {
 float: none;
 display: block;
 margin-bottom: 0px;
}

ul#Navigation a {
 display: block;
 width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
 padding: 0 1em;
 text-decoration: none;
 font-weight: bold;
 border: 0px;
 color: maroon;
 background-color: #ccc;
}

ul#Navigation a:hover,ul#Navigation span,li a#aktuell {
 border-color: black;
 color: white;
 background-color: gray;
}

</style>
</head>
<body>
<div id="Rahmen">
<ul id="Navigation">

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

 <li><a href="#Beispiel">Seite 4</a>
 <ul>
  <li><a href="#Beispiel">Seite 4a</a></li>
  <li><a href="#Beispiel">Seite 4b</a></li>
  <li><a href="#Beispiel">Seite 4c</a></li>
 </ul>
 </li>

</ul>
<div></div>
</div>
</body>
</html>


Zum Weitertesten...

Gruß, Nils
--
Bookmarks

Drop Down Menü

Der folgende Beitrag wurde am 30. 12. 2007, 11:28 Uhr von GaHero veröffentlicht.

Hallo,

mit deinem Code geht es leider auch nicht, gleiches Problem wie vorher...

Drop Down Menü

Der folgende Beitrag wurde am 30. 12. 2007, 21:21 Uhr von nils-hero veröffentlicht.

Hallo,

Ich hab das Beispiel (leicht verändert) mal auf meine Seite hochgeladen, funktioniert (der IE sollte dich nicht jucken, wenn Du eine private Seite hast, lies hier den untersten Textabsatz).

Sieh Dir den Seitenquelltext an (rechtsklick).

Gruß, Nils
--
Bookmarks

© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4