Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Problem z ustawieniem powielania tła i stopki na stronie
Forum PHP.pl > Forum > Przedszkole
gwiazdka_root
9.02.2013, 01:53:50
Witajcie smile.gif

Mam drobny problem z którym borykam się i nie umiem sobie poradzić. Otóż jak widać na screenie po dodaniu tekstu tło (białe - jest jako background-image) się nie powtarza i jednocześnie stopka się nie przesówa w dół razem z tekstem... Załączam html i css. Proszę o jakieś wskazówki, bo kombinowałam już chyba ze wszystkim, nawet wujek google niezbyt pomogł... sad.gif

screen



[HTML] pobierz, plaintext 
  1. </head>
  2.  
  3. <body>
  4.  
  5. <div id="naglowek">
  6. 	<div id="menu_gorne"/>
  7.     	 <ul>
  8.  
  9.             <li><a href="#">GŁÓWNA</a></li>
  10.             <li><a href="#">GALERIE</a></li>
  11.             <li><a href="#">GRUPY</a></li>
  12.             <li><a href="#">APLIKACJE</a></li>
  13.             <li><a href="#">UŻYTKOWNICY</a></li>
  14.  
  15.        </ul> 
  16. 	</div>
  17.  
  18. 	<div id="menu_dolne"/>
  19. <ul>
  20.  
  21.         <li><a href="#">Newsy</a></li>
  22.         <li><a href="#">tekst</a></li>
  23.         <li><a href="#">tekst</a></li>
  24.         <li><a href="#">tekst</a></li>
  25.         <li><a href="#">tekst</a></li>
  26.   <li><a href="#">tekst</a></li>
  27.  
  28.    		</ul>
  29.     </div>
  30.  
  31.  
  32. <div id="logo"><img src="Zdjęcia/Lay/layout1_04.gif" /></div>
  33. <div id="button"><a href="main.html"><img src="Zdjęcia/Lay/logo.gif" /></a></div>
  34.  
  35.  
  36. </div>
  37.  
  38.  
  39. <div id="container">
  40.  
  41. <div id="nawigacja">
  42. 	<div id="lewe_menu_1">
  43. 		<ul>
  44.  
  45.         <li><a href="#">tekst</a></li>
  46.         <li><a href="#">tekst</a></li>
  47.         <li><a href="#">tekst</a></li>
  48.         <li><a href="#">tekst</a></li>
  49.         <li><a href="#">tekst</a></li>
  50.         <li><a href="#">tekst</a></li>
  51.  	 </ul>
  52.   </div>
  53.  
  54. 	<div id="lewe_menu_2">
  55. 		<ul>
  56.  
  57.         <li><a href="#">Lecznice</a></li>
  58.         <li><a href="#">Hodowle</a></li>
  59.         <li><a href="#">tekst</a></li>
  60.         <li><a href="#">tekst</a></li>
  61.   	</ul>
  62.     </div>  
  63.  
  64. 	<div id="tekst"></div>
  65.  
  66.  
  67. </div>
  68.  
  69.  
  70. <div id="tresc_strony"><img src="Zdjęcia/Lay/layout1_11.gif" />
  71.  
  72. 	<div id="text">Lorem ipsum dolor sit amet enim. Duis gravida, erat felis, malesuada tristique senectus et netus et ultrices posuere suscipit mauris. Nunc sed lorem id eros malesuada elit justo felis vitae odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed et ultrices metus nisl, tristique magna iaculis malesuada tristique lorem. Etiam vulputate, odio non mattis rhoncus purus, vehicula convallis pellentesque, justo consequat ipsum dolor a dolor. Pellentesque porta auctor. Nam laoreet purus at consequat eu, pede. Nullam augue quis arcu. Maecenas ac nulla. Nullam fermentum nonummy a, adipiscing dolor sit amet elit ultricies vehicula, tortor in dui. In turpis gravida pulvinar vitae, cursus consectetuer. Curabitur commodo. Cras in nibh eu lectus. Mauris mattis ipsum primis in enim. Sed adipiscing. Cum sociis natoque penatibus et malesuada fames ac ipsum. Morbi et magnis dis parturient montes, nascetur ridiculus mus. Fusce vitae ante. Vestibulum tempus vehicula, fringilla condimentum, urna mi, gravida non, ultrices posuere risus. Nunc et orci viverra accumsan. Cras vitae nunc ultrices vel, sapien. Donec id lorem. Suspendisse bibendum metus mi vitae ornare bibendum mi. Pellentesque egestas at, aliquet eget, neque. In tempus rutrum consectetuer adipiscing ac, vehicula sapien id magna. Sed pharetra. Suspendisse ultricies nulla, placerat nec, suscipit urna mattis sem. Pellentesque at nibh. Ut wisi at sagittis ultricies. Curabitur blandit iaculis, turpis egestas. Cras iaculis leo. Suspendisse dolor nunc, in interdum ipsum dolor sit amet, vestibulum nec, iaculis nisl. Vestibulum non adipiscing elit. Nullam imperdiet orci molestie vitae, vehicula ut, pellentesque quis, placerat consequat. Donec nec tristique congue. Nunc condimentum est diam, suscipit id, wisi. Maecenas felis. Nulla aliquet in, mauris. Nunc sapien. Maecenas sapien mauris vitae wisi vulputate wisi eu eros. Pellentesque facilisis diam sed justo. Vivamus metus a metus. Nullam consequat vel, luctus et malesuada fames ac augue. Sed lobortis velit in fermentum sed, vestibulum ac, laoreet urna eu lacus. Aenean quis nulla id diam. Aliquam erat id quam. Ut molestie tincidunt. Sed tristique lorem. Vestibulum ante felis, in faucibus orci quis leo. Suspendisse turpis luctus eget, velit. Cras tempus ornare pulvinar turpis. Aenean ac pede urna elit, consequat eu, ullamcorper pede id eros. Aliquam nonummy, mi. Fusce tristique, sollicitudin arcu. Praesent gravida feugiat dui, fermentum pede, molestie lorem hendrerit wisi. Phasellus pulvinar lacinia, magna auctor libero fermentum nisl mollis luctus et eros tincidunt vel, orci. Suspendisse justo vel neque vitae ultrices fringilla eget, facilisis risus. Donec consectetuer at, egestas accumsan. Fusce vitae orci. Integer eu mi. Donec ullamcorper, enim vel lorem. Fusce porttitor, quam sed leo facilisis pellentesque ligula. Aenean ac mauris mattis egestas, dui gravida vel, lorem. Nunc vehicula. Duis ornare risus. Nunc tempor auctor, urna a bibendum vel, purus. Pellentesque dolor nunc, nonummy sodales quam at ipsum. Fusce vel leo. In </div>
  73. </div>
  74.  
  75.  
  76. <div id="reklamy"></div>
  77.  
  78.  
  79. <div id="stopka"><img src="Zdjęcia/Lay/layout1_16.gif" />
  80. 	<div id="kontakt"><a href="#">kontakt</a></div>
  81.     <div id="reklama"><a href="#">reklama</a></div>
  82.     <div id="pomoc"><a href="#">pomoc</a></div>
  83.  
  84. </div>
  85.  
  86. </div>
  87.  
  88.  
  89.  
  90. </body>
  91. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. * {
  6.   padding: 0;
  7.   margin: 0;
  8.  
  9. }
  10.  
  11. html{height:100%}
  12.  
  13.  
  14. body {
  15.   min-height: 100%;
  16.   background-color: #6d8f00; position: relative; z-index: 1;
  17.   margin: 0 auto;
  18.   width:100%;
  19.  
  20. }
  21.  
  22. #container {
  23.   min-height:100%;
  24.   min-width:100%;
  25.   position:absolute; 
  26.  
  27.  }
  28.  
  29.  
  30. #naglowek {
  31.  
  32.   width: 100%;
  33.   height: 100%;
  34.   margin: 0;
  35.   padding: 0;
  36.   height:auto;
  37.   overflow:auto;
  38. }
  39.  
  40. #button {
  41.   width: 350px;
  42.   height: 131px;
  43.   background:url(../Zdj%C4%99cia/Lay/logo.gif) 0 0 no-repeat;
  44.   position: absolute; left: 21%; top: 20px; z-index: 2;
  45. }
  46.  
  47. #logo {
  48.   width: 913px;
  49.   height: 200px;
  50.   background:url(../Zdj%C4%99cia/Lay/layout1_04.gif) 0 0 no-repeat;
  51.   position: absolute; left: 21%; top: 0px;
  52. }
  53.  
  54.  
  55. #menu_gorne ul, ul li  {
  56.  
  57. 	display: block;
  58. 	list-style: none;
  59. 	margin: 0;
  60. 	padding: 0;
  61. }
  62.  
  63. #menu_gorne ul {
  64. 	float: left;
  65. 	background-color: none;
  66. 	position: absolute; left: 47%; top: 0,5%;
  67. 	z-index:2;
  68. }
  69.  
  70. #menu_gorne ul li {
  71. 	float: left;
  72. }
  73.  
  74. #menu_gorne ul a:link, ul a:visited {
  75. 	text-decoration: none;
  76. 	display: block;
  77. 	font-weight: bold;
  78. 	font-family: "Times New Roman", Times, serif;
  79. 	font-size: 14px;
  80. 	color: #fff;
  81. 	padding: 8px 10px;
  82.  
  83. }
  84.  
  85. #menu_gorne ul a:hover {
  86. 	background-color: #666666;
  87.  
  88. }
  89.  
  90. #menu_dolne ul,ul li{
  91. 	float: left;
  92. }	
  93.  
  94. #menu_dolne ul {
  95. 	float: left;
  96. 	background-color: #6d8f00;
  97. 	padding: 1px 0 1px 1px;
  98. 	border: 1px solid #6d8f00;
  99. 	position: absolute; left: 22%; top: 18.6%; z-index: 3;
  100. }
  101.  
  102. #menu_dolne ul li {
  103.  
  104. 	display: inline;
  105. 	white-space: nowrap;
  106. }
  107.  
  108. #menu_dolne ul a:link, ul a:visited {
  109. 	text-decoration: none;
  110. 	display: block;
  111. 	font-family:"Times New Roman", Times, serif;
  112. 	font-size: 16,5px;
  113. 	font-style: italic;
  114. 	font-weight: bold;
  115. 	background: #6d8f00 repeat-x center;
  116. 	color: #ffffff;
  117. 	padding: 5px 10px;
  118. 	border-right: 1px solid #fff;
  119. 	border-right: 1px solid #fff;
  120. }
  121.  
  122. #menu_dolne ul a:hover {
  123. 	background-color: #8d2121;
  124. 	color: #ffffff;	
  125. }
  126.  
  127.  
  128. #nawigacja {
  129.     background-image:url(../Zdj%C4%99cia/Lay/layout1_09.gif) repeat-y;
  130. 	background-position: center;
  131. 	margin:auto;
  132. 	padding: 0px;
  133. }
  134.  
  135. #lewe_menu_1 ul {
  136. 	width: 155px;
  137. 	padding: 2px 2px 1px 2px;
  138. 	background-color: #6d8f00;
  139. 	background-image:url(../Zdj%C4%99cia/Lay/layout1_09.gif) repeat-y;
  140. 	border: 3px #6d8f00;
  141. 	position: absolute; left: 22%; top: 45%;
  142. }
  143.  
  144.  
  145. #lewe_menu_1 ul, ul li {
  146. 	display: block;
  147. 	list-style: none;
  148. 	margin: 0;
  149. 	padding: 0;
  150. }
  151.  
  152. #lewe_menu_1 ul li {
  153. 	border-bottom: 1px solid #ffffff;
  154. }
  155.  
  156. #lewe_menu_1 ul a:link, ul a:visited {
  157.  
  158. 	display: block;
  159. 	width: 144px;
  160. 	text-decoration: none;
  161. 	padding: 7px;
  162. 	font-weight: bold;
  163. 	background-color: #6d8f00;
  164. 	color: #ffffff;
  165.  
  166. }
  167.  
  168. #lewe_menu_1 ul a:hover {
  169. 	width: 166px;
  170. 	background-color: #8d2121;
  171. 	color: #ffffff;
  172.  
  173. }
  174.  
  175.  
  176. #lewe_menu_2 ul {
  177. 	width: 155px;
  178. 	padding: 2px 2px 1px 2px;
  179. 	background-color: #6d8f00;
  180. 	border: 3px #6d8f00;
  181. 	position: absolute; left: 22%; top: 90%;
  182. }
  183.  
  184.  
  185. #lewe_menu_2 ul, ul li {
  186. 	display: block;
  187. 	list-style: none;
  188. 	margin: 0;
  189. 	padding: 0;
  190. }
  191.  
  192. #lewe_menu_2 ul li {
  193. 	border-bottom: 1px solid #ffffff;
  194. }
  195.  
  196. #lewe_menu_2 ul a:link, ul a:visited {
  197.  
  198. 	display: block;
  199. 	width: 144px;
  200. 	text-decoration: none;
  201. 	padding: 7px;
  202. 	font-weight: bold;
  203. 	background-color: #6d8f00;
  204. 	color: #ffffff;
  205.  
  206. }
  207.  
  208. #lewe_menu_2 ul a:hover {
  209. 	width: 166px;
  210. 	background-color: #8d2121;
  211. 	color: #ffffff;
  212.  
  213. }	
  214.  
  215.  
  216. #tresc_strony {
  217.      background-image:url(../Zdj%C4%99cia/Lay/layout1_11.gif) background-repeat: repeat-y;
  218. 	 position: absolute; left:21%; top: 27%; z-index:-2;
  219. 	 height:100%;
  220. }
  221.  
  222. #text {
  223.      width:60%;
  224. 	 position:absolute; left:25%; top:20%; z-index:5;
  225. }	 
  226.  
  227. #reklamy {
  228.      background-image:url(../Zdj%C4%99cia/Lay/layout1_15.gif) repeat-y;
  229. }	 
  230.  
  231. #stopka {
  232.      background:url(../Zdj%C4%99cia/Lay/layout1_16.gif) no-repeat;
  233. 	 position:absolute; left:21%; bottom:0;
  234. 	 clear: both;
  235.  
  236.  
  237. }
  238.  
  239. #kontakt {
  240.      position:absolute; right:80px; bottom: 10px;
  241. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  242. 	 font-size:14px; color:#CC0000;
  243. }
  244.  
  245.  
  246. #reklama {
  247.      position:absolute; right:220px; bottom: 10px;
  248. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  249. 	 font-size:14px;
  250. 	 color:#CC0000;
  251. }
  252.  
  253.  
  254. #pomoc {
  255.      position:absolute; right:380px; bottom: 10px;
  256. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  257. 	 font-size:14px; color:#CC0000;
  258. }
  259.  
  260.  
[HTML] pobierz, plaintext
Michasko
9.02.2013, 02:43:08
Przy "#tresc_strony" masz:
[CSS] pobierz, plaintext 
  1. height: 100%;
[CSS] pobierz, plaintext
- usuń to. W ten sposób stwierdzasz, że DIV ma mieć wysokość 100%, ale nie wysokości strony, tylko okna przeglądarki - więc w ten sposób to nie zadziała. Poza tym stopce zawsze warto nadać "clear: both;" - w ten sposób zostanie ustawiona w taki sposób, aby nic nie było po jej bokach (zostanie zepchnięta w dół). Szczególnie przydatne jest to wtedy, gdy używamy takich właściwości jak 'float' (np. przy tworzeniu sidebarów - "paneli bocznych").
Przykładowa struktura strony, która będzie się rozciągać i stopka będzie na dole:
[HTML] pobierz, plaintext 
  1. <div id="naglowek">NAGLOWEK</div>
  2. <div id="menu">MENU</div>
  3. <div id="tresc_strony"><p>TRESC STRONY</p></div>
  4. <div id="stopka">STOPKA</div>
[HTML] pobierz, plaintext
i CSS:
[CSS] pobierz, plaintext 
  1. html, body {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. #naglowek {
  7.   width: 100%;
  8.   height: 200px;
  9. }
  10.  
  11. #menu {
  12.   width: 100%;
  13.   height: 40px;
  14. }
  15.  
  16. #tresc_strony {
  17.   width: 100%;
  18.   min-height: 200px;
  19. }
  20.  
  21. #stopka {
  22.   width: 100%;
  23.   height: 100px;
  24. }
[CSS] pobierz, plaintext

Jeśli będą na siebie DIV-y nachodzić, to możesz pomiędzy nie wrzucić jakiś znacznik, którym je od siebie odseparujesz, np:
[HTML] pobierz, plaintext 
  1. <div style="clear: both;"></div>
[HTML] pobierz, plaintext


Powinno śmigać.
gwiazdka_root
9.02.2013, 10:18:04
Dzięki za odpowiedź.

Jeśli chodzi o height 100% to usunęłam. W stopce clear:both już jest. Niestety, kiedy robię 

[HTML] pobierz, plaintext 
  1. #tresc_strony {   // tekst lorem ipsum rozszerza mi się i przesuwa w prawo
  2. width: 100%;
  3. min-height: 200px;
  4. }
  5.  
  6. #stopka {   // tekst na stopce rozszerza się i przesuwa w prawo, a sam obrazek stopki wędruje trochę do góry
  7. width: 100%;
  8. height: 100px;
  9. }
[HTML] pobierz, plaintext


Michasko
9.02.2013, 10:57:45
Możesz pokazać jak teraz dokładnie wygląda Twój kod ?
Albo rozrysować (chociażby w paintcie smile.gif - na screenie nie widać nagłówka) jak dokładnie miałaby wyglądać Twoja strona (prostokąty z atrybutami ID) ?
Bo niestety po przekopiowaniu Twojego kodu uzyskuje całkiem inny efekt niż na Twoim screenie.

Generalnie widzę, że pozycjonujesz absolutnie - a w ten sposób np. stopka nie ustawi Ci się pod treścią, bo ustalasz z góry w jakiej pozycji ma się ona pojawić. Czyli w takim wypadku Twoje "bottom: 0;" przy stopce oznacza "0 pikseli od dolnej krawędzi przeglądarki" - nie od dolnej krawędzi strony). Przy czym pozycja ta jest ustalana tylko i wyłącznie przy ładowaniu strony - nie zmienia się ona np. w trakcie przewijania.
gwiazdka_root
9.02.2013, 13:12:57
Zmieniłam position na relative, ale dalej jest to samo... sad.gif

Kolorem zaznaczyłam zmiany.
Przesyłam screena i kod. Ogólnie są 2 główne divy nagłówek i container, w których zagnieżdżone są pozostałe.

screen


[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. * {
  6.   padding: 0;
  7.   margin: 0;
  8.  
  9. }
  10.  
  11. html{height:100%}
  12.  
  13.  
  14. body {
  15.   min-height: 100%;
  16.   background-color: #6d8f00; position: relative; z-index: 1;
  17.   margin: 0 auto;
  18.   width:100%;
  19.  
  20. }
  21.  
  22. #container {
  23.   min-height:100%;
  24.   min-width:100%;
  25.   position:relative;
  26.  
  27.  
  28.  }
  29.  
  30.  
  31. #naglowek {
  32.  
  33.   width: 100%;
  34.   height: 100%; // usunęłam
  35.   margin: 0;
  36.   padding: 0;
  37.   height:auto;
  38.   overflow:auto;
  39. }
  40.  
  41. #button {
  42.   width: 350px;
  43.   height: 131px;
  44.   background:url(../Zdj%C4%99cia/Lay/logo.gif) 0 0 no-repeat;
  45.   position: absolute; left: 21%; top: 20px; z-index: 2;
  46. }
  47.  
  48. #logo {
  49.   width: 913px;
  50.   height: 200px;
  51.   background:url(../Zdj%C4%99cia/Lay/layout1_04.gif) 0 0 no-repeat;
  52.   position: absolute; left: 21%; top: 0px;
  53. }
  54.  
  55.  
  56. #menu_gorne ul, ul li  {
  57.  
  58. 	display: block;
  59. 	list-style: none;
  60. 	margin: 0;
  61. 	padding: 0;
  62. }
  63.  
  64. #menu_gorne ul {
  65. 	float: left;
  66. 	background-color: none;
  67. 	position: absolute; left: 47%; top: 0,5%;
  68. 	z-index:2;
  69. }
  70.  
  71. #menu_gorne ul li {
  72. 	float: left;
  73. }
  74.  
  75. #menu_gorne ul a:link, ul a:visited {
  76. 	text-decoration: none;
  77. 	display: block;
  78. 	font-weight: bold;
  79. 	font-family: "Times New Roman", Times, serif;
  80. 	font-size: 14px;
  81. 	color: #fff;
  82. 	padding: 8px 10px;
  83.  
  84. }
  85.  
  86. #menu_gorne ul a:hover {
  87. 	background-color: #666666;
  88.  
  89. }
  90.  
  91. #menu_dolne ul,ul li{
  92. 	float: left;
  93. }	
  94.  
  95. #menu_dolne ul {
  96. 	float: left;
  97. 	background-color: #6d8f00;
  98. 	padding: 1px 0 1px 1px;
  99. 	border: 1px solid #6d8f00;
  100. 	position: absolute; left: 22%; top: 18.6%; z-index: 3;
  101. }
  102.  
  103. #menu_dolne ul li {
  104.  
  105. 	display: inline;
  106. 	white-space: nowrap;
  107. }
  108.  
  109. #menu_dolne ul a:link, ul a:visited {
  110. 	text-decoration: none;
  111. 	display: block;
  112. 	font-family:"Times New Roman", Times, serif;
  113. 	font-size: 16,5px;
  114. 	font-style: italic;
  115. 	font-weight: bold;
  116. 	background: #6d8f00 repeat-x center;
  117. 	color: #ffffff;
  118. 	padding: 5px 10px;
  119. 	border-right: 1px solid #fff;
  120. 	border-right: 1px solid #fff;
  121. }
  122.  
  123. #menu_dolne ul a:hover {
  124. 	background-color: #8d2121;
  125. 	color: #ffffff;	
  126. }
  127.  
  128.  
  129. #nawigacja {
  130.     background-image:url(../Zdj%C4%99cia/Lay/layout1_09.gif) repeat-y;
  131. 	background-position: center;
  132. 	margin:auto;
  133. 	padding: 0px;
  134. }
  135.  
  136. #lewe_menu_1 ul {
  137. 	width: 155px;
  138. 	padding: 2px 2px 1px 2px;
  139. 	background-color: #6d8f00;
  140. 	background-image:url(../Zdj%C4%99cia/Lay/layout1_09.gif) repeat-y;
  141. 	border: 3px #6d8f00;
  142. 	position: absolute; left: 22%; top: 45%;
  143. }
  144.  
  145.  
  146. #lewe_menu_1 ul, ul li {
  147. 	display: block;
  148. 	list-style: none;
  149. 	margin: 0;
  150. 	padding: 0;
  151. }
  152.  
  153. #lewe_menu_1 ul li {
  154. 	border-bottom: 1px solid #ffffff;
  155. }
  156.  
  157. #lewe_menu_1 ul a:link, ul a:visited {
  158.  
  159. 	display: block;
  160. 	width: 144px;
  161. 	text-decoration: none;
  162. 	padding: 7px;
  163. 	font-weight: bold;
  164. 	background-color: #6d8f00;
  165. 	color: #ffffff;
  166.  
  167. }
  168.  
  169. #lewe_menu_1 ul a:hover {
  170. 	width: 166px;
  171. 	background-color: #8d2121;
  172. 	color: #ffffff;
  173.  
  174. }
  175.  
  176.  
  177. #lewe_menu_2 ul {
  178. 	width: 155px;
  179. 	padding: 2px 2px 1px 2px;
  180. 	background-color: #6d8f00;
  181. 	border: 3px #6d8f00;
  182. 	position: absolute; left: 22%; top: 90%;
  183. }
  184.  
  185.  
  186. #lewe_menu_2 ul, ul li {
  187. 	display: block;
  188. 	list-style: none;
  189. 	margin: 0;
  190. 	padding: 0;
  191. }
  192.  
  193. #lewe_menu_2 ul li {
  194. 	border-bottom: 1px solid #ffffff;
  195. }
  196.  
  197. #lewe_menu_2 ul a:link, ul a:visited {
  198.  
  199. 	display: block;
  200. 	width: 144px;
  201. 	text-decoration: none;
  202. 	padding: 7px;
  203. 	font-weight: bold;
  204. 	background-color: #6d8f00;
  205. 	color: #ffffff;
  206.  
  207. }
  208.  
  209. #lewe_menu_2 ul a:hover {
  210. 	width: 166px;
  211. 	background-color: #8d2121;
  212. 	color: #ffffff;
  213.  
  214. }	
  215.  
  216.  
  217. #tresc_strony {
  218.      background-image:url(../Zdj%C4%99cia/Lay/layout1_11.gif) background-repeat: repeat-y; background-attachment: scroll;
  219. 	 position: relative; left:21%; top: 27%; z-index:-2;
  220.  
  221. }
  222.  
  223. #text {
  224.      width:60%;
  225. 	 position:absolute; left:25%; top:20%; z-index:5;
  226. }	 
  227.  
  228. #reklamy {
  229.      background-image:url(../Zdj%C4%99cia/Lay/layout1_15.gif) repeat-y;
  230. }	 
  231.  
  232. #stopka {
  233.      background:url(../Zdj%C4%99cia/Lay/layout1_16.gif) no-repeat;
  234. 	 clear: both;
  235. 	 position:relative; left:21%; bottom:0;
  236.  
  237.  
  238.  
  239.  
  240.  
  241. }
  242.  
  243. #kontakt {
  244.      position:absolute; right:80px; bottom: 10px;
  245. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  246. 	 font-size:14px; color:#CC0000;
  247. }
  248.  
  249.  
  250. #reklama {
  251.      position:absolute; right:220px; bottom: 10px;
  252. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  253. 	 font-size:14px;
  254. 	 color:#CC0000;
  255. }
  256.  
  257.  
  258. #pomoc {
  259.      position:absolute; right:380px; bottom: 10px;
  260. 	 font-family:Verdana, Arial, Helvetica, sans-serif;
  261. 	 font-size:14px; color:#CC0000;
  262. }
  263.  
  264.  
[HTML] pobierz, plaintext
Michasko
9.02.2013, 14:08:15
Zrób sobie 3 główne DIV-y:
- nagłówek
- treść
- stopka

W nich umieszczaj sobie pozostałe rzeczy. Niech każdy "główny" DIV ma position: relative (to jest domyślne, więc nie trzeba tego pisać w CSS - można po prostu usunąć regułę 'position').
Tutaj przykład (wzorowałem sie na Twoim rysunku): http://hotel-ms.netstrefa.eu/przykladowe_projekty/test.html
Oczywiście to tylko struktura, która pozwoli na "nierozwalanie się" strony. Reszta rzeczy należy do Ciebie smile.gif Jak coś to pisz.
gwiazdka_root
9.02.2013, 14:21:54
Dziękuję. Będę kombinowała smile.gif
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.