Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html] powtarzanie "całego" tła
nowak_michal
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 25.04.2007

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

Witam!
Mam taki problem: [w linku]
http://www.nowakmichal.nazwa.pl/test/test.html
Po prawej stronie pod tekstem "..Curabitur non diam. Aenean ultricies augue nonummy arcu..." wyświetla mi się powtórzenie mojego tła, ale wyświetla się, jak widać ucięte (aby zrównać się z tłem po lewej stronie). Nie wiem jak zrobić by te dwa "bloki" były niezależne od siebie, tzn, jeden obojętnie jaka długość, i to nie wpływało na ten drugi blok. Czy wystarczy je wrzucić w inne tabele? (teraz mnie oświeciło jak popatrzyłem na kod) To jest jeden z moich problemów a drugi, to jak zrobić by po prawej stronie powtarzało tylko cały obrazek a nie jego fragment? Bo jeśli dopisze się parę linijek to powstaje ten sam efekt jaki można zobaczyć w tej chwili.

Pozdrawiam
Michał Nowak
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
babejsza
post
Post #2





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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

Odstęp między nowymi div'amii starymi powstaje przez margin o wartości 40px dla div'a conteiner. Swoją drogą te dwa nowe div'y powinieneś również wstawić do conteiner'a. Tak samo jak stopkę. Z nowych div'ów usuń float'y. Służą one do ustawiania elementów blokowych w linii jeden obok drugiego, a Tobie to tu nie potrzebne. Z kolei jeżeli już "float'owałeś" jakieś elementy to po zakończeniu tej czynności powinno się "wyczyścić" je poprzez dodanie po nich clear: left.

Wzór poniżej:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 		<meta name="Description" content="" />
  6. 		<meta name="Keywords" content="" />
  7. 		<meta name="Robots" content="index, follow" />
  8. 		<meta name="revisit-after" content="1 days" />
  9. 		<meta name="Distribution" content="Global" />
  10. 		<meta name="author" content="" />
  11. 		<meta name="reply-to" content="" />
  12. 		<meta name="owner" content="" />
  13. 		<meta name="copyright" content="" />
  14. 		<title>Untitled Document</title>
  15. 		<style type="text/css">
  16. 			body, div, p, form, h1, h2, h3, h4, img, ul, li {border: none; margin: 0; padding: 0}
  17. 			body {font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: #3A3D3D; color: #FFF}
  18. 			h1 {display: none}
  19. 			#conteiner {width: 692px; margin: 40px auto 0 auto;}
  20.  
  21. 			#topka {margin: 0 0 5px 0; height: 81px; background: transparent url(images/topka.jpg) left top no-repeat;}
  22. 			#logo {margin: 0 0 5px 0; height: 198px; background: transparent url(images/logo.jpg) left top no-repeat;}
  23.  
  24. 			#menu {float: left; width: 202px; margin: 0 5px 0 0; background: #1A1C1B url(images/browse.jpg) left top no-repeat;}
  25. 			#menu ul {background: #1A1C1B url(images/back_1.jpg) left top no-repeat; margin: 31px 0 0 0; padding: 0}
  26. 			#menu li {list-style-type: none; padding: 5px 0 0; margin: 0; border-bottom: 1px dotted #424242; margin: 0 30px }
  27. 			#menu li a {font-weight: bold; text-decoration: none; color: #FFF; display: block; padding: 0 0 3px 0; width: 142px}
  28. 			#menu li a:hover {padding: 0 0 3px 5px; width: 137px}
  29. 			#menuFoot {width: 202px; height: 63px; background: #1A1C1B url(images/back_2.jpg) left top no-repeat;}
  30. 			#middle {float: left; width: 155px; margin: 0 5px 0 0;  background: #1A1C1B url(images/middle_middle.jpg) left top repeat-y;}
  31. 			#middle_top {background: transparent url(images/middle_top.jpg) left top no-repeat;}
  32. 			#middle_bottom {background: transparent url(images/middle_bottom.jpg) left bottom no-repeat; padding: 20px 10px}
  33. 			h2 {font-size: 11px; font-weight: normal; margin: 0 0 20px 0}
  34. 			#content {float: left; width: 325px; background: #1A1C1B url(images/content_middle.jpg) left top repeat-y;}
  35. 			#content_top {background: transparent url(images/content_top.jpg) left top no-repeat;}
  36. 			#content_bottom {background: transparent url(images/content_bottom.jpg) left bottom no-repeat; padding: 20px 10px}
  37.  
  38.  
  39. 			#footer {padding: 20px 150px;  height: 95px; background: transparent url(images/bottom.jpg) top left no-repeat;}
  40.  
  41. 			.clear {clear: left}
  42.  
  43. 		</style>
  44. 	</head>
  45. 	<body> 
  46.  
  47. 		<div id="conteiner">
  48. 			<div id="topka"></div>
  49. 			<div id="logo"><h1>Jakaś strona</h1></div>
  50. 			<div id="menu">
  51. 				<ul>
  52. 					<li><a href="#">Newsy</a></li>
  53. 					<li><a href="#">Tor ATB</a></li>
  54. 					<li><a href="#">Puchar ATB Challenge</a></li>  
  55. 					<li><a href="#">Opis toru</a></li>
  56. 					<li><a href="#">Eventy / Pokazy</a></li>
  57. 					<li><a href="#">Galeria</a></li>
  58. 					<li><a href="#">Sklep</a></li>
  59. 					<li><a href="#">Wspópraca</a></li>
  60. 					<li><a href="#">Kontakt</a></li>
  61. 				</ul>
  62. 				<div id="menuFoot"></div>
  63. 			</div>
  64.  
  65.  
  66. 			<div id="middle">
  67. 				<div id="middle_top">
  68. 					<div id="middle_bottom">
  69. 						<h2>Najświeższe wiadomości:</h2>
  70. 						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec enim purus, congue et, facilisis in, commodo 
  71. 						eget, dui. Praesent ultrices feugiat turpis.m venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, 
  72. 						turpis purus porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, 
  73. 						dolor. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam, 
  74. 						cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet 
  75. 						pellentesque. Curabitur non diam. Aenean ultricies augue nonummy arc</p>
  76. 					</div>
  77. 				</div>
  78. 			</div>
  79. 			<div id="content">
  80. 				<div id="content_top">
  81. 					<div id="content_bottom">
  82. 						<h2>Jakiś content:</h2>
  83. 						<p>Donec in sem eget eros pellentesque euismod. Donec ultricies placerat turpis. Aenean pretium, tellus sit amet
  84. 						tristique commodo, nisi sapien porta arcu, in luctus diam augue sed metus. Etiam gravida purus sit amet felis. 
  85. 						Praesent ac felis ac ipsum venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, turpis purus 
  86. 						porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, dolor. 
  87. 						Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam, 
  88. 						cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet pellentesque. 
  89. 						Curabitur non diam. Aenean ultricies augue nonummy arcu.</p>
  90. 						<p>Donec in sem eget eros pellentesque euismod. Donec ultricies placerat turpis. Aenean pretium, tellus sit amet
  91. 						tristique commodo, nisi sapien porta arcu, in luctus diam augue sed metus. Etiam gravida purus sit amet felis. 
  92. 						Praesent ac felis ac ipsum venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, turpis purus 
  93. 						porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, dolor. 
  94. 						Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam, 
  95. 						cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet pellentesque. 
  96. 						Curabitur non diam. Aenean ultricies augue nonummy arcu.</p>
  97. 					</div>
  98. 				</div>
  99. 			</div>
  100. 			<br class="clear" />
  101. 			<div id="footer">Copyright Krast.pl (c)2007 All right reserved.</div>
  102. 		</div>
  103.  
  104. </body>
  105. </html>
[HTML] pobierz, plaintext


I pamiętaj żeby nie nadużywać żadnych znaczników. Tzn. jeżeli coś możesz zrobić za pomocą jednego to tak zrób. Znaczniki "hx" to są nagłówki. Stopka nagłówkiem nie jest więc nie ma potrzeby dawać go w te znaczniki.

Poprawki robiłem na szybko z palca bez podglądu, ale wydaje mi się że powinno wszystko grać. Poczytaj jeszcze dokładniej ten kurs, do którego link dał Ci gekon. Dodatkowo możesz korzystać z tej strony: http://www.cssmania.pl/.

pozdr.

Ten post edytował babejsza 3.05.2007, 20:14:57
Go to the top of the page
+Quote Post

Posty w temacie
- nowak_michal   [html] powtarzanie "całego" tła   26.04.2007, 07:17:54
- - gekon   Najpierw zrób to tak żebyśmy coś z tego zrozumieli...   26.04.2007, 07:26:59
- - nowak_michal   Rozumiem, chodzi o tabele i komórki. Dzięki za ku...   26.04.2007, 14:34:18
- - gekon   Zapomnij o tabelach, nie do tego służą.   26.04.2007, 23:16:40
- - nowak_michal   Dziś zaznajomiłem się ze strona podaną przez gekon...   27.04.2007, 13:22:08
- - babejsza   Na początek możesz zacząć od czegoś takiego: [HTM...   27.04.2007, 13:43:49
- - nowak_michal   Przepraszam za moją nieaktywność lecz wyjechałem, ...   1.05.2007, 22:16:33
- - babejsza   Tak na szybko. Nad grafikami musisz jeszcze poprac...   2.05.2007, 11:00:15
- - nowak_michal   Babejsza bardzo bardzo dziękuje za wskazanie odpow...   3.05.2007, 19:12:40
- - babejsza   Odstęp między nowymi div'amii starymi powstaje...   3.05.2007, 19:43:54

« Następny starszy · HTML \ XHTML · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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