Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Podział strony na 3 częśći
Forum PHP.pl > Forum > Przedszkole
boob
5.07.2013, 13:28:06
Witam!
Zaczynam zabawe z html i CSS, zaczołem sobie robić jakaś stronkę i mam taki problem.

wygląd jak na razie http://test-nauka.strefa.pl/
kod:
[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.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" land"pl">
  4. 	<head>
  5.  
  6. 		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Ustawia kodowanie  -->
  7. 		<meta http-equiv="content-language" content="pl" /> <!-- Ustawia język&#x2192;  -->
  8.  
  9. 		<meta name="robots" content="noindex, follow" />
  10.  
  11. 		<title>cos tam</title>
  12. 		<meta name="description" content="Serwis poświęcony czemus tam" /> <!-- description oznacza opis strony -->
  13. 		<meta name="keywords" content="cos" /> <!-- słowa kluczowe do wyszukiwania -->
  14.  
  15. 		<style type="text/css">
  16. 			/*<![CDATA[*/
  17.  
  18. 			*
  19. 			{
  20. 				padding: 0;
  21. 				margin: 0;
  22. 			}
  23.  
  24. 			body
  25. 			{
  26. 				background-color: black;
  27. 				background-image: url('images/bottom_texture.jpg');
  28. 				background-repeat: repeat;
  29. 				background-attachment: fixed;
  30. 			}
  31.  
  32. 			div.kontener
  33. 			{
  34. 				width: 1100px;
  35. 				margin: 0 auto;
  36. 			}
  37. 			#kontener_top_panel
  38. 			{
  39. 				margin-top: 20px;
  40. 				background-image: url('images/sheet_top.png');
  41. 				width: 1100px;
  42. 				height: 57px;
  43. 			}			
  44. 			#kontener_top_obraz
  45. 			{
  46. 				background-image: url('images/sheet.png');
  47. 				width: 1100px;
  48. 				background-repeat: repeat-y;
  49. 			}
  50. 			#kontener_srodek
  51. 			{
  52. 				position: relative;
  53. 				background-image: url('images/sheet.png');
  54. 				width: 1100px;
  55. 				background-repeat: repeat-y;
  56. 			}
  57. 			#kontener_bottom_panel
  58. 			{
  59. 				margin-bottom: 15px;
  60. 				background-image: url('images/sheet_bottom.png');
  61. 				width: 1100px;
  62. 				height: 57px;
  63. 			}
  64. 			#menu_left
  65. 			{
  66. 				position: absolute;
  67. 				top: 15px;
  68. 				left: 25px;
  69. 				width: 200px;
  70. 				height: 500px;
  71. 				border: 2px;
  72. 				border-style: solid;
  73. 			}
  74. 			#menu_middle
  75. 			{
  76. 				position: absolute;
  77. 				top: 15px;
  78. 				left: 240px;
  79. 				width: 615px;
  80. 				height: 500px;
  81. 				border: 2px;
  82. 				border-style: solid;
  83. 			}
  84. 			#menu_right
  85. 			{
  86. 				position: absolute;
  87. 				top: 15px;
  88. 				right: 25px;
  89. 				width: 200px;
  90. 				height: 500px;
  91. 				border: 2px;
  92. 				border-style: solid;
  93. 			}
  94. 			/*]]>*/
  95. 		</style>
  96.  
  97. 	</head>
  98. 		<body>
  99. 		<!-- górny panel -->
  100. 		<div aligin="center">
  101. 			<div class="kontener">
  102. 				<div id="kontener_top_panel">
  103.  
  104. 				</div>
  105. 			</div>
  106. 		</div>
  107. 		<!-- górny obrazek -->
  108. 		<div aligin="center">
  109. 			<div class="kontener">
  110. 				<div id="kontener_top_obraz" align="center">
  111. 					<img src="images/front2.png" alt="Strafa-Mangi" />
  112.  				</div>				
  113. 			</div>			
  114. 		</div>
  115. 		<!-- środek, zawartość strony -->
  116. 		<div aligin="center">
  117. 			<div class="kontener">
  118. 				<div id="kontener_srodek" align="center">
  119.                                                Jak tutaj wpisuje tekst to powiększa mi się panel kopiując tło
  120. 					<!-- pasek z lewej strony -->
  121. 					<div id="menu_left">
  122. 						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
  123. 					</div>
  124. 					<!-- pasek środkowy -->
  125. 					<div id="menu_middle">
  126. 						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
  127. 					</div>	
  128. 					<!-- pasek z prawej strony -->
  129. 					<div id="menu_right">
  130. 						jjjjjjjjjj<br /><br /><br /><br /><br /><br /><br /><br />jjjjjjj
  131. 					</div>					
  132. 				</div>				
  133. 			</div>			
  134. 		</div>		
  135. 		<!-- dolny panel -->
  136. 		<div aligin="center">
  137. 			<div class="kontener">
  138. 				<div id="kontener_bottom_panel">
  139.  
  140. 				</div>
  141. 			</div>
  142. 		</div>
  143. 	</body>
[HTML] pobierz, plaintext


Chcę zrobić tak, że by podzielić środkową częśc tej strony na 3 częśći, tak jak są ramki na stronie.
Tak że w lewej i prawej ramce będa jakieś ramki z elementami typu menu, wyszukaj itp.
A na środku np. news. Tylko że zrobienie tych <div> niepowoduje kopiowanie tła, myślałem na <frameset> a gdzies przeczytałem że lepiej niekożystać.
Chce żeby to tło sie powiększało wraz z rozmiarem ramek.
Bardzo proszę o pomoc, jestem po przeczytaniu jedenj ksązki o html i css, więc niepamiętam jeszcze wszystkich znaczników.
Helid
6.07.2013, 12:21:24
http://jsfiddle.net/vAzdT/
clearfix używasz aby się nie rozjechało po tym przez floaty
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.