dynamisches menü


  • MrLoony
  • 942 Aufrufe 3 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • dynamisches menü

    hi
    ich habe ein Problem.
    ich habe von SELFHTML dieses menü meinen wünschen angepasst...

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    4. <title>Name der aktuellen Seite</title>
    5. <style type="text/css">
    6. body {
    7. font: normal 100.01% Helvetica, Arial, sans-serif;
    8. color: black; background-color: #ffffe0;
    9. }
    10. div#Rahmen {
    11. width: 47.1em;
    12. padding: 0.8em;
    13. border: 1px solid black;
    14. background-color: silver;
    15. }
    16. * html div#Rahmen { /* Korrektur fuer IE 5.x */
    17. width: 48.7em;
    18. w\idth: 47.1em;
    19. }
    20. div#Rahmen div {
    21. clear: left;
    22. }
    23. ul#Navigation {
    24. margin: 0; padding: 0;
    25. text-align: center;
    26. }
    27. ul#Navigation li {
    28. list-style: none;
    29. float: left; /* ohne width - nach CSS 2.1 erlaubt */
    30. position: relative;
    31. margin: 0.4em; padding: 0;
    32. }
    33. * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
    34. margin-bottom: -0.4em;
    35. }
    36. *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
    37. margin-bottom: -0.1em;
    38. }
    39. ul#Navigation li ul {
    40. margin: 0; padding: 0;
    41. position: absolute;
    42. top: 1.6em; left: -0.4em;
    43. display: none; /* Unternavigation ausblenden */
    44. }
    45. * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    46. left: -1.5em;
    47. lef\t: -0.4em;
    48. }
    49. *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
    50. background-color:silver; padding-bottom:0.4em;
    51. }
    52. ul#Navigation li:hover ul {
    53. display: block; /* Unternavigation in modernen Browsern einblenden */
    54. }
    55. ul#Navigation li ul li {
    56. float: none;
    57. display: block;
    58. margin-bottom: 0.2em;
    59. }
    60. ul#Navigation a, ul#Navigation span {
    61. display: block;
    62. width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
    63. padding: 0.2em 1em;
    64. text-decoration: none; font-weight: bold;
    65. border: 1px solid black;
    66. border-left-color: white; border-top-color: white;
    67. color: maroon; background-color: #ccc;
    68. }
    69. * html ul#Navigation a, * html ul#Navigation span {
    70. width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    71. w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
    72. }
    73. ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    74. border-color: white;
    75. border-left-color: black; border-top-color: black;
    76. color: white; background-color: gray;
    77. }
    78. li a#aktuell { /* aktuelle Rubrik kennzeichnen */
    79. color: maroon; background-color: silver;
    80. }
    81. ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
    82. background-color: maroon;
    83. }
    84. </style>
    85. </head>
    86. <body>
    87. <h1 id="Beispiel">Name der aktuellen Seite</h1>
    88. <div id="Rahmen"><ul id="Navigation">
    89. <li><a href="#Beispiel">Geschichte</a></li>
    90. <li><a href="#Beispiel">Aufbau</a></li>
    91. <li><a href="#Beispiel">Gitarrentypen</a>
    92. <ul>
    93. <li><a href="#Beispiel">Akustik</a></li>
    94. <li><a href="#Beispiel">E-Gitarre</a></li>
    95. <li><a href="#Beispiel">F-Loch</a></li>
    96. </ul>
    97. </li>
    98. <li><a id="aktuell" href="#Beispiel">Anwendungen</a>
    99. <ul>
    100. <li><a href="#Beispiel">Rock</a></li>
    101. <li><span>Jazz</span></li>
    102. <li><a href="#Beispiel">Klassik</a></li>
    103. </ul>
    104. </li>
    105. <li><a href="#Beispiel">Impressum</a></li>
    106. </ul><div></div></div>
    107. </body>
    108. </html>
    Alles anzeigen

    es funktioniert aber nur mit firefox und nicht mit dem IE.
    das beispiel im internet geht auch bei mir mit beiden browsern.
    nur wenn ich den quelltext kopiere und dass dann als htm-datei auf meinem rechner habe geht wieder nur der firefox...
    was kann ich tun? wo ist der fehler?

    ok erstes problem habe ich schon behoben...

    aber eine frage habe ich ja noch ^^

    sollte ein menü werden, wie hier.
    wenn noch jemand weiß, wie man nen untermenü zum untermenü macht, wie das bei Modern Classics der fall ist, dann bitte schnell melden :)

    und noch eine frage ist mir eingefallen...kann man die größe für alle browser einheitlich machen? wenn es im IE passt is es für den firefox zu klein...diese blöden em :)

    mfg
    Loony
    "Jeder Mensch macht Fehler. Das Kunststück liegt darin,s ie zu machen, wenn keiner zuschaut." Sir Peter Ustinov
  • MrLoony schrieb:


    und noch eine frage ist mir eingefallen...kann man die größe für alle browser einheitlich machen? wenn es im IE passt is es für den firefox zu klein...diese blöden em :)


    tja...mit diesen problemen muss jeder webdesigner leben. normal, dass sich verschiedene browser verschieden verhalten. obwohl das eigentlich nicht der fall sein dürfte, da es eine standardisierte version von xhtml gibt, an die sich aber bspw. microsoft mit den internet explorer-versionen nicht hält.

    em oder % sind schon die richtigen lösungen für eine annähernd berechnung der längen. zur lösung dienes problems setze mal folgendes ganz oben ins css rein:

    * {
    margin:0;
    padding:0;
    }

    bewirkt, dass ALLE außen- und innenabstände von ALLEN elementen in ALLEN BROWSERN erst einmal auf 0 gesetzt werden. hilft bei solchen problemen oft.