Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Problem z ustawieniem powielania tła i stopki na stronie
gwiazdka_root
post
Post #1





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 31.01.2013
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Witajcie (IMG:style_emoticons/default/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ł... (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
Michasko
post
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 31
Dołączył: 10.01.2006
Skąd: Działoszyn

Ostrzeżenie: (0%)
-----

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ć.

Ten post edytował Michasko 9.02.2013, 03:02:54
Go to the top of the page
+Quote Post
gwiazdka_root
post
Post #3





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 31.01.2013
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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


Go to the top of the page
+Quote Post
Michasko
post
Post #4





Grupa: Zarejestrowani
Postów: 283
Pomógł: 31
Dołączył: 10.01.2006
Skąd: Działoszyn

Ostrzeżenie: (0%)
-----

Możesz pokazać jak teraz dokładnie wygląda Twój kod ?
Albo rozrysować (chociażby w paintcie (IMG:style_emoticons/default/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.

Ten post edytował Michasko 9.02.2013, 11:00:08
Go to the top of the page
+Quote Post
gwiazdka_root
post
Post #5





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 31.01.2013
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Zmieniłam position na relative, ale dalej jest to samo... (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
Michasko
post
Post #6





Grupa: Zarejestrowani
Postów: 283
Pomógł: 31
Dołączył: 10.01.2006
Skąd: Działoszyn

Ostrzeżenie: (0%)
-----

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 (IMG:style_emoticons/default/smile.gif) Jak coś to pisz.
Go to the top of the page
+Quote Post
gwiazdka_root
post
Post #7





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 31.01.2013
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Dziękuję. Będę kombinowała (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 18:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn