Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]div nie zajmuje całego ekranu
Forum PHP.pl > Forum > Przedszkole
Kuba707
21.06.2012, 23:41:20
Spójrzcie na screen: http://s4.ifotos.pl/img/screenpng_rsepaxn.png

Oto kod strony:
[PHP] pobierz, plaintext 
  1. <?php
  2. 	include 'config.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html>
  6. 	<head>
  7. 		<title>Zaplecze - Centrum Gier</title>
  8. 		<link rel="shortcut icon" href='favicon.ico' />
  9. 		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  10. 		<link rel="stylesheet" type="text/css" href="style.css" />
  11. 		<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
  12. 		<script type="text/javascript" src="javascript/top-bg.js"></script> <!-- Skrypt do zmiany tła w div#top -->
  13. 		<script type="text/javascript" src="javascript/encyklopedia.js"></script>
  14. 	</head>
  15. 	<body onload="top_bg_load()">
  16. 		<div id="nakladka">&nbsp;</div>
  17. 		<div id="dodajGre">
  18.  
  19. 		</div>
  20. 		<div id="top"></div>
  21. 		<div id="menu">
  22. 			<ul>
  23. 				<li><a href="index.php?page=home">Strona Główna</a></li>
  24. 				<li><a href="index.php?page=encyklopedia">Encyklopedia</a></li>
  25. 				<li><a href="#">Forum</a></li>
  26. 				<li><a href="#">Kontakt</a></li>
  27. 			</ul>
  28. 		</div>
  29. 		<div id="content">
  30.  
  31. 		</div>
  32. 		<div id="footer"><?php include 'stopka.html';?></div>
  33. 	</body>
  34. </html>
[PHP] pobierz, plaintext


A to style:
[PHP] pobierz, plaintext 
  1. html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #E0E0E0; }
  2.  
  3. a:link, a:visited, a {
  4. 	color: #000080;
  5. }
  6. a:hover {
  7. 	color: #006400;
  8. }
  9.  
  10. #top {
  11. 	width: 900px;
  12. 	height: 150px;
  13. 	border: 1px solid black;
  14. 	border-bottom: 0;
  15. 	margin: 50px auto 0 auto;
  16. 	background-image: url('images/top/4.jpg');
  17. 	border-top-left-radius: 15px 15px;
  18. 	border-top-right-radius: 15px 15px;
  19. }
  20.  
  21. #menu {
  22. 	width: 900px;
  23. 	height: 40px;
  24. 	border: 1px solid black;
  25. 	border-bottom: 0;
  26. 	margin: 0 auto;
  27. 	background-image: url('images/menu-czerwone.png');
  28. }
  29.  
  30. #content { 
  31. 	width: 860px;
  32. 	border: 1px solid black;
  33. 	margin: 0px auto 0 auto;
  34. 	padding-left: 20px;
  35. 	padding-right: 20px;
  36. 	padding-top: 10px;
  37. 	min-height: 50px;
  38. 	font-family: Arial, Helvetica, sans-serif;
  39. }
  40.  
  41. #footer {
  42. 	width: 900px;
  43. 	height: 35px;
  44. 	padding-top: 5px;
  45. 	border: 1px solid black;
  46. 	border-top: 0;
  47. 	margin: 0px auto 0 auto;
  48. 	background-image: url('images/menu-czerwone.png');
  49. 	border-bottom-left-radius: 15px 15px;
  50. 	border-bottom-right-radius: 15px 15px;
  51. 	text-align: center;
  52. 	font-size: 20px;
  53. 	color: white;
  54. }
  55.  
  56. #menu ul, #menu ul li {
  57. 	list-style: none;
  58. 	display: block;
  59. 	margin: 0; padding: 0;
  60. }
  61. #menu ul li {
  62. 	display: inline;	
  63. 	float: left;
  64. }
  65. #menu ul a:link, #menu ul a:visited {
  66. 	display: block;
  67. 	width: 150px;
  68. 	height: 34px;
  69. 	text-decoration: none;
  70. 	font-weight: bold;
  71. 	padding-top: 6px;
  72. 	background-image: none;
  73. 	text-align: center;
  74. 	color: white;
  75. 	font-size: 20px;
  76. }
  77. #menu ul a:hover {
  78. 	background-image: url('images/menu-zolte.png');
  79. 	color: black;
  80. }
  81.  
  82. table#wyswietlGre td { border: 1px solid gray; width: 240px;}
  83.  
  84. .komentarz {
  85. 	border: 1px outset gray;
  86. 	width: 600px;
  87. 	margin-bottom: 15px;
  88. }
  89. #komentarze {
  90. 	width: 600px;
  91. }
  92.  
  93. #dodajGre {
  94. 	width: 600px;
  95. 	height: 400px;
  96. 	border: 1px solid black;
  97. 	position: absolute;
  98. 	top: 50%;
  99. 	left: 50%;
  100. 	margin-left: -300px;
  101. 	margin-top: -200px;
  102. 	z-index: 50;
  103. 	background-color: white;
  104. }
  105.  
  106. #nakladka {
  107. 	width: 100%;
  108. 	height: 100%;
  109. 	position: absolute;
  110. 	z-index: 20;
  111. 	background-color: black;
  112. 	opacity: 0.8;
  113. 	margin: 0;
  114. 	padding: 0;
  115. }
[PHP] pobierz, plaintext


Pytanie: Dlaczego ten DIV nie zajmuje całej wysokości strony, tylko jest taki odstęp u góry, jak to naprawić?

EDIT:
Ta czarna nakładka to #nakladka, a ten biały prostokąt to przyszły box o id #dodajGre
IProSoft
21.06.2012, 23:51:38
margin: 50px auto 0 auto;
Kuba707
21.06.2012, 23:53:29
No ok, teraz jest dobrze. Ale to w takim razie jak ten #top trochę obniżyć ale żeby dalej ta #nakladka była w porządku? Niby mogę dać nad #topem niewidzialnego diva, ale to chyba niepoprawnie?
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.