Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problemy z wyświetlaniem divow
Forum PHP.pl > Forum > Przedszkole
MnicH.
23.02.2009, 12:38:47
Witam,
potrzebuje pomocy. Zrobiłem stronę na divach ale wszystko się rozmywa, albo nasuwa na siebie.
http://turystyka.ayz.pl/index.html - efekt

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <meta http-equiv="Content-Style-Type" content="text/css" />
  6. <title></title>
  7.  
  8. <link rel="stylesheet" href="glowna.css" type="text/css" />
  9. </head>
  10. <body>
  11. <div class="top_minimenu">
  12. <img src="images/img_1.png"> <img src="images/img_2.png">
  13. </div>
  14.  
  15. <div class="top_logo">
  16.  
  17. <img src="images/img_3.png">
  18. </div>
  19.  
  20. <div class="top_menu">
  21. <img src="images/img_4.png"> <img src="images/img_5.png"> <img src="images/img_6.png"> <img src="images/img_7.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/img_8.png"> <img src="images/img_9.png"> <img src="images/img_10.png"> <img src="images/img_11.png">
  22. </div>
  23.  
  24. <div class="miasta">
  25. <div class="miasta_1"></div>
  26. <div class="miasta_2"></div>
  27. <div class="miasta_3"></div>
  28.  
  29. <div class="miasta_4"></div>
  30. </div>
  31.  
  32. <div class="lewo">
  33. <div class="menu_naglowek"><p class="menu_naglowekp">Menu</p></div>
  34.  
  35. <div class="menu_srodek">
  36. <ul>
  37. <li>Lorem Ipsum Sit Dolar Lorem Ipsum Sit Dolar
  38. <li>Lorem Ipsum Sit Dolar Lorem Ipsum Sit Dolar
  39. <li>Lorem Ipsum Sit Dolar Lorem Ipsum Sit Dolar
  40. </ul>
  41.  
  42. </div>
  43. <div class="menu_dol"></div>
  44. <div class="menu_naglowek"><p class="menu_naglowekp">Subskrybcja</p></div>
  45.  
  46. <div class="menu_srodek">
  47. <p class="text">Je�li chcesz być informowany o nowo�ciach i promocjach w naszym serwisie - zapisz się!</p>
  48. </div><div class="menu_dol"></div>
  49. <div class="menu_naglowek"><p class="menu_naglowekp">Logowanie do systemu</p></div>
  50.  
  51. <div class="menu_srodek">
  52. <form method="post"><br>
  53. login  <input class="mini" name="Name" type="text" size="15" value="loginf"><br>
  54. hasło <input class="mini" name="Name" type="password" size="15" value="haslo"><br><br>
  55. <input type=image src="images/img_16.png" name="sub">&nbsp;&nbsp;<img src="images/img_17.png">
  56. </form>
  57. </div>
  58.  
  59. <div class="menu_dol"></div>
  60. </div>
  61.  
  62.  
  63.  
  64.  
  65. <div class="srodek">
  66. <div class="srodek_naglowek"><p class="menu_naglowekp" style="color: #534d27;">Polecane obiekty</p></div>
  67. <div class="srodek_srodek"><p class="text">Polecane obiekty</p></div>
  68. <div class="srodek_dol"></div>
  69.  
  70. <div class="srodek_naglowek2"><p class="menu_naglowekp">Wyszukaj w serwisie</p></div>
  71. <div class="srodek_srodek"><p class="text">Szukajka itd.</p></div>
  72.  
  73. <div class="srodek_dol"></div>
  74. </div>
  75.  
  76.  
  77. <div class="prawo">
  78. <div class="menu_naglowek"><p class="menu_naglowekp">Ostatnio dodane obiekty</p></div>
  79. <div class="menu_srodek">
  80.  
  81. <p class="text">Ostatnio dodane</p>
  82.  
  83. </div>
  84. <div class="menu_dol"></div>
  85. <div class="menu_naglowek"><p class="menu_naglowekp">Menu</p></div>
  86.  
  87. <div class="menu_srodek">
  88. <ul>
  89. <li>Lorem Ipsum Sit Dolar
  90. <li>Lorem Ipsum Sit Dolar
  91. <li>Lorem Ipsum Sit Dolar
  92. <li>Lorem Ipsum Sit Dolar
  93. <li>Lorem Ipsum Sit Dolar
  94. <li>Lorem Ipsum Sit Dolar
  95. <li>Lorem Ipsum Sit Dolar
  96. <li>Lorem Ipsum Sit Dolar
  97. <li>Lorem Ipsum Sit Dolar
  98. <li>Lorem Ipsum Sit Dolar
  99. <li>Lorem Ipsum Sit Dolar
  100. <li>Lorem Ipsum Sit Dolar
  101. </ul>
  102. </div>
  103. <div class="menu_dol"></div>
  104.  
  105. </div>
  106.  
  107. <div class="stopka">
  108. <p class="text">(c) 2008. Copyright by <b>turystykawpolsce.com.pl</b></p>
  109. </div>
[HTML] pobierz, plaintext


Css:
[HTML] pobierz, plaintext 
  1. body{
  2. 	background-image: url(images/img_tlo.png);
  3. 	font-family: Tahoma;
  4. 	font-size: 12px;
  5. 	color: #534D27;
  6. 	margin: 0;
  7. 	padding: 0;
  8. }
  9.  
  10. .top_minimenu{
  11.  	position: relative;
  12.    left: 10%;
  13.    top: 0px;
  14.    width: 400px;
  15.    height: 20px; 
  16. }
  17.  
  18. .top_logo{
  19. 	 position: relative;
  20.    left: 10%;
  21.    top: 2px;
  22.    width: 802px;
  23.    height: auto; 
  24. }
  25.  
  26. .top_menu{
  27. 	position: relative;
  28.    left: 10%;
  29.    top: 5px;
  30.    width: 802px;
  31.    height: auto; 
  32. }
  33.  
  34. .miasta{
  35. 	position: relative;
  36.    left: 10%;
  37.    top: 5px;
  38.    width: 802px;
  39.    height: auto;
  40. }
  41.  
  42. .miasta_1{
  43. 	background-image: url(images/img_43.png);
  44. 	width: 796px;
  45. 	height: 10px;
  46. }
  47.  
  48. .miasta_2{
  49. 	background-image: url(images/img_42.png);
  50. 	width: 796px;
  51. 	height: 19px;
  52. }
  53.  
  54. .miasta_3{
  55. 	background-image: url(images/img_41.png);
  56. 	width: 796px;
  57. 	height: 114px;
  58. }
  59.  
  60. .miasta_4{
  61. 	background-image: url(images/img_36.png);
  62. 	width: 796px;
  63. 	height: 9px;
  64. }
  65.  
  66. .lewo{
  67. 	position: relative;
  68. 	overflow: hidden;
  69. 	float: left;
  70.    left: 10%;
  71. 	top: 5px;
  72.    width: 171px;
  73.    height: auto; 
  74. 	position: relative;
  75. }
  76.  
  77. .prawo{
  78. 	position: relative;
  79. 	overflow: hidden;
  80. 	float: right;
  81. 	right: 10%;
  82.    top: 5px;
  83.    width: 171px;
  84.    height: auto; 	
  85. 	position: relative;
  86. }
  87.  
  88. .menu_naglowek{
  89. 	margin-top: 5px;
  90. 	background-image: url(images/img_12.jpg);
  91. 	overflow: hidden;
  92.    width: 171px;
  93.    height: 37px;
  94. 	}
  95.  
  96. p.menu_naglowekp{
  97. 	text-align: left;
  98. 	color: #FFFFFF;
  99. 	margin-left: 8px;
  100. 	margin-top: 10px;
  101. 	font-weight: bold;
  102. 	overflow: hidden; 
  103. }
  104.  
  105. p.text{
  106. 	text-align: left;
  107. 	margin-left: 10px;
  108. 	margin-top: 10px;
  109. 	right: -2%;
  110. 	overflow: hidden; 
  111. }
  112. .menu_srodek{
  113. 	background-image: url(images/img_37.png);
  114. 	overflow: hidden;
  115.    width: 171px;
  116.    height: auto; 
  117. }
  118.  
  119. ul{
  120. 	list-style-image: url(images/img_men.png);
  121. 	padding: 2px;
  122. 	margin-left: 11px;
  123. }
  124.  
  125. li{
  126. 	list-style-image: url(images/img_men.png);
  127. 	left: -5px;
  128. 	padding: 2px;
  129. 	margin-left: 11px;
  130. }
  131.  
  132. .menu_dol{
  133. 	background-image: url(images/img_39.png);
  134. 	overflow: hidden;
  135.    width: 171px;
  136.    height: 7px; 
  137. }
  138.  
  139. .srodek_srodek{
  140. 	background-image: url(images/img_38.png);
  141. 	overflow: hidden;
  142.    width: 421px;
  143.    height: auto; 	
  144. }
  145.  
  146. .srodek_dol{
  147. 	background-image: url(images/img_40.png);
  148. 	overflow: hidden;
  149.    width: 421px;
  150.    height: 8px; 	
  151. }
  152. .srodek_naglowek{
  153. 	margin-top: 5px;
  154. 	background-image: url(images/img_13.jpg);
  155. 	overflow: hidden;
  156.    width: 421px;
  157.    height: 37px;
  158. }
  159.  
  160. .srodek_naglowek2{
  161. 	margin-top: 5px;
  162. 	background-image: url(images/img_24.png);
  163. 	overflow: hidden;
  164.    width: 421px;
  165.    height: 37px;
  166. }
  167.  
  168. .srodek{
  169. 	position: relative;
  170. 	overflow: hidden;
  171. 	float: left;
  172.    left: 12%;
  173.    top: 5px;
  174.    width: 421px;
  175.    height: auto; 
  176. 	position: relative;
  177.  
  178. }
  179.  
  180. .stopka{
  181. 	margin-left: 10%;
  182. 	clear: both;
  183. 	overflow: hidden;
  184. 	background-image: url(images/img_20.jpg);
  185. 	width: 796px;
  186.    height: 41px;
  187. }
  188.  
  189. form{
  190. 	text-align: center;
  191. 	font-weight: bold;
  192. }
  193.  
  194. input.mini{
  195. 	background-image: url(images/img_mini2.png);
  196. 	width: 110px;
  197. 	height: 20px;
  198. 	color: #534D27;
  199. 	margin: 2px;
  200. 	border: 1px solid #c6b99a;
  201. 	text-align: center;
  202. 	font-weight: bold;
  203. 	}
  204.  
  205. a, a:active, a:focus, a:hover, a:link, a:visited {
  206. 	color: #32CD32;
  207.  
  208. }
[HTML] pobierz, plaintext


Co jest nie tak?
Chrom
23.02.2009, 12:48:39
znalazłem coś takego:

Cytat
Nie próbuj robić układu strony za pomocą position:relative z niezerowym top/left. Przez to, że obiekt będzie widoczny gdzie indziej, niż zajmuje miejsce,
będziesz robić dwa różne układy strony, z czego jeden będzie niewidoczny
.

strona http://kurs.browsehappy.pl/CSS/Position
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.