Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Div - powtarzanie w pionie
Forum PHP.pl > Forum > Po stronie przeglądarki
jezol90
25.07.2007, 18:21:47
Witam

Mam taki problem. Robię stronę na div'ach i chce aby lewa i prawa krawedź bloku o wysokości 1px powtarzała się w pionie wraz z powiększaniem się zawartości strony. Chodzi mi o coś takiego jak w przypadku tabelek i komórek które zwiększają swoje rozmiary wraz z zawartością.

Kod
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="container">
  3.  
  4.         <div id="top-border"></div>
  5.         <div id="middle-div">
  6.                 <div id="left-border"></div>
  7.                 <div id="page">
  8.                         <div id="top">&nbsp;</div>
  9.                 </div>
  10.                 <div id="rigth-border"></div>
  11.         </div>
  12.         <div id="bottom-border"></div>
  13.  
  14. </div>
  15. </body>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. body {
  2. width: 100%;
  3. height: 100%;
  4. padding: 0px;
  5. margin: 0px;
  6. background-color: #690B0B;}
  7.  
  8. #container {
  9. margin: 0px auto;
  10. background-color: #7F1818;
  11. width: 800px;
  12. margin-top: 10px;overflow: auto;}
  13.  
  14. /* obramowanie */
  15.  
  16. #top-border {
  17. width: 100%;
  18. height: 3px;
  19. background: #7F1818 url(../images/top-border.gif) no-repeat top;
  20. }
  21.  
  22. #left-border {
  23. width: 3px;
  24. height: 100%;
  25. background: #7F1818 url(../images/left-border.gif) repeat-y left;
  26. float: left;}
  27.  
  28. #right-border {
  29. width: 3px;
  30. height: 100%;
  31. background: #7F1818 url(../images/right-border.gif) repeat-y right;
  32. float: left;}
  33.  
  34. #bottom-border {
  35. width: 100%;
  36. height: 3px;
  37. background: #7F1818 url(../images/bottom-border.gif) no-repeat bottom;
  38. }
  39.  
  40. #middle-div {
  41. width: 800px;
  42. }
  43.  
  44.  
  45. #top {
  46. margin: 0px auto;
  47. height: 256px;
  48. width: 767px;
  49. margin-top: 15px;
  50. margin-bottom: 15px;
  51. background: #7F1818 url(../images/top.jpg) no-repeat top;
  52. }
[HTML] pobierz, plaintext


chodzi i oto żeby krawedzie left i right-border wyświetlały się i powiększały wraz z zawartością. Przy zmianie #left-border { height: 100% } na jakąś wyskość obramowanie powtarza się ale wykracza poza zawartośc strony.
abc667
25.07.2007, 18:24:09
poszukaj pod hasłem faux columns
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.