Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]wydłużanie się diva.
Forum PHP.pl > Forum > Przedszkole
Drav
10.06.2009, 18:57:34
Witam. Koduje swój pierwszy layout za pomocą samych divów i css'a (wcześniej używałem tabel). Wszystko zakodowało się ładnie i było pięknie do czasu kiedy nie umieszczałem większej ilości tekstu niż przewiduje mój div. Wydłuża się on wtedy i wychodzi poza swoje wyznaczone miejsce. Czy da się temu jakoś zapobiec?

Oto kod strony od znacznika style smile.gif
[HTML] pobierz, plaintext 
  1. <style>
  2. body {
  3.     background-image: url('background.png');
  4.     background-repeat: repeat-x;
  5.     margin: 0
  6. }
  7. div#naglowek {
  8.     width: 1000px;
  9.     height: 63px;
  10.     margin-left: auto;
  11.     margin-right: auto; 
  12.     background-image: url('naglowek.png')    
  13. }
  14. div#logo {
  15.     width: 1000px;
  16.     height: 250px;
  17.     margin-left: auto;
  18.     margin-right: auto; 
  19.     background-image: url('logo.png')    
  20.  
  21. }
  22. div#glowna_top  {
  23.     width: 1000px;
  24.     height: 68px;
  25.     margin-left: auto;
  26.     margin-right: auto; 
  27.     background-image: url('glowna_top.png')    
  28. }
  29. div#glowna {
  30.     width: 1000px;
  31.     height: 100px;
  32.     margin-left: auto;
  33.     margin-right: auto; 
  34. }
  35. div#shadow_right {
  36.     width: 50px;
  37.     height: 100px;
  38.     background-image: url('shadow_right.png');
  39.     background-repeat: repeat-y;
  40.     float: right;
  41. }
  42. div#shadow_left {
  43.     width: 50px;
  44.     height: 100px;
  45.     background-image: url('shadow_left.png');
  46.     background-repeat: repeat-y;
  47.     float: right;
  48. }
  49. div#menu_shadow_right {
  50.     width: 33px;
  51.     height: 100px;
  52.     background-image: url('menu_shadow_right.png');
  53.     background-repeat: repeat-y;
  54.     float: right;
  55.     clear: right;
  56. }
  57. div#menu{
  58.     width: 228px;
  59.     height: 100px;
  60.     background-color: #0d0d0d;
  61.     float: right;
  62. }
  63. div#menu_shadow_left {
  64.     width: 24px;
  65.     height: 100px;
  66.     background-image: url('menu_shadow_left.png');
  67.     background-repeat: repeat-y;
  68.     float: right;
  69. }
  70. div#tresc {
  71.     width: 900px;
  72.     height: 100px;
  73.     background-image: url('tresc.png');
  74.     background-repeat: repeat-x;
  75.     float: right;
  76. }
  77. div#stopka {
  78.     width: 1000px;
  79.     height: 124px;
  80.     margin-left: auto;
  81.     margin-right: auto; 
  82.     background-image: url('stopka.png');
  83.     clear: both;
  84. }
  85. div#tekst {
  86.     float: left;
  87. }    
  88. </style>
  89. </head>
  90. <body>
  91.  
  92. <div id="naglowek">
  93. </div>
  94.  
  95. <div id="logo">
  96. </div>
  97.  
  98. <div id="glowna_top">
  99. </div>
  100.  
  101. <div id="glowna">
  102.  
  103.     <div id="shadow_right">
  104.     </div>
  105.     <div id="tresc">
  106.         <div id="menu_shadow_right">
  107.         </div>    
  108.         <div id="menu"></div>    
  109.         <div id="tekst">
  110.         a</div>
  111.         <div id="menu_shadow_left"></div>        
  112.     </div><div id="shadow_left"></div>
  113. </div>
  114.  
  115. <div id="stopka">
  116. </div>
  117.  
  118.  
  119. </body>
[HTML] pobierz, plaintext

Przepraszam za syf w układzie kodu, ale jestem przyzwyczajony robić tabulacje i inne dopieszczenia dopiero po wykonaniu pewnych czynności smile.gif
erix
10.06.2009, 20:01:48
Cytat
Wydłuża się on wtedy i wychodzi poza swoje wyznaczone miejsce. Czy da się temu jakoś zapobiec?

Każdy będzie kopiował i sprawdzał u siebie...?

Daj overflow: auto;

Cytat
Przepraszam za syf w układzie kodu, ale jestem przyzwyczajony robić tabulacje i inne dopieszczenia dopiero po wykonaniu pewnych czynności

Ciekawe, jak będziesz robił poprawki w tasiemcach 10000-linijkowych. tongue.gif
Drav
10.06.2009, 21:04:31
otóż mam teraz trochę inny problem. smile.gif Menu nie chce się wydłużyc do całej długości elementu tekst smile.gif Czy da się spowodować, aby element wydłużał się na maksymalną długość diva, w którym się znajduje?
kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" encoding="iso-8859-2">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <meta name="Author" content="Drav" />
  7. <meta name="Description" content="bla" />
  8. <style>
  9. body {
  10.     background-image: url('background.png');
  11.     background-repeat: repeat-x;
  12.     margin: 0;
  13.     background-color: #000000
  14. }
  15. div#naglowek {
  16.     width: 1000px;
  17.     height: 63px;
  18.     margin-left: auto;
  19.     margin-right: auto; 
  20.     background-image: url('naglowek.png')    
  21. }
  22. div#logo {
  23.     width: 1000px;
  24.     height: 250px;
  25.     margin-left: auto;
  26.     margin-right: auto; 
  27.     background-image: url('logo.png')    
  28.  
  29. }
  30. div#glowna_top  {
  31.     width: 1000px;
  32.     height: 68px;
  33.     margin-left: auto;
  34.     margin-right: auto; 
  35.     background-image: url('glowna_top.png')    
  36. }
  37. div#shadow_right {
  38.     width: 50px;
  39.     background-image: url('shadow_right.png');
  40.     background-repeat: repeat-y;
  41.     float: right;
  42. }
  43. div#shadow_left {
  44.     width: 50px;
  45.     background-image: url('shadow_left.png');
  46.     background-repeat: repeat-y;
  47.     float: right;
  48. }
  49. div#menu_shadow_right {
  50.     width: 33px;
  51.     background-image: url('menu_shadow_right.png');
  52.     background-repeat: repeat-y;
  53.     float: right;
  54. }
  55. div#menu{
  56.     width: 228px;
  57.     background-color: #0d0d0d;
  58.     float: right;
  59. }
  60. div#menu_shadow_left {
  61.     width: 24px;
  62.     background-image: url('menu_shadow_left.png');
  63.     background-repeat: repeat-y;
  64.     float: right;
  65.  
  66. }
  67. div#tresc {
  68.     width: 1000px;
  69.     height: 100px;
  70.     background-image: url('tresc.png');
  71.     background-color: #080808;
  72.     background-repeat: repeat-x;
  73.     margin-left: auto;
  74.     margin-right: auto; 
  75.  
  76. }
  77. div#stopka {
  78.     width: 1000px;
  79.     height: 124px;
  80.     margin-left: auto;
  81.     margin-right: auto; 
  82.     background-image: url('stopka.png');
  83.     clear: both;
  84. }
  85. div#tekst {
  86.     float: left;
  87.     width: 615px
  88. }    
  89. </style>
  90. </head>
  91. <body>
  92.  
  93.  
  94.  
  95. <div id="naglowek">
  96. <br />
  97. <br />
  98. </div>
  99.  
  100. <div id="logo">
  101. </div>
  102.  
  103. <div id="glowna_top">
  104. </div>
  105.  
  106.     <div id="tresc">
  107.         <div id="shadow_right">
  108.         </div>
  109.         <div id="menu_shadow_right">
  110.         </div>    
  111.         <div id="menu">
  112.         </div>    
  113.         <div id="tekst">
  114.         <br />
  115.         <br />
  116.         <br />
  117.         <br />
  118.         <br />
  119.         <br />
  120.         <br />
  121.         <br />
  122.         <br />
  123.         <br />
  124.         <br />
  125.         <br />
  126.         <br />
  127.         <br />
  128.         </div>    
  129.         <div id="menu_shadow_left">
  130.         </div>
  131.         <div id="shadow_left">
  132.     </div>        
  133.     </div>
  134.  
  135. <div id="stopka">
  136. </div>
  137.  
  138.  
  139. </body>
  140. </html>
[HTML] pobierz, plaintext
erix
10.06.2009, 21:29:39
Cytat
Czy da się spowodować, aby element wydłużał się na maksymalną długość diva, w którym się znajduje?

Po co załączasz dwa razy to samo...?

A co do problemu: faux-columns albo http://www.alistapart.com/articles/holygrail
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.