Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Błędne wyświetlanie menu pod IE..., Problem z z-index?
Nazad
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 16.04.2010

Ostrzeżenie: (0%)
-----


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)
  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. <tr><td>


CSS:
  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. }


Gdzie tkwi błąd? Bardzo proszę o pomoc, ponieważ siedzę nad tym chyba z tydzień...
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #2





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Wiesz czemu tak się dzieje nadużywasz selektorów klas i wszystkiego najlepiej przeczytaj to Kurs
Go to the top of the page
+Quote Post
Nazad
post
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 16.04.2010

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #4





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


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 (IMG:style_emoticons/default/smile.gif) jedziemy dalej dajesz puźniej takie coś

  1. <table id="menu1" class="dm1" cellpadding="0" cellspacing="0">
  2. <tbody><tr>
  3. <td>


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

Ten post edytował krzysztof_kf 26.04.2010, 11:47:58
Go to the top of the page
+Quote Post
Nazad
post
Post #5





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 16.04.2010

Ostrzeżenie: (0%)
-----


Faktycznie, przeoczyłem fakt że link prowadzi do konkretnego zagadnienia.

Niestety, korzystając z tego co tam jest napisane miałem ten sam problem (IMG:style_emoticons/default/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ć...
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


W tym przypadku z-index nic nie ma do tego poprostu nawalone jest wszystkiego ;/
Go to the top of the page
+Quote Post
Nazad
post
Post #7





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 16.04.2010

Ostrzeżenie: (0%)
-----


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ć...
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #8





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Zmień to coś co dałeś na samej górze czyli dokumentacja zmień na takie coś

  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">



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

  1. .naglowek p {
  2. font-size: 1em;
  3. display: inline;
  4. }


  1.  
  2. <a href="http://www.ksiaznica.home.pl/nc/szukaj.php"><p>Wyszukiwanie zaawansowane </p> </a>



Ten post edytował krzysztof_kf 26.04.2010, 12:27:33
Go to the top of the page
+Quote Post
Nazad
post
Post #9





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 16.04.2010

Ostrzeżenie: (0%)
-----


Ok, buttony wskoczyły na swoje miejsce, ale za to wszystko inne się rozjechało (IMG:style_emoticons/default/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?
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #10





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Usuń z klasy

  1.  
  2. .dm1 .section {
  3. margin-top: 90px;



i po kombinuj coś z resztą więcej inicjatywy z twojej strony .

Ten post edytował krzysztof_kf 26.04.2010, 12:44:21
Go to the top of the page
+Quote Post
pedro84
post
Post #11





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

Ostrzeżenie: (0%)
-----


@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 (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował pedro84 26.04.2010, 13:01:18
Go to the top of the page
+Quote Post
krzysztof_kf
post
Post #12





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----


Dla mnie temat zamknięty żadna inicjatywa z jego strony ja mu robię a on pójdzie oglądać ryśka z klanu .
Go to the top of the page
+Quote Post
batman
post
Post #13





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1




~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.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 27.08.2025 - 07:00