Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] powtarzanie "całego" tła
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
nowak_michal
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
gekon
Najpierw zrób to tak żebyśmy coś z tego zrozumieli, bo nie oszukujmy się ale kto dziś mówi staropolszczyzną?
nowak_michal
Rozumiem, chodzi o tabele i komórki.
Dzięki za kurs, zacząłem go czytać, mam nadzieje, że w krótkim czasie uda mi się "przepisać" te stronkę.

Pozdrawiam
Michał Nowak

PS. Doraźna pomoc: wystarczy wrzucić to w oddzielne tabele? Bo komórki zawsze będą się rozsuwać razem?
gekon
Zapomnij o tabelach, nie do tego służą.
nowak_michal
Dziś zaznajomiłem się ze strona podaną przez gekon, i zastanawiam się jak i czy przepisać te wszystkie table na divy czy zbudować wszystko od początku? Nie mam wprawy, więc nie wiem od czego zacząć. Możesz udzielić mi jakiejś rady od czego powinienem zacząć?
babejsza
Na początek możesz zacząć od czegoś takiego:

  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, h2 {font-family: Arial, Helvetica, sans-serif; font-size: 10px}
  18. #conteiner {width: 506px; margin: 0 auto;}
  19. #menu {float: left; width: 120px; margin: 0 5px 0 0; border: 1px solid #000}
  20. #menu li {list-style-type: none; padding: 5px 0 0; margin: 0 5px; border-bottom: 1px dotted #000 }
  21. #middle {float: left; width: 120px; margin: 0 5px 0 0; border: 1px solid #000}
  22. #content {float: left; width: 250px; border: 1px solid #000}
  23. </style>
  24. </head>
  25. <body>
  26. <div id="conteiner">
  27. <div id="menu">
  28. <ul>
  29. <li><a href="#">Newsy</a></li>
  30. <li><a href="#">Tor ATB</a></li>
  31. <li><a href="#">Puchar ATB Challenge</a></li>
  32. <li><a href="#">Opis toru</a></li>
  33. <li><a href="#">Eventy / Pokazy</a></li>
  34. <li><a href="#">Galeria</a></li>
  35. <li><a href="#">Sklep</a></li>
  36. <li><a href="#">Wspópraca</a></li>
  37. <li><a href="#">Kontakt</a></li>
  38. </ul>
  39. </div>
  40. <div id="middle">
  41. <h2>Najświeższe wiadomości:</h2>
  42. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec enim purus, congue et, facilisis in, commodo
  43. eget, dui. Praesent ultrices feugiat turpis.m venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam,
  44. turpis purus porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu,
  45. dolor. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam,
  46. cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet
  47. pellentesque. Curabitur non diam. Aenean ultricies augue nonummy arc</p>
  48. </div>
  49. <div id="content">
  50. <p>Donec in sem eget eros pellentesque euismod. Donec ultricies placerat turpis. Aenean pretium, tellus sit amet
  51. tristique commodo, nisi sapien porta arcu, in luctus diam augue sed metus. Etiam gravida purus sit amet felis.
  52. Praesent ac felis ac ipsum venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, turpis purus
  53. porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, dolor.
  54. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam,
  55. cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet pellentesque.
  56. Curabitur non diam. Aenean ultricies augue nonummy arcu.</p>
  57. </div>
  58.  
  59. </div>
  60. </body>
  61. </html>
nowak_michal
Przepraszam za moją nieaktywność lecz wyjechałem, to co babejsza naskrobał działa bardzo pięknie, lecz teraz nie wiem jak mam dorzucić grafikę do tych div-ów. A co do kodu to jest oszałamiająco mały, kilkanaście linijek.
babejsza
Tak na szybko. Nad grafikami musisz jeszcze popracować ja daję Ci tylko pogląd na to jak to powinno z sementycznego punktu widzenia wyglądać: http://www.2kola.com/test/test.htm

A teraz baw się ile wlezie smile.gif

Aha - nie wyśrodkowywałem tego w pionie bo mam wrażenie że ilość contentu będzie się zmieniać, a w takim przypadku jest to zbędny zabieg.
nowak_michal
Babejsza bardzo bardzo dziękuje za wskazanie odpowiedniej ścieżki, gekon zaś wskazał mi drogę, ja zabieram się do żmudnej pracy "małpka widzi, małpka robi" i w oparciu o to co Ty zrobiłeś buduję resztę, top i do tego bottom też, i może coś z tego wyjdzie.
Dziękuję za pomoc.

Mam kolejny problem. Dobudowałem 3 kolejne divy, jedna jest na dole po prawej stronie, i dwie kolejne są topka i logo. Udało mi się ustawić bottom na dole po prawej stronie pod "newsami", zacząłem więc kombinować nad logiem. Niestety nie potrafię tego ustawić dokładnie, w tej chwili (co można zobaczyć, jest odstęp między logiem a menu i newsami) topka i logo znajdują się nad całą resztą. Potrafię zrobić aby przylegały, ale nie są wycentrowane. Screen poglądowy:


Oto kod:
  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. #menu {float: left; width: 202px; margin: 0 5px 0 0; background: #1A1C1B url(images/browse.jpg) left top no-repeat;}
  21. #menu ul {background: #1A1C1B url(images/back_1.jpg) left top no-repeat; margin: 31px 0 0 0; padding: 0}
  22. #menu li {list-style-type: none; padding: 5px 0 0; margin: 0; border-bottom: 1px dotted #424242; margin: 0 30px }
  23. #menu li a {font-weight: bold; text-decoration: none; color: #FFF; display: block; padding: 0 0 3px 0; width: 142px}
  24. #menu li a:hover {padding: 0 0 3px 5px; width: 137px}
  25. #menuFoot {width: 202px; height: 63px; background: #1A1C1B url(images/back_2.jpg) left top no-repeat;}
  26. #middle {float: left; width: 155px; margin: 0 5px 0 0; background: #1A1C1B url(images/middle_middle.jpg) left top repeat-y;}
  27. #middle_top {background: transparent url(images/middle_top.jpg) left top no-repeat;}
  28. #middle_bottom {background: transparent url(images/middle_bottom.jpg) left bottom no-repeat; padding: 20px 10px}
  29. h2 {font-size: 11px; font-weight: normal; margin: 0 0 20px 0}
  30. #content {float: left; width: 325px; background: #1A1C1B url(images/content_middle.jpg) left top repeat-y;}
  31. #content_top {background: transparent url(images/content_top.jpg) left top no-repeat;}
  32. #content_bottom {background: transparent url(images/content_bottom.jpg) left bottom no-repeat; padding: 20px 10px}
  33.  
  34. #bottom {float: right; width: 521px; height: 95px;background:transparent url(images/bottom.jpg);}
  35. #text_bottom {padding: 20px 150px}
  36.  
  37.  
  38. #topka {float:inherit; margin: 0 auto 5px auto;width: 685px; height: 81px;background:transparent url(images/topka.jpg);}
  39. #logo {float:none; margin: 0 auto 0 auto; width:685px; height:198px; background:transparent url(images/logo.jpg);}
  40. </style>
  41. </head>
  42. <body>
  43. <div id="topka">
  44. </div>
  45. <div id="logo">
  46. </div>
  47. <div id="conteiner">
  48. <h1>Jakaś strona</h1>
  49. <div id="menu">
  50. <ul>
  51. <li><a href="#">Newsy</a></li>
  52. <li><a href="#">Tor ATB</a></li>
  53. <li><a href="#">Puchar ATB Challenge</a></li>
  54. <li><a href="#">Opis toru</a></li>
  55. <li><a href="#">Eventy / Pokazy</a></li>
  56. <li><a href="#">Galeria</a></li>
  57. <li><a href="#">Sklep</a></li>
  58. <li><a href="#">Wspópraca</a></li>
  59. <li><a href="#">Kontakt</a></li>
  60. </ul>
  61. <div id="menuFoot"></div>
  62. </div>
  63.  
  64.  
  65. <div id="middle">
  66. <div id="middle_top">
  67. <div id="middle_bottom">
  68. <h2>Najświeższe wiadomości:</h2>
  69. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec enim purus, congue et, facilisis in, commodo
  70. eget, dui. Praesent ultrices feugiat turpis.m venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam,
  71. turpis purus porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu,
  72. dolor. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam,
  73. cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet
  74. pellentesque. Curabitur non diam. Aenean ultricies augue nonummy arc</p>
  75. </div>
  76. </div>
  77. </div>
  78. <div id="content">
  79. <div id="content_top">
  80. <div id="content_bottom">
  81. <h2>Jakiś content:</h2>
  82. <p>Donec in sem eget eros pellentesque euismod. Donec ultricies placerat turpis. Aenean pretium, tellus sit amet
  83. tristique commodo, nisi sapien porta arcu, in luctus diam augue sed metus. Etiam gravida purus sit amet felis.
  84. Praesent ac felis ac ipsum venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, turpis purus
  85. porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, dolor.
  86. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam,
  87. cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet pellentesque.
  88. Curabitur non diam. Aenean ultricies augue nonummy arcu.</p>
  89. <p>Donec in sem eget eros pellentesque euismod. Donec ultricies placerat turpis. Aenean pretium, tellus sit amet
  90. tristique commodo, nisi sapien porta arcu, in luctus diam augue sed metus. Etiam gravida purus sit amet felis.
  91. Praesent ac felis ac ipsum venenatis ultrices. Nullam iaculis, lacus eu consectetuer aliquam, turpis purus
  92. porttitor nisi, quis lobortis enim mi a dui. Cras mauris nisl, euismod quis, porta ac, eleifend eu, dolor.
  93. Vivamus nec turpis. Curabitur nisl urna, porta at, pharetra sed, sodales sed, lectus. In pede diam,
  94. cursus et, fringilla eu, fermentum nec, mi. Morbi porta ipsum id arcu. Nullam eu nunc ac lectus aliquet pellentesque.
  95. Curabitur non diam. Aenean ultricies augue nonummy arcu.</p>
  96. </div>
  97. </div>
  98. </div>
  99.  
  100. <div id="bottom" >
  101. <div id="text_bottom">
  102. <h8> Copyright Krast.pl (c)2007 All right reserved. </h8>
  103. </div>
  104. </div>
  105. </div>
  106.  
  107. </body>
  108. </html>


Nie wiem czym ustawić to, bardzo proszę o wskazanie mi błędu. Wydaje mi się, że strasznie namieszałem, dokładając bottom, topka, logo
babejsza
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:

  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>


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