IE Navigation

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

  • IE Navigation

    Hi,
    ich würde gerne meine Navigation so anpassen, dass sie im IE angezeigt wird.

    Leider kenne ich mich damit nicht wirklich aus.
    Ich hoffe ihr könnt mir helfen.

    Quellcode

    1. .droplinebar{
    2. overflow: hidden;
    3. }
    5. .droplinebar ul{
    6. margin: 0;
    7. padding: 0;
    8. float: left;
    9. width: 100%;
    10. -moz-border-radius: 2px;
    11. border-radius: 2px;
    12. font: bold 13px Arial;
    13. background: #242c54 url(../gfx/navi/default.gif) center center repeat-x; /*default background of menu bar*/
    14. }
    16. .droplinebar ul li{
    17. display: inline;
    18. }
    20. .droplinebar ul li a{
    21. float: left;
    22. color: white;
    23. padding: 9px 11px;
    24. text-decoration: none;
    25. -moz-border-radius: 2px;
    26. border-radius: 2px;
    27. }
    29. .droplinebar ul li a:visited{
    30. color: white;
    31. }
    33. .droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
    34. color: white;
    35. background: transparent url(../gfx/navi/active.gif) center center repeat-x;
    36. }
    38. /* Sub level menus*/
    39. .droplinebar ul li ul{
    40. position: absolute;
    41. z-index: 100;
    42. left: 0;
    43. top: 0;
    44. background: #0000CC; /*sub menu background color */
    45. width: 100%
    46. visibility: hidden;
    47. }
    49. /* Sub level menu links style */
    50. .droplinebar ul li ul li a{
    51. font: normal 13px Verdana;
    52. padding: 6px;
    53. padding-right: 8px;
    54. margin: 0;
    55. }
    57. .droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
    58. background: #9900FF;
    59. }
    Alles anzeigen


    Gruß,
    Kev

  • ÖÖööööhm, wir würden dir gern helfen. Allerdings ist das nicht ganz einfach ohne den HTML-Teil deines Quellcodes. Hast du irgendwo eine Live-Demo? Wenn nicht, kannst du eine aufsetzen oder zumindest den HTML-Teil bereitstellen?
    Außerdem wäre es spannend zu wissen, an welchen Stellen der IE Probleme hat. Zeigt er Teile nicht an? Zeigt er Teile falsch an? Gibt es irgendwelche anderen Symptome? Beschreibe bitte den Fehlerfall ein wenig.

  • Quellcode

    1. <div id="mydroplinemenu" class="droplinebar">
    2. <ul>
    3. <li><a href="#">Home</a></li>
    4. <li><a href="#">Test</a>
    5. <ul>
    6. <li><a href="#">Test</a></li>
    7. <li><a href="#">Test</a></li>
    8. </li>
    9. </ul>
    10. </li>
    11. <li><a href="#">Test1</a>
    12. <ul>
    13. <li><a href="#">Top 10
    14. <li><a href="#">Top 10</a></li>
    15. <li><a href="#">Test</a></li>
    16. </li>
    17. </ul>
    18. </div>
    19. </div>
    Alles anzeigen


    Das ist der HTML-Code dazu. Eine Livedemo folgt gleich...

    Livedemo: hier
    ID: ec
    Passwort: easycoding

    Gruß,
    Kevin

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Kev95 ()

  • Hey,

    letztendlich hat es nicht wirklich was mit den Stylesheets zu tun, sondern eher damit, dass dein HTML-Code ein wenig fehlerhaft ist. Du vergisst an manchen Stellen HTML-Tags zu schließen bzw. schließt zu viele etc.

    Dein Code - 1zu1 übernommen von deiner Live-Demo (mit einigen Kommentaren von mir):

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    6. <meta name="author" content="clover.tc" />
    8. <title>Ohne Titel 1</title>
    9. <link rel="stylesheet" type="text/css" href="css/navi.css" />
    10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    12. <script src="js/navi.js" type="text/javascript"></script>
    13. <script type="text/javascript">
    14. droplinemenu.buildmenu("mydroplinemenu")
    15. </script>
    16. ----------> der schließende Head-Tag </head> fehlt
    17. <body>
    19. <div id="mydroplinemenu" class="droplinebar">
    20. <ul>
    21. <li><a href="#">Home</a></li>
    22. <li><a href="#">Vote</a>
    24. <ul>
    25. <li><a href="#">Boys</a></li>
    26. <li><a href="#">Girls</a></li>
    27. </li> ----------> hat hier nichts zu suchen...
    28. </ul>
    29. </li>
    30. <li><a href="#">Ranglisten</a>
    32. <ul>
    33. <li><a href="#">Top 10 ----------> wo ist </a> und </li>?
    34. <li><a href="#">Top 10 of Boys</a></li>
    35. <li><a href="#">Top 10 of Girls</a></li>
    36. </li> ----------> schon wieder falsch
    37. </ul>
    38. </div> ----------> warum werden hier zwei div's geschlossen?
    39. </div>
    41. </body>
    42. </html>
    Alles anzeigen

    Damit sollte es auch beim IE klappen:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    5. <meta name="author" content="clover.tc" />
    6. <title>Ohne Titel 1</title>
    7. <link rel="stylesheet" type="text/css" href="css/navi.css" />
    8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    9. <script src="js/navi.js" type="text/javascript"></script>
    10. <script type="text/javascript">
    11. droplinemenu.buildmenu("mydroplinemenu")
    12. </script>
    13. </head>
    14. <body>
    15. <div id="mydroplinemenu" class="droplinebar">
    16. <ul>
    17. <li><a href="#">Home</a></li>
    18. <li>
    19. <a href="#">Vote</a>
    20. <ul>
    21. <li><a href="#">Boys</a></li>
    22. <li><a href="#">Girls</a></li>
    23. </ul>
    24. </li>
    25. <li>
    26. <a href="#">Ranglisten</a>
    27. <ul>
    28. <li><a href="#">Top 10</a></li>
    29. <li><a href="#">Top 10 of Boys</a></li>
    30. <li><a href="#">Top 10 of Girls</a></li>
    31. </ul>
    32. </li>
    33. </ul>
    34. </div>
    35. </body>
    36. </html>
    Alles anzeigen

    Für so etwas ist der W3C-Validator nützlich und vor allem sollte man den Code richtig einrücken um Fehler schnell zu finden.

    Gruß Gambler

  • Wie du an der Grafik im IE erkennst, ist der Pfad zum Bild falsch. In der navi.js zeigt der Pfad auf thepcfreakz.de/gfx/down.gif
    Dieses Bild existiert nicht. Trag dort bitte die URL zu einem existierenden Bild ein. Danach kann man weiterschauen.

    Das Original stammt anscheinend hier her: dynamicdrive.com/style/csslibr…em/jquery_drop_line_menu/

    EDIT:

    Mist zu langsam ;) Siehe einen Beitrag höher

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von mad ()