Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z menu poziomym
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
przesq
13.12.2012, 09:18:14
Witam,
Mam do zrobienia prostą stronkę i mam menu, które różnie w różnych przeglądarkach wygląda - w firefox jest do przyjęcia. Dodatkowo chciałbym aby całość była na środku.
Jak dam na początku div align="center" to jest na środku, ale wiem, że align="center" nie jest poprawnym rozwiązaniem.
Kawałek kodu:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. /* <![CDATA[ */
  3.  
  4. html, body {
  5.     font-family: Verdana, Geneva, Arial, sans-serif;
  6. 	font-size: 12px; 
  7. 	padding: 0px; 
  8. 	margin: 0px;
  9. 	height: 100%;
  10. 	background-color: #777777;
  11. }
  12.  
  13. #NAGLOWEK {
  14.     width: 998px;
  15.     text-align: center;
  16.     background-color: black;
  17. }
  18.  
  19. #NAGLOWEK ul {
  20. 	display: inline;
  21.     list-style-type: none;
  22.     margin: 0;
  23.     padding: 0;
  24.     font-size: 12px;
  25.     text-align: center;
  26.     width: 800px;
  27. }
  28. #NAGLOWEK ul li {
  29.     display: table-cell;
  30.     list-style-type: none;
  31.     padding: 14px;
  32.     margin: 0;
  33.     white-space: nowrap;
  34.     background-color: white;
  35.     text-align: center;
  36.     min-width: 120px;
  37. }
  38.  
  39. /* ]]> */
  40. </style>
  41.  
  42. <div id="NAGLOWEK">
  43. <ul>
  44. 	<li><a href="">Strona główna</a></li><li style="border-left: solid 2px #ff6633;"><a href="">Strona 2</a></li><li style="border-left: solid 2px #ff6633;"><a href="">Strona 3asdf</a></li><li style="border-left: solid 2px #ff6633;"><a href="">Strona 4f</a></li><li style="border-left: solid 2px #ff6633;"><a href="">Strona 5aaa</a></li>
  45. </ul>
  46. </div>
  47.  
[HTML] pobierz, plaintext


Jak sprawdzam ten kawałek kodu to w IE ułożyło się jeden pod drugim natomiast na stronie mam prawidłowo.
W chrome jest do lewej strony.

Może ma ktoś lepszy pomysł na to - miałem to menu na tabeli zrobione, ale nie chcę stosować tabel.
rocktech.pl
13.12.2012, 09:32:39
Witam.

Zrób lekki porządek z tym kodem smile.gif

Jak chcesz na środku kontener to:
[CSS] pobierz, plaintext 
  1. #NAGLOWEK {
  2.     margin: 0 auto;
  3. }
[CSS] pobierz, plaintext






przesq
13.12.2012, 09:43:56
Po to piszę na forum aby ktoś pomógł mi zrobić porządek z tym kodem bo do końca sam nie umiem.
Pod IE 9 nadal jest przy lewej stronie.
rocktech.pl
13.12.2012, 09:49:53
1) Postaraj się zwalidować te kod ...
2) Dodaj plik http://meyerweb.com/eric/tools/css/reset/ na top
3) 
[CSS] pobierz, plaintext 
  1. html, body {
  2.     width: 100%;
  3. }
[CSS] pobierz, plaintext
przesq
14.12.2012, 08:54:28
Ekspertem w css nie jestem więc liczę na ewentualne uwagi (działa prawidłowo pod IE, Firefox, Opera, Chrome)
Zrobiłem tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. 	<title>Menu poziome</title>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. 	<meta http-equiv="Content-Language" content="pl" />
  7.  
  8. <style type="text/css">
  9. /* <![CDATA[ */
  10.  
  11. html, body {
  12.     font-family: Verdana, Geneva, Arial, sans-serif;
  13. 	font-size: 12px; 
  14. 	padding: 0px; 
  15. 	margin: 0px;
  16. 	height: 100%;
  17. 	width: 100%;
  18. 	background-color: #777777;
  19. }
  20.  
  21. #NAGLOWEK {
  22.     text-align: center;
  23.     background-color: #111111;
  24. }
  25.  
  26. #NAGLOWEK ul, ul li {
  27. 	display: inline-block;
  28. 	list-style: none;
  29. 	margin: 0;
  30. 	padding: 0;
  31. }
  32.  
  33. #NAGLOWEK ul li {
  34. 	float: left;
  35. }
  36.  
  37. #NAGLOWEK ul a:link, ul a:visited {
  38. 	text-decoration: none;
  39. 	display: block;
  40. 	min-width: 120px;
  41. 	text-align: center;
  42. 	background-color: white;
  43. 	color: black;
  44. 	padding: 11px;
  45. 	font-weight: bold;
  46. }
  47.  
  48. #NAGLOWEK ul a:hover {
  49. 	color: #ff6633;
  50. 	background-color: #FFFFCC;
  51. 	font-weight: bold;
  52. }
  53.  
  54. /* ]]> */
  55. </style>
  56.  
  57. </head>
  58.  
  59. <body>
  60.  
  61. <div style="margin: 0 auto; width: 998px; min-height: 780px; background-color: #888888;">
  62. 	<div id="NAGLOWEK">
  63. 		<ul>
  64. 			<li><a href="">Strona główna</a></li>
  65. 			<li style="border-left: solid 2px #ff6633;"><a href="">Strona 2</a></li>
  66. 			<li style="border-left: solid 2px #ff6633;"><a href="">Strona 3asdf</a></li>
  67. 			<li style="border-left: solid 2px #ff6633;"><a href="">Strona 4f</a></li>
  68. 			<li style="border-left: solid 2px #ff6633;"><a href="">Strona 5aaa</a></li>
  69. 		</ul>
  70. 	</div>
  71. 	<div id="TRESC">tresc...</div>
  72. </div>
  73.  
  74. </body>
  75. </html>
[HTML] pobierz, plaintext
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.