Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z dwupoziomowym menu w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
aradan
24.04.2007, 08:39:06
Witajcie.

Zrobiłem do strony menu składające się z dwóch poziomów. W FF i Operze wszystko jest OK, natomiast w IE nie ma rozdzielenia na pierwszy i drugi wiersz.

Poniżej przedstawiłem kod strony:

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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="Description" content=" [wstaw tu opis strony] " />
  6.   <meta name="Keywords" content=" [wstaw tu slowa kluczowe] " />
  7.   <meta name="Author" content=" [dane autora] " />
  8.   <meta name="Generator" content="kED" />
  9.  
  10.   <title> [tytul strony] </title>
  11.  
  12.   <style type="text/css">
  13. 	body {
  14. 	 margin: 0;
  15. 	}
  16.  
  17. 	#menu_bar {
  18. 	 display: block;
  19. 	 float: left;
  20. 	 padding: 0;
  21. 	 margin: 0;
  22. 	 list-style: none;
  23. 	 font-family: Verdana;
  24. 	 font-weight: bold;
  25. 	 font-size: 8pt;
  26. 	 color: #3C89B9;
  27. 	}
  28. 	#menu_bar li {
  29. 	dislpay: block;
  30. 	 float: left;
  31. 	 margin 0;
  32. 	 text-align: center;
  33. 	}
  34. 	#menu_bar a {
  35. 	 text-decoration: none;
  36. 	 color: #3C89B9;
  37. 	 float: left;
  38. 	 display: block;
  39. 	 padding: 5px;
  40. 	}
  41. 	#menu_bar a:hover {
  42. 	 background: #3C89B9;
  43. 	 color: #FFFFFF;
  44. 	 text-decoration: none;
  45. 	}
  46. 	#menu_bar #item1, #item7 {
  47. 	  width: 60px;
  48. 	}
  49. 	#menu_bar #item2, #item8 {
  50. 	  width: 117px;
  51. 	}
  52. 	#menu_bar #item3, #item9 {
  53. 	  width: 137px;
  54. 	}
  55. 	#menu_bar #item4, #item10 {
  56. 	  width: 117px;
  57. 	}
  58. 	#menu_bar #item5, #item11 {
  59. 	  width: 107px;
  60. 	}
  61. 	#menu_bar #item6, #item12 {
  62. 	  width: 152px;
  63. 	}
  64. 	</style></head>
  65. <body>
  66.  
  67. <!-- Menu - bar 1 -->
  68. <div style="display: block; float: left;">
  69.  <ul id="menu_bar">
  70.   <li><a href="#" id="item1">Home</a></li>
  71.   <li><a href="#" id="item2">Housekeeping</a></li>
  72.   <li><a href="#" id="item3">Janitorial Cleaners</a></li>
  73.   <li><a href="#" id="item4">Carpet Cleaning</a></li>
  74.   <li><a href="#" id="item5">Floor Care</a></li>
  75. 	<li><a href="#" id="item6">Damage Restoration</a></li>
  76.  </ul>
  77. <!-- Menu - bar 1 -->
  78.  
  79. <!-- Menu - bar 1 -->
  80.  <ul id="menu_bar">
  81.   <li><a href="#"  id="item7">FAQ</a></li>
  82.   <li><a href="#"  id="item8">Showrooms</a></li>
  83.   <li><a href="#"  id="item9">Testimonials</a></li>
  84.   <li><a href="#"  id="item10">Coupons</a></li>
  85.   <li><a href="#"  id="item11">Free Quote</a></li>
  86. 	<li><a href="#"  id="item12">Contact US</a></li>
  87.  </ul>
  88.  
  89. </div>
  90. <!-- Menu - bar 1 -->
  91.  
  92. </body>
  93. </html>
[HTML] pobierz, plaintext


Mam jeszcze pytanko: Jak mogę całe to menu wyrównać do środka (używająć CSS) questionmark.gif

Pozdrawiam.
Łukasz.
revyag
24.04.2007, 09:40:27
Najpierw parę poprawek w Twoim kodzie:

- masz dwa takie same id dla menu, tak nie można, trzeba zrobić z tego klasę
- div domyślnie jest elementem blokowym więc nadawanie mu display block to masło maślane
- taka konstrukcja nie przejdzie:
Kod
#menu_bar #item5, #item11 {}

musi być tak:
Kod
#menu_bar #item5, #menu_bar #item11 {}


Tu masz poprawiony css:
Kod
<style type="text/css">
body {
    margin: 0;
}
.menu_bar {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: Verdana;
    font-weight: bold;
    font-size: 8pt;
    color: #3C89B9;
}
.menu_bar li {
    dislpay: block;
    float: left;
    margin 0;
    text-align: center;
}
.menu_bar li a {
    text-decoration: none;
    color: #3C89B9;
    display: block;
    padding: 5px;
}
.menu_bar li a:hover {
    background: #3C89B9;
    color: #FFFFFF;
    text-decoration: none;
}

.menu_bar li #item1, .menu_bar li #item7 {
    width: 60px;
}
.menu_bar li #item2, .menu_bar li #item8 {
    width: 117px;
}
.menu_bar li #item3, .menu_bar li #item9 {
    width: 137px;
}
.menu_bar li #item4, .menu_bar li #item10 {
    width: 117px;
}
.menu_bar li #item5, .menu_bar li #item11 {
    width: 107px;
}
.menu_bar li #item6, .menu_bar li #item12 {
    width: 152px;
}
</style>

Dla drugiej listy konieczne jest clear:both.

[HTML] pobierz, plaintext 
  1. <ul class="menu_bar">
  2.     <li><a href="#" id="item1">Home</a></li>
  3. 	<li><a href="#" id="item2">Housekeeping</a></li>
  4. 	<li><a href="#" id="item3">Janitorial Cleaners</a></li>
  5. 	<li><a href="#" id="item4">Carpet Cleaning</a></li>
  6. 	<li><a href="#" id="item5">Floor Care</a></li>
  7. 	<li><a href="#" id="item6">Damage Restoration</a></li>
  8. </ul>
  9. <ul class="menu_bar" style="clear:both">
  10. 	<li><a href="#" id="item7">FAQ</a></li>
  11. 	<li><a href="#" id="item8">Showrooms</a></li>
  12. 	<li><a href="#" id="item9">Testimonials</a></li>
  13. 	<li><a href="#" id="item10">Coupons</a></li>
  14. 	<li><a href="#" id="item11">Free Quote</a></li>
  15. 	<li><a href="#" id="item12">Contact US</a></li>
  16. </ul>
[HTML] pobierz, plaintext
aradan
24.04.2007, 10:35:00
Dzięki. Działa teraz super.

A wiesz może, jak to wypozycjonować do środka strony questionmark.gif

Ja próbowałem użyć konstrukcji:

[HTML] pobierz, plaintext 
  1. body {
  2. 	 margin: 0;
  3. 	 text-align: center;
  4. 	 float: left;
  5. }
  6. #menu_bar {
  7. 	 list-style: none;
  8. 	 font-family: Verdana;
  9. 	 font-weight: bold;
  10. 	 font-size: 8pt;
  11. 	 color: #3C89B9;
  12. 	 float: center;
  13. 	 text-align:center;
  14. 	 margin:0 auto 0 auto;
  15. 	 display: block;
  16. }
[HTML] pobierz, plaintext


ale niestety nie działa.

Pozdrawiam.
Łukasz.
revyag
24.04.2007, 11:47:12
Poczytaj co daje styl float, bo z Twojego kodu widać że nie wiesz jak go używać. (float dla body questionmark.gif float:center questionmark.gif)


Dla .menu_bar ustaw szerokość, tak żeby pokrywała się z sumarczyną szerokością wszystkich itemów (łącznie z paddingiem).
Kod
.menu_bar {
    display:block;
    width:750px;
    margin:0 auto;
}
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.