Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Rozwalanie się tła w menu
Forum PHP.pl > Forum > Przedszkole
O$iek
9.10.2009, 18:28:30
Robię stronę dla znajomego i napotkałem na dość śmieszny problem.
Tło i obramowanie menu wychodzi sporo poza "ramy" strony. Problem występuje w Operze 10, FF 3,5 i Chrome 3.0,a o dziwo w IE6 działa tak jak powinno i proszę nie zwracać uwagi na kolorystykę, bo to nie tak będzie wyglądać strona.

IE6
Opera
Chrome
Firefox


Plik index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  4. 	<head>
  5. 		<title>Strona WWW</title>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 		<meta name="author" content="Osiek" />
  8. 		<meta name="language" content="pl" /> 
  9. 		<link href="main.css" type="text/css" rel="stylesheet" />
  10. 	</head>
  11. 	<body>
  12. 		<h1>
  13. 			<img src="images/top.png" alt="top strony" width="794px" height="164px"/>
  14. 		</h1>
  15. 		<ul id="navigation">
  16. 			<li><a href="#">Strona główna</a></li>
  17. 			<li><a href="#">O firmie</a></li>
  18. 			<li><a href="#">Serwis</a></li>
  19. 			<li><a href="#">Galeria</a></li>
  20. 			<li><a href="#">Kontakt</a></li>
  21. 		</ul>
  22. 		<div id="main-content">
  23. 		<h2>Tytuł</h2>
  24. 			<p>Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst</p>
  25. 			<p>Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst</p>
  26. 		</div>
  27. 		<div id="footer">
  28. 			<p>Š 2009 by Osiek Wszelkie prawe zastszeżone.</p>
  29. 		</div>
  30. 	</body>
  31. </html>
[HTML] pobierz, plaintext


Plik main.css
[CSS] pobierz, plaintext 
  1. html {width: 100%;}
  2. body 
  3. {
  4. width: 800px;
  5. margin: 0 auto;
  6. background-color: rgb(250, 0, 0);
  7. }
  8.  
  9. h1 
  10. {
  11. height: 164px;
  12. width: 794px;
  13. border: solid 3px #fff;
  14. margin-top: 35px;
  15. margin-bottom: 0;
  16. }
  17.  
  18. #main-content 
  19. {
  20. width: 794px;
  21. border: solid 3px #fff;
  22. }
  23.  
  24. #navigation 
  25. {
  26. margin: 0;
  27. width: 794px;
  28. height: 24px;
  29. border: solid 3px #fff;
  30. background-color: #000;
  31. text-align: center;
  32. }
  33.  
  34. #navigation ul 
  35. {
  36. padding: 0;
  37. margin: 0;
  38. list-style: none;
  39. }
  40.  
  41. #navigation li 
  42. {
  43. display: inline;
  44. }
  45.  
  46. #navigation a 
  47. {
  48. width: 120px;
  49. height: 24px;
  50. display: block;
  51. color: #fff;
  52. text-decoration: none;
  53. background-color: #000;
  54. float: left;
  55. }
  56. #navigation a:hover, a:active
  57. {
  58. text-decoration: underline;
  59. width: 120px;
  60. height: 24px;
  61. display: block;
  62. color: #000;
  63. background-color: #fff;
  64. float: left;
  65. }
  66. #footer 
  67. {
  68. width: 794px;
  69. height: 50px;
  70. margin: 0;
  71. border: solid 3px #fff;
  72. text-align: right;
  73. }
[CSS] pobierz, plaintext
Max Damage
9.10.2009, 18:51:35
Dopisz sobie: 
[CSS] pobierz, plaintext 
  1. padding:0;
[CSS] pobierz, plaintext

w #navigation i powinno działać.
O$iek
9.10.2009, 18:54:48
Rzeczywiście, zamiast w #navigation dałem w #navigation ul. Wielkie dzięki.
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-2024 Invision Power Services, Inc.