Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Błędne wyświetlanie menu pod IE...
Forum PHP.pl > Forum > Przedszkole
Nazad
26.04.2010, 10:08:21
Witam! Bardzo proszę o pomoc. Pod FF menu działa i jest w odpowiednim miejscu, pod IE działa jednak wyświetla się w dziwacznym miejscu.

Link do strony:
http://www.ksiaznica.home.pl/nc/

kod: (część z menu)
[HTML] pobierz, plaintext 
  1.  
  2. <link rel="stylesheet" href="default.css" type="text/css">
  3. <script type="text/javascript" src="ie5.js"></script>
  4.     <script type="text/javascript" src="DropMenu1.js"></script>
  5.  
  6.  
  7.  
  8.   <div class="naglowek">
  9.          <div style="position: absolute;left:450px;top:60;z-index:1;bottom 50px;">
  10.  
  11. <form method="get" action="search.php">
  12.  
  13. <input type="text" name="searchterm" title="" value="" class="searchbox" />
  14.  
  15. <input type="submit" name="szukaj" title="szukaj" value="szukaj" class="searchbutton" />
  16. <a href="szukaj.php"><FONT SIZE=1>Wyszukiwanie zaawansowane </FONT> </a>
  17.  
  18. </form>
  19.  
  20. </div>
  21.          <img style="position: relative; left: 0px; bottom: -9px;" src="czytelnia.png"/>
  22.          <img style="width: 92px; height: 40px; position: relative; bottom:5px;left:520px;" src="logoborgis.png"/>
  23.          <img style="width: 990px; height: 72px; position: relative; bottom:35px;" src="toptlo1.png"/>
  24. </div> 
  25. </head>
  26.  
  27. <body>  
  28.  <p class="strona">
  29.   <div class="main">
  30.        <table cellspacing="0" cellpadding="0" id="menu1" class="dm1">
  31.     <tr>
  32.         <td>
  33.             <a class="item1" href="java script:void(0)">Czasopisma<br>Online</a>
  34.             <div class="section">
  35.                 <a class="item2" href="example1.html">Medycyna Rodzinna</a><br>
  36.                 <a class="item2" href="example1.html">New Medicine</a><br>
  37.                 <a class="item2" href="example1.html">Nowa Medycyna</a><br>
  38.                 <a class="item2" href="example1.html">Nowa Pediatria</a><br>
  39.                 <a class="item2" href="example1.html">Nowa Stomatologia</a> <br>
  40.                 <a class="item2" href="example1.html">Postępy Fitoterapii</a><br>
  41.                 <a class="item2" href="example1.html">Postępy Nauk<br>Medycznych</a> <br>
  42.                 <a class="item2" href="example1.html">Farmakoekonomika</a> <br>
  43.                 <a class="item2" href="example1.html">Bezpieczna Żywność</a>  <br>
  44.                 <a class="item2" href="example1.html">Balneologia Polska</a>  <br>
  45.                 <a class="item2" href="example1.html">Anestezjologia...</a><br>
  46.                 <a class="item2" href="example1.html">Kosmetyka Naturalna</a> <br>
  47.             </div>
  48.         </td>
  49.         <td>
  50.             <a class="item1" href="java script:void(0)">Książki<br>Online</a>
  51.             <div class="section">
  52.                 <a class="item2" href="example1.html">Jeden</a>
  53.                 <a class="item2" href="example1.html">Dwa</a>
  54.             </div>
  55.         </td>
  56.         <td>
  57.             <a class="item1 left" href="example1.html"><br>Opublikuj</a>
  58.         </td>
  59.         <td>
  60.             <a class="item1 left" href="example1.html">Prenumerata<br>czasopism</a>
  61.         </td>
  62.         <td>
  63.             <a class="item1 left" href="example1.html">Newsletter<br>dla lekarzy</a>
  64.         </td>
  65.         <td>
  66.             <a class="item1" href="java script:void(0)">Księgarnie<br>Online</a>
  67.             <div class="section">
  68.                 <a class="item2" href="example1.html">DoPoduszki.eu</a>
  69.                 <a class="item2" href="example1.html">KsiegarniaMedyczna.eu</a>
  70.             </div>
  71.         </td>
  72.         <td>
  73.             <a class="item1" href="example1.html">Fitokosmetyki<br>Medyczne</a>
  74.         </td>
  75.     </tr>
  76.     </table>
  77.  
  78.     <script type="text/javascript">
  79.     var dm1 = new DropMenu1('menu1');
  80.     dm1.position.top = -1;
  81.     dm1.init();
  82.     </script> 
  83.    </div>
  84.    </p>
  85.  <br> 
  86. <div style="border: 1px solid #ddd; padding: 5px;"> 
  87. <table> 
  88. <tr><td> 
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. .naglowek {
  2. background-attachment : scroll;
  3. background-color : transparent;
  4. background-image : url(http://www.czytelniamedyczna.pl/nowaczyt/toptlo.jpg);
  5. display : block;
  6. height : 80px;
  7. width : 990px;
  8. }
  9. .skyright{
  10. width:120px;
  11.  
  12. margin-left:870 ;
  13.  
  14. margin-right:20;
  15.  
  16. display: table;
  17. }
  18. .dm1 {
  19. font : bold 11px/12px Arial, sans-serif, helvatica;
  20. }
  21. .dm1 .item1, .dm1 .item1:hover, .dm1 .item1-active, .dm1 .item1-active:hover {
  22. padding : 3px 8px 4px 8px;
  23. text-decoration : none;
  24. position : relative;
  25. display : block;
  26. width : 125px;
  27. height : 20px;
  28. background : url("tlogray1.gif") repeat-x left;
  29. text-align : center;
  30. font : bold 11px/12px Arial, sans-serif, helvatica;
  31. }
  32. .dm1 .item1 {
  33. background-image : url("tlo1.gif");
  34. color : #ffffff;
  35. font : bold 11px/12px Arial, sans-serif, helvatica;
  36. display: block;
  37. }
  38. .dm1 .item1:hover, .dm1 .item1-active, .dm1 .item1-active:hover {
  39. background : url("tlogray1.gif");
  40. color : #ffffff;
  41. font : bold 11px/12px Arial, sans-serif, helvatica;
  42. display: block;
  43. }
  44. .dm1 .item2, .dm1 .item2:hover {
  45. padding : 3px 8px 4px 8px;
  46. text-decoration : none;
  47. display : block;
  48. white-space : nowrap;
  49. font : bold 11px/12px Arial, sans-serif, helvatica;
  50.  
  51. }
  52. .dm1 .item2 {
  53. background : url("tlo1.gif");
  54. color : #ffffff;
  55. font : bold 11px/12px Arial, sans-serif, helvatica;
  56. width : 135px;
  57. height : 15px;
  58. text-align : center;
  59.  
  60. }
  61. .dm1 .item2:hover {
  62. background : url("tlogray1.gif");
  63. color : #ffffff;
  64. font : bold 11px/12px Arial, sans-serif, helvatica;
  65. }
  66. .dm1 .section {
  67. position : absolute;
  68. visibility : hidden;
  69. z-index : -1;
  70. white-space : nowrap;
  71. font : bold 11px/12px Arial, sans-serif, helvatica;
  72. display: block;
  73. margin-top: 90px;
  74. margin-left: 10px;
  75. }
  76. * html .dm1 td {
  77. position : relative;
  78. }
  79. .przerwa {
  80. height : 30px;
  81. }
  82. h1 {
  83. width : 375px;
  84. padding : 10px;
  85. margin-left : auto;
  86. margin-right : auto;
  87. background : #339;
  88. font : normal 18px Arial, Helvetica, sans-serif;
  89. color : #fff;
  90. border : 1px solid #000;
  91. text-align : center;
  92. }
  93. h2 {
  94. font : bold 18px Arial, Helvetica, sans-serif;
  95. color : #339;
  96. }
  97. p {
  98. font : normal 10pt Arial, Helvetica, sans-serif;
  99. text-align : center;
  100. color : #000;
  101. }
  102. a:link, a:visited {
  103. font : bold 11px/12px Arial, sans-serif, helvatica;
  104. color : #000;
  105. text-decoration : none;
  106. }
  107. .searchbox {
  108. width : 150px;
  109. font : normal 12px Arial, Helvetica, sans-serif;
  110. color : #ffffff;
  111. background : #b9cdff;
  112. }
  113. .searchbutton {
  114. width : 80px;
  115. background : url("tloblue1.gif") repeat-x;
  116. font : bold 12px Arial, Helvetica, sans-serif;
  117. color : #000;
  118. }
  119.  
  120. #menu1 {
  121. z-index:10 !important;
  122. position:relative;
  123. margin-left:0px;
  124. margin-right:0px;
  125. margin-top: -16px;
  126. list-style-type: none;
  127. }
[HTML] pobierz, plaintext


Gdzie tkwi błąd? Bardzo proszę o pomoc, ponieważ siedzę nad tym chyba z tydzień...
krzysztof_kf
26.04.2010, 11:15:54
Wiesz czemu tak się dzieje nadużywasz selektorów klas i wszystkiego najlepiej przeczytaj to Kurs
Nazad
26.04.2010, 11:32:39
krzysztof_kf Jestem niezmiernie wdzięczny za Twoją chęć pomocy, jednak jeszcze żaden z Twoich postów mi w żaden sposób nie pomógł. W poprzednim temacie napisałeś mi żebym "nauczył się CSS", teraz odesłałeś mnie do kursu, który chyba każdy zna.

Co gorsza, pisząc takiego posta odstraszasz pozostałych użytkowników tego forum którzy autentycznie mogli by pomóc. Temat, w którym pierwsza odpowiedź kieruje do podstawowego kursu dla większości użytkowników jest zakończony i nie widzą oni sensu w nim pisać.

Założyłem ten temat, ponieważ w podobny sposób "zakończyłeś" mi poprzedni, teraz zrobiłeś to znów.

Ponawiam prośbę o pomoc, jeśli ktoś może precyzyjniej niż "nie umiesz CSS" określić co powoduje problem będę bardzo wdzięczny.
krzysztof_kf
26.04.2010, 11:46:52
Dobra widzę że źle to znosisz powiem tak przeanalizowałem twój kod powiem ci dlaczego tak się dzieję mam nadzieje że to weźmiesz pod uwagę na przyszłość

dodajesz akapit o nazwie <p class="strona"> po czym go zamykasz jako pusty element </p> po co to chyba się nie do wiemy dalej jedziemy dajesz klasę o nazwie <div class="main"> dajesz to chyba dla jaj nie masz żadnej zawartości dla tego elementu ale po co niech będzie smile.gif jedziemy dalej dajesz puźniej takie coś 

[HTML] pobierz, plaintext 
  1.        <table id="menu1" class="dm1" cellpadding="0" cellspacing="0">
  2.     <tbody><tr>
  3.         <td>
[HTML] pobierz, plaintext


a co tam jak nie idzie w css zrobimy sobie mix złożony z html i css więc nie dziw się że nikt nie odpisuję po za mną nie chce cię jakoś ubliżyć tylko pomóc więc nie dałem ci linku do kursu bo ci dawałem tylko dałem ci link do menu porządnie zrobionego . który dostosujesz go do włąsnych potrzeb w 1 godzinę a nie w tydzień .

Pozdrawiam
Nazad
26.04.2010, 11:52:51
Faktycznie, przeoczyłem fakt że link prowadzi do konkretnego zagadnienia.

Niestety, korzystając z tego co tam jest napisane miałem ten sam problem sad.gif

A mógł byś podpowiedzieć jakieś rozwiązanie na problem z z-indexem pod IE? Nie za bardzo mogę sobie z nim poradzić...
krzysztof_kf
26.04.2010, 12:07:30
W tym przypadku z-index nic nie ma do tego poprostu nawalone jest wszystkiego ;/
Nazad
26.04.2010, 12:12:43
Uprzątnąłem troszkę, ale poza satysfakcją nie dało to nic.

Na pewno to nie kwestia kolejności warstw? W FF wszystko ładnie wskakuje na swoje miejsce a w IE (co widać na przykładzie z 1 posta) menu tkwi uparcie pod warstwą na której ma być...
krzysztof_kf
26.04.2010, 12:22:33
Zmień to coś co dałeś na samej górze czyli dokumentacja zmień na takie coś 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html
  2.         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
[HTML] pobierz, plaintext



i takie coś po czcionka przy wyszukiwarce ci źle działa 

[CSS] pobierz, plaintext 
  1. .naglowek p {
  2. font-size: 1em;
  3. display: inline;
  4. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1.  
  2. <a href="http://www.ksiaznica.home.pl/nc/szukaj.php"><p>Wyszukiwanie zaawansowane </p> </a>
[HTML] pobierz, plaintext

Nazad
26.04.2010, 12:30:02
Ok, buttony wskoczyły na swoje miejsce, ale za to wszystko inne się rozjechało smile.gif

tak to wygląda po zmianie:
http://www.ksiaznica.home.pl/nc1/

FF i w IE reklama przeskoczyła na lewo, wyszukiwarka wyskoczyła na górę.

Dodatkowo w IE menu rozwija się pod warstwą z reklamami zamiast pod kategorią menu bezpośrednio.

Zawsze tak mam, jak się jedno poprawi to drugie się pogorszy...

Masz jakiś pomysł na to?
krzysztof_kf
26.04.2010, 12:43:39
Usuń z klasy 

[CSS] pobierz, plaintext 
  1.  
  2. .dm1 .section { 
  3. margin-top: 90px;
[CSS] pobierz, plaintext



i po kombinuj coś z resztą więcej inicjatywy z twojej strony .
pedro84
26.04.2010, 12:54:37
@Nazad, nie zrozum mnie źle, ale zrób to co krzysztof_kf doradzał Ci w swoim pierwszym poście. Twój kod to sieczka i zupa tagów, jedziesz metodami wziętymi z kończa lat 90.

Menu to jest lista i powinno być oparte na liście nieuporządkowanej <ul>. Myślisz, że Firefoxie menu Ci działa? Mylisz się. Z resztą zobacz sam. Taki kod nie ma prawa działać prawidłowo. Patrzyłeś na stronę pod Operą? Nie działa w ogóle. To polska strona, a Opera w PL bardzo popularna jest. Widziałeś po pod Chrome?

Naprawdę, dla Twojego dobra, naucz się podstaw, bo z tym masz problem. Zarówno HTML jak i CSS. Naucz sie poprawnego budowania struktury strony, potem stylowania. Nic trudnego.

@down: Krzysztof, zasztrzeliłeś mnie tym biggrin.gif
krzysztof_kf
26.04.2010, 12:56:27
Dla mnie temat zamknięty żadna inicjatywa z jego strony ja mu robię a on pójdzie oglądać ryśka z klanu .
batman
26.04.2010, 13:10:17
~Nazad
A nie mogłeś kontynuować w poprzednim temacie?
Temat tylko dlatego nie zostanie zamknięty, ponieważ sporo osób chce Ci pomóc. Od siebie dodam jedynie, że zacznij czytać jakieś kursy html+css.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.