Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [SOLVED] Kalendarz na div'a na całą stronę
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
angel2953
11.05.2009, 13:26:28
mam skrypt, który mi generuje taki kod HTML kalendarza 
[HTML] pobierz, plaintext 
  1. <!-- Calendar for May 2009 -->
  2. <div class='calendar'>
  3. 	<div class='caption'>May 2009</div>
  4.  
  5. 	<div class='row-names'>
  6. 		<div class='names' abbr='Monday'>Monday</div>
  7. 		<div class='names' abbr='Tuesday'>Tuesday</div>
  8. 		<div class='names' abbr='Wednesday'>Wednesday</div>
  9. 		<div class='names' abbr='Thursday'>Thursday</div>
  10. 		<div class='names' abbr='Friday'>Friday</div>
  11. 		<div class='names' abbr='Saturday'>Saturday</div>
  12. 		<div class='names' abbr='Sunday'>Sunday</div>
  13. 	</div>
  14. 	<div class='row-days'>
  15. 		<div class='day-empty'> </div>
  16. 		<div class='day-empty'> </div>
  17. 		<div class='day-empty'> </div>
  18. 		<div class='day-empty'> </div>
  19.  
  20. 		<div class='day'>1</div>
  21. 		<div class='day'>2</div>
  22. 		<div class='day'>3</div>
  23. 	</div>
  24. 	<div class='row-days'>
  25. 		<div class='day'>4</div>
  26. 		<div class='day'>5</div>
  27.  
  28. 		<div class='day'>6</div>
  29. 		<div class='day'>7</div>
  30. 		<div class='day'>8</div>
  31. 		<div class='day'>9</div>
  32. 		<div class='day'>10</div>
  33. 	</div>
  34.  
  35. 	<div class='row-days'>
  36. 		<div class='day-current'>11</div>
  37. 		<div class='day'>12</div>
  38. 		<div class='day'>13</div>
  39. 		<div class='day'>14</div>
  40. 		<div class='day'>15</div>
  41.  
  42. 		<div class='day'>16</div>
  43. 		<div class='day'>17</div>
  44. 	</div>
  45. 	<div class='row-days'>
  46. 		<div class='day'>18</div>
  47. 		<div class='day'>19</div>
  48. 		<div class='day'>20</div>
  49.  
  50. 		<div class='day'>21</div>
  51. 		<div class='day'>22</div>
  52. 		<div class='day'>23</div>
  53. 		<div class='day'>24</div>
  54. 	</div>
  55. 	<div class='row-days'>
  56. 		<div class='day'>25</div>
  57.  
  58. 		<div class='day'>26</div>
  59. 		<div class='day'>27</div>
  60. 		<div class='day'>28</div>
  61. 		<div class='day'>29</div>
  62. 		<div class='day'>30</div>
  63. 		<div class='day'>31</div>
  64.  
  65. 	</div>
  66. </div>
[HTML] pobierz, plaintext


i teraz chciałem go rozciągnąć na całą stronę za pomocą takiego stylu css:
Kod
.calendar {
    display:                     table;
    width:                        100%;
}
.caption {
    font-weight:                 bold;
    text-align:                 center;
    display:                     table-caption;
}
.row-names {
    display:                     table-header-group;
}
.names {
    display:                     table-cell;
    font-weight:                 bold;
    width:                        15%;
}
.row-days {
    display:                     table-row-group;
}
.day-empty {
    display:                     table-cell;
    width:                        15%;
    height:                        150px;
}
.day-current {
    display:                     table-cell;
    font-weight:                 bold;
    width:                        15%;
    height:                        150px;
}
.day {
    display:                     table-cell;
    width:                        15%;
    height:                        150px;
}


Opera ladnie go rozciąga ale FF tylko w poziomie a IE wogóle wszystko olewa :/
athei
11.05.2009, 14:47:59
Dlaczego nie wykorzystasz do tego tabeli?
IE6,7 nie wie co to jest display:table http://www.quirksmode.org/css/display.html
angel2953
11.05.2009, 16:00:12
chciałem na div'ach ale jak się nie da to trudno. BTW: IE8 też nie wie co to table...

@athei: dzięki za linka przyda się ^^
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.