Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem z dwupoziomowym menu w IE
aradan
post
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 24.04.2006

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

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) (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif)

Pozdrawiam.
Łukasz.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Poczytaj co daje styl float, bo z Twojego kodu widać że nie wiesz jak go używać. (float dla body (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) float:center (IMG:http://forum.php.pl/style_emoticons/default/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;
}
Go to the top of the page
+Quote Post

Posty w temacie
- aradan   Problem z dwupoziomowym menu w IE   24.04.2007, 08:39:06
- - revyag   Najpierw parę poprawek w Twoim kodzie: - ma...   24.04.2007, 09:40:27
- - aradan   Dzięki. Działa teraz super. A wiesz może, jak to ...   24.04.2007, 10:35:00
- - revyag   Poczytaj co daje styl float, bo z Twojego kodu wid...   24.04.2007, 11:47:12

« Następny starszy · HTML \ XHTML · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 9.10.2025 - 10:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn