Wo ist der fehler?

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

    • Wo ist der fehler?

      ich bin am verzweifeln: ich habe hier ein script:

      Quellcode

      1. <!--Head-->
      2. <div id="HeadArea">
      3. <div class="TopeHead"></div>
      4. <div class="logo"></div>
      5. </div>
      6. <!--Menü-->
      7. <div class="MenuArea">
      8. <ul id="MenuList">
      9. <!--Das Erste menü Item-->
      10. <li>
      11. <!--Der Text des ersten Menüs, # durch link austauschen-->
      12. <a href="#" onmouseover="OpenMenu('Menu1')" onmouseout="StartClosingTimer()"> Menu1 </a>
      13. <!--Der Container mit den DropDown Items-->
      14. <div id="Menu1" onmouseover="StopClosingTimer()" onmouseout="StartClosingTimer()">
      15. <!--Das erste item des DropDown-->
      16. <a href="#">Item1</a>
      17. </div>
      18. </li>
      19. <!--Das Zweite menü Item-->
      20. <li>
      21. <!--Der Text des Zweiten Menüs, # durch link austauschen-->
      22. <a href="#" onmouseover="OpenMenu('Menu2')" onmouseout="StartClosingTimer()"> Menu1 </a>
      23. <!--Der Container mit den DropDown Items-->
      24. <div id="Menu2" onmouseover="StopClosingTimer()" onmouseout="StartClosingTimer()">
      25. <!--Das erste item des DropDown-->
      26. <a href="#">Item1</a>
      27. </div>
      28. </li>
      29. </ul>
      30. </div>
      32. <!--Main Teil-->
      33. <div id="MainArea">
      34. <div class="HeadBar">
      35. <font>text</font>
      36. </div>
      37. <br>
      38. <div class="Frame">
      39. hier der mittelteil
      40. </div>
      41. </div>
      Alles anzeigen

      mit einem selbstgemachten popup menü
      hier der css code

      Quellcode

      1. /*Formatierung: Body-Tag*/
      2. body {
      3. /*Hintergrundfarbe*/
      4. background: #818181;
      5. font: 12px 'Verdana';
      6. }
      7. /*Menu*/
      8. .MenuArea {
      9. padding: 0px 5px;
      10. background: url(Bilder/MenuBg.png) no-repeat;
      11. }
      12. /*DropDownMenu*/
      13. /*hintergrundfarbe kann mit background: url(Bilder/bild.png) no-repeat; durch bildausgetauscht werden*/
      14. #MenuList {
      15. margin: 0;
      16. padding: 0;
      17. z-index: 45;
      18. }
      19. /*Der Überbegriff*/
      20. #MenuList li {
      21. margin: 0;
      22. padding: 0;
      23. list-style: none;
      24. float: left;
      25. font: bold 10px arial;
      26. }
      27. #MenuList li a {
      28. /*Wichtig*/
      29. display: block;
      30. /*Eine 1 px große lücke zw den einzelnen items*/
      31. margin: 0 1px 0 0;
      32. /*anpassen der boxgroße*/
      33. padding: 4px 10px;
      34. /*für einheitliche große*/
      35. width: 60px;
      36. /*Hintergrundfarbe für wenn die maus nicht über dem item ist*/
      37. background: #FFF;
      38. /*Text farbe*/
      39. color: #000;
      40. /*damit der text mittig ist*/
      41. text-align: center;
      42. /*damit der text nicht wie ein link dargestellt wird*/
      43. text-decoration: none;
      44. }
      45. #MenuList li a:hover {
      46. /*BG wenn mit maus drüber*/
      47. background: #dedede;
      48. }
      49. /*Die box der Subitems*/
      50. #MenuList div {
      51. /*damit sich die grö0e und pos nicht nach dem übergeordneten item richtet*/
      52. position: absolute;
      53. /*wichtig erst durch javascript sichtbar*/
      54. visibility: hidden;
      55. /*eig überflüssig aber zur sicherheit da*/
      56. margin: 0;
      57. padding: 0;
      58. /*hintergrund der box mit den subitems*/
      59. background: #DDD;
      60. /*ramen um diese box*/
      61. border: 1px solid #dedede;
      62. /*text orientierung in der box*/
      63. text-align: left;
      64. /*wie oben*/
      65. text-decoration: none;
      66. /*text farbe*/
      67. color: #2875DE;
      68. /*text type*/
      69. font: 11px arial;
      71. }
      72. #MenuList div a {
      73. /*nichts ändern wichtig so*/
      74. position: relative;
      75. display: block;
      76. /*nur zur sicherheit*/
      77. margin: 0;
      78. /*größe anpassen damit nicht nur groß wie text*/
      79. padding: 5px 10px;
      80. /*damit sich die boxgröße anpasst*/
      81. width: auto;
      82. white-space: nowrap;
      83. }
      84. #MenuList div a:hover {
      85. /*wenn maus drüber farbwahl ändern*/
      86. background: #DDD;
      87. color: #000;
      89. }
      91. /*Header*/
      92. #HeadArea {
      93. height: auto;
      94. width: 900;
      95. }
      96. #HeadArea .logo {
      97. margin: 0;
      98. padding: 0;
      99. background: url(Bilder/Logo.png) no-repeat;
      100. }
      101. #HeadArea .TopHead {
      102. margin: 0;
      103. padding: 0;
      104. background: url(Bilder/Top.png) no-repeat;
      105. }
      106. /*Mitte*/
      107. #MainArea {
      108. background: url(Bilder/Mid.png);
      109. width: 880;
      110. padding: 5px 10px;
      111. }
      112. #MainArea .HeadBar {
      113. text-align: left;
      114. background: #ffe4b5;
      115. padding: 3px;
      116. }
      117. #MainArea .Frame {
      118. margin: 0;
      119. padding: 0;
      120. }
      121. /*Footer*/
      122. #FootArea {
      123. background: url(Bilder/Footer.png);
      124. }
      125. #FootButtons {
      126. margin: 0;
      127. padding: 0;
      128. }
      129. #FootButtons li {
      130. margin: 0;
      131. padding: 0;
      132. list-style: none;
      133. float: right;
      134. font: 9px arial;
      135. }
      136. #FootButtons li a {
      137. display: block;
      138. margin: 0 1px;
      139. padding: 2px 5px;
      140. width: 60px;
      141. color: transparent;
      142. text-align: center;
      143. text-decoration: none;
      144. }
      145. #FootButtons li a:hover {
      146. background: #ffe4b5;
      147. }
      Alles anzeigen


      problem: das menü liegt neben dem mittelteil(links) und nicht darüber

      ps es liegt an dem float:left aber das benötige ich ja damit die items nebeneinander liegen

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Wäre es nicht besser in dem Fall, eine Tabelle zu nutzen?
      Damit bekommst du die Menüelemente schöner nebeneinander, ohne float:left
      Und dann würd ich dir empfehlen, das Javascript aus dem Menü zu verbannen, damit auch Leute ohne Javascript seine Seite noch nutzen können, nur so als Tipp[/SIZE][/COLOR][/FONT]

    • es ist jetzt nicht direkt dieses problem sondern ein anderes was jetzt aufgetreten ist und wo ich nicht mehr weiter weiß:
      ich will 2 menüs untereinander machen und wenn man mit der maus drüber fährt sollen sie sich aufklappen: mein erster versuch war in einer tabelle aber da hat kein browser den eintrag mit der id gefunden (eigentlich <tr><div id="t">Item...</div></tr>
      also hab ichs ohne tabelle versucht

      HTML-Quellcode

      1. <html>
      2. <head>
      3. <style>
      4. #m1 {
      5. visibility: hidden;
      6. background-color: #DEDEDE;
      7. height: 0px;
      8. }
      9. </style>
      10. <script>
      12. function ShowMenu(id) {
      13. document.getElementById(id).style.height='200';
      14. document.getElementById(id).style.visibility='visible';
      15. }
      16. </script>
      17. </head>
      18. <body>
      19. <div onmouseover="ShowMenu('m1')" style="background-color: #DDD;">menü</div>
      20. <div id='m1'>test<br>test<br>test<br>test<br></div>
      21. <div>test</div>
      22. </body>
      23. </html>
      Alles anzeigen

      unter den ns browsern nur ie macht mal wieder probleme, anstatt die schrift test direkt unter menü zu hängen resaviert ie den platz schon für die items und sobald ich hight auf 200 werden die 200 draufgerechnet

      Was kann ich machen damit es auch unter ie funktioniert

    • Zum Ausrichten der Menüelemente sollteste für waagrechte Darstellung ne Tablle verwenden und dann <tr> für eine Reihe und <td> pro "Menüpunkt"
      Danach würde ich dir eine Liste empfehlen, die du per CSS entsprechend formatierst, Javascript hat in einer Navigation nichts zu suchen, wenn es schon dafür verwendet wird, die Navigation benutzbar zu machen.
      Da würde ich lieber sagen, dass du CSS verwendest für den Dropdown, damit die Grundfunktion immerhin noch vorhanden auch ohne Javascript.
      Außerdem würde ich dir das CSS Attribut display:none empfehlen, um Dinge auszublenden, ohne dass der Platz dafür ebrechnet wird
      Dazu folgendes zu visibility:
      Setzt ein Element auf sichtbar oder unsichtbar. Unsichtbar bedeutet in diesem Fall vollständig transparent. Das Element ist zwar nicht zu sehen, nimmt aber den Platz ein, der mit den Positionsangaben und Abmessungen festgelegt ist.

      Quelle: css4you.de/visibility.html

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Der eigentliche Menüpunkt wird ja dann auch als ul gemacht, so würd ichs auch tun.
      Ich würde nur zum Ausrichten empfehlen,d ass er eine Tabelle nimmt und in jedes <td> halt eben seine listen einarbeitet.
      Evtl kams etwas komisch rüber, aber so hab ichs gemeint, ich wollte ihn nicht dazu anstiften, Menüs mit Tabellen zu machen.[/SIZE][/COLOR][/FONT]

    • @Internetfreak dachte du wärst cool aber mit Table zu arbeiten ?! Wieso tust du mir das an :{

      Blöd mit Table zu arbeiten!?? o_o
      In jedem HTML-Tag gibt es eigentlich :Hover (führt eine Aktion aus wenn man mit der Maus über den Container geht).
      Hier mal ein beispiel:
      dream-net.eu/mcore_test/index.html
      Hier der Source:

      HTML-Quellcode

      1. <html>
      2. <body>
      3. <style type="text/css">
      4. #menu
      5. {
      6. height: 20px;
      7. width: 100px;
      8. background: #000000;
      9. }
      10. #menu:hover
      11. {
      12. height: 200px;
      13. background: #000000;
      14. }
      15. </style>
      16. </body>
      17. <div id="menu">aaa</div>
      18. lol<br />
      19. lal<br />
      20. lul
      21. </html>
      Alles anzeigen

    • ich habe es gelöst...
      jedes problem auch das erste und das sogar ohne liste(ein <br> hats gelöst...)

      nur ich hätte noch eine frage warum stellt der ie eigentlich alles anders da? ich hab keine lust bei jeder seite mit php zu überprüfen ob es sich um den ie handelt und jeh nachdem den code umzustellen... da muss es doch bessere möglichkeiten geben

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Der IE im allgemeinen handelt kaum nach Standards, je nach IE Version, weshalb es viel durcheinander gibt.
      Eigentor von MS eben.
      Wobei, mit PHP musste nicht unbedingt arbeiten, formatier deinen Code sauber in .css Dateien und nicht als inline und dann benutzte Conditional Comments, die nur der IE versteht, um angepasste stylesheets einzubinden.

      @yannikmama
      Das haste du wohl falsch verstanden.
      Die Tabelle dient lediglich zur Positionierung, praktisch nur als Stütze für die einzelnen Menüpunkte, die dann mittels Listen realisiert werden.
      Ich verwende ne Tabelle auch gern in Formularen zum Ausrichten und eben daher hab ichs gesagt, nicht für das Menü selber, sondern nur um praktisch alles etwas auszurichten.[/SIZE][/COLOR][/FONT]

    • gibt es irgendeine seite mit den befehlen die bloß der ie fersteht?

      Der IE im allgemeinen handelt kaum nach Standards, je nach IE Version, weshalb es viel durcheinander gibt.

      mit 60%anteil(wert 2010) kann man eigentlich sagen das ie die standarts setzt, wär es jetzt nur ein so wenig verbreiteter browser wie chrome oder safari würde ich es erst mal bei seite schieben aber ie ist der meistgenutzte browser und d.h. müssen die seiten funktionieren, darum wäre ich über eine erklärung wie man seiten speziell für den ie anpassen kann sehr dankbar

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Der IE setzt keinesfalls die Standards, das W3C setzt diese, nur der IE setzt diese nicht komplett um und so, er ist aber dennoch weit verbreitet, das ist wahr.
      Jedenfalls, Befehle, die nur der IE versteht, gibts so nicht, du kannst wie gesagt Conditional Comments nutzen.
      Hier kannst du dich über diese informieren: Conditional Comments
      Einfach im Falle einer IE-angepassten CSS datei zuerst deine normale einbinden, danach mittels eines CC die IE Anpassung, damit auch 100% sichergestellt ist, dass der IE die angepassten verwendet (CSS Einstellungen überschrieben sich, die zuletzte deklarierte Einstellung hebt alle vorigen auf, solltest du also mal für eine Klasse, eine ID oder ein Element zweimal eine Einstellung nutzen, die schon vorhanden war, so überschreibt die neue die alte. Verhindern kannst du das nur durch !important)
      Die IE Anpassung erfolgt also letztendlich vorallem durch die Einbindung eines IE Stylesheets über CC und die Implementierung bestimmter fehlender CSS Funktionen mittels JS.[/SIZE][/COLOR][/FONT]

    • ich hab ja gesagt eigentlich :D was nützt es einem eine webseite nach den standarts zu haben wenn 60% der leute sie nicht richtig erkennen können(womöglich sind diese 60% auch noch 80% der zeilgruppe) somit kann man eigentlich sagen dass jede webseite diesen ie standart erfüllen sollte

      aber danke, nun werde ich es warscheinlich dennoch bei meiner php variante lassen, da ich keine lust hab jscript zu lernen...

    • [FONT="Comic Sans MS"][COLOR="DeepSkyBlue"][SIZE="2"]Also ich würde dir empfehlen, dass du die Conditional Comments benutzt, statt PHP, denn der IE kann sich auch als Firefox/Safari/Chrome ausgeben, aber die Conditional Comments versteht er trotzdem und nutzt somit automatisch Webseitenteile, die für ihn bestimmt sind.
      Javascript musst du nur benutzen, wenn es zB um Teile in CSS geht, die bestimmte IE versionen nicht können, zB :hover im IE 6, da müssteste ein Javascriptfile benutzen, dass es auch schon im Internet gibt.
      Jedenfalls sind die Conditional Comments perfekt für IE Anpassungen, es gibt noch so einige Seiten und Software, die diese Art der IE Anpassung nutzen (über den UserAgent den Browser zu erkennen ist sowieso eine schlechte Idee, da man diesen meistens eh ändern kann, beim Firefox gehts auf jeden Fall, bei anderen Browsern weiß ichs gerade nicht. Und eine andere Art der PHP-basierten Erkennung wüsste ich jetzt auch nciht grade, weil ich mich damit nie beschäftigt hab, überhaupt mittels PHP einen Browser zu erkennen)[/SIZE][/COLOR][/FONT]