Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Pudełko dialogowe - układ
sadistic_son
post
Post #1





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----


Witam,

Pomóżcie bo męczę się już z tym układem i nie mogę dojść do ładu. Do rzeczy:

Chcę osiągnąć taki efekt:
(IMG:http://rambla.vot.pl/coint.png)
Trzy sekcje: LEFT, MIDDLE, RIGHT
Wewnątrz LEFT i RIGHT odpowiednio góra, rozciągalny w pionie w zależności od ilości teksu środek _MIDDLE oraz _BOTTOM. Text jest w MIDDLE (zielony).
Czyli [b]LEFT_MIDDLE oraz RIGHT_MIDDLE mają się rozciągać w zależności od tego jaką wysokość (ilość tekstu) ma MIDDLE.
Wszystko jest w MAIN_COINTAINER.

  1. #left{
  2. float:left;
  3. height:100%;
  4. width:13px;
  5. }
  6.  
  7. #left_top{
  8. width:13px;
  9. height:46px;
  10. background-image:url(grafa/left_top.png);
  11. background-repeat:no-repeat;
  12. }
  13.  
  14. #left_middle{
  15. width:13px;
  16. height:100%
  17. background-image:url(grafa/left_middle.png);
  18. background-repeat:repeat-y;
  19. }
  20.  
  21. #left_bottom{
  22. width:13px;
  23. height:9px;
  24. background-image:url(grafa/left_bottom.png);
  25. background-repeat:no-repeat;
  26. }
  27.  
  28. #middle{
  29. float:left;
  30. width:800px;
  31. }
  32.  
  33.  
  34. #right{
  35. float:right;
  36. width:13px;
  37. }
  38.  
  39. #right_top{
  40. width:7px;
  41. height:9px;
  42. background-image:url(grafa/right_top.png);
  43. background-repeat:no-repeat;
  44. }
  45.  
  46. #right_middle{
  47. width:7px;
  48. height:100%
  49. background-image:url(grafa/right_middle.png);
  50. background-repeat:repeat-y;
  51. }
  52.  
  53. #right_bottom{
  54. width:7px;
  55. height:9px;
  56. background-image:url(grafa/right_bottom.png);
  57. background-repeat:no-repeat;
  58. }

  1. <div id="left"><div id="left_top"></div><div id="left_middle"></div><div id="left_bottom"></div></div>
  2. <div id="middle"><img src="grafa/middle_top.png" /><br />
  3. TEEEEEEXT
  4. <br /><img src="grafa/middle_top.png" /></div>
  5. <div id="right"><div id="right_top"></div><div id="right_middle"></div><div id="right_bottom"></div></div>
  6. <br style="clear:both;" />


Dzięki.
Go to the top of the page
+Quote Post

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: 2.10.2025 - 21:08