Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zaokrąglone rogi, dopasywanie wzdłuż i wszerz., 9 divów, środkowy rządzący kolegami
Rewil
post
Post #1





Grupa: Zarejestrowani
Postów: 175
Pomógł: 0
Dołączył: 19.09.2009

Ostrzeżenie: (10%)
X----


Witam, mam zrobionego diva który chcę aby mógł się wzłuż i wszerz rozciągać.

http://koka.pctk.pl

Jak poinformować dwa pozostałe divy, żeby dorównały się od tego odchodzącego?

Przykładowo, jeśli nagłówek przesunie część kolumny. Dolne powinny overflowem, łapać szerokość do końca i ustawiać własną grafikę poszerzoną o repeat.
Chodzi mi głównie bardziej o logikę zbudowania czegoś takiego, ew. naprowadzenie.

  1. <div class="dymek">
  2.  
  3. <div class="dtresc">
  4. <div class="lgr"></div><div class="topg">Nagłówek</div>
  5. <div class="lr"></div><div class="trg">Jakiś tam tekst</div>
  6. <div class="ldr"></div><div class="btg"></div>
  7. </div>
  8.  
  9. <div class="rogi">
  10. <div class="pgr"></div>
  11. <div class="pr"></div>
  12. <div class="pdr"></div>
  13. </div>
  14.  
  15. </div>


  1. body{
  2. background:url('../grafika/tlo.png') repeat-x;
  3. background-color: #ffc54f;
  4. font-family:Arial;
  5. font-size: 11px;
  6. color:#4e4e4e;
  7. padding:0;
  8. margin:0;
  9. /*overflow-y: scroll;*/
  10. }
  11.  
  12. .dtresc{
  13. float:left;
  14. }
  15.  
  16. .rogi{
  17. float:left;
  18. }
  19.  
  20. /* gora */
  21.  
  22. .lgr{
  23. background:url('../grafika/dymki_01.png') no-repeat;
  24. width:52px;
  25. height:27px;
  26. float:left;
  27. }
  28.  
  29. .topg{
  30. background:url('../grafika/dymki_02.png') repeat-x;
  31. min-width:236px;
  32. height:27px;
  33. float:left;
  34. color:#ff7800;
  35. line-height:40px;
  36. font-size:12px;
  37. font-weight:bold;
  38. overflow:hidden;
  39. }
  40.  
  41. .pgr{
  42. background:url('../grafika/dymki_03.png') no-repeat;
  43. width:33px;
  44. height:27px;
  45. }
  46.  
  47. /* srodek */
  48.  
  49. .lr{
  50. background:url('../grafika/dymki_04.png') no-repeat;
  51. width:22px;
  52. height:37px;
  53. float:left;
  54. clear:both;
  55. }
  56.  
  57. .trg{
  58. background:url('../grafika/dymki_05.png') repeat-x #f2f2f2;
  59. min-width:266px;
  60. min-height:37px;
  61. float:left;
  62. overflow:hidden;
  63. }
  64.  
  65. .pr{
  66. background:url('../grafika/dymki_06.png') no-repeat;
  67. width:33px;
  68. height:37px;
  69. }
  70.  
  71. /* dol */
  72.  
  73. .ldr{
  74. background:url('../grafika/dymki_07.png') no-repeat;
  75. width:105px;
  76. height:47px;
  77. float:left;
  78. clear:both;
  79. }
  80.  
  81. .btg{
  82. background:url('../grafika/dymki_08.png') no-repeat;
  83. min-width:183px;
  84. height:47px;
  85. float:left;
  86. }
  87.  
  88. .pdr{
  89. background:url('../grafika/dymki_09.png') no-repeat;
  90. width:33px;
  91. height:47px;
  92. }
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.12.2025 - 01:56