Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Tworzenie pięknego boxa
Forum PHP.pl > Forum > Przedszkole
josephin_1
Witam,

chcialbym stworzyc bardzo popularny box z naglowkiem i okraglymi rogami. Szerokosc boksa rozszerza sie dynamicznie w zaleznosci od jego zawartosci.

Udalo mi sie cos takiego zrobic na divach ale dziala tylko pod CHROME i Safari. W FF nie widac borderow a w IE - szkoda gadac


http://jatobietymnie.pl/index2.php

  1. <style type="text/css">
  2. .box_top_left {
  3. width : 10px;
  4. height : 30px;
  5. background-image : url('../grafika/box_top_left.gif');
  6. background-repeat : no-repeat;
  7. }
  8.  
  9. .box_top_right {
  10. width : 10px;
  11. height : 30px;
  12. background-image : url('../grafika/box_top_right.gif');
  13. background-repeat : no-repeat;
  14. }
  15.  
  16. .box_top_center {
  17. height : 30px;
  18. background-image : url('/grafika/box_center.gif');
  19. background-repeat : repeat-x;
  20. font-family : Verdana, Arial, Helvetica, sans-serif;
  21. font-size : 13px;
  22. color : #206282;
  23. }
  24.  
  25. .box_bottom_left {
  26. width : 10px;
  27. height : 7px;
  28. background-image : url('/grafika/box_bottom_left.gif');
  29. background-repeat : no-repeat;
  30. }
  31.  
  32. .box_bottom_right {
  33. width : 10px;
  34. height : 7px;
  35. background-image : url('/grafika/box_bottom_right.gif');
  36. background-repeat : no-repeat;
  37. }
  38.  
  39. .box_bottom_center {
  40. border-bottom : 1px solid #e1e1e1;
  41. }
  42.  
  43. <div style="display:block">
  44. <div style="display:table-row">
  45. <div class='box_top_left' style="display:table-cell"></div>
  46. <div class='box_top_center' style="display:table-cell">O nas</div>
  47. <div class='box_top_right' style="display:table-cell"></div>
  48. </div>
  49. <div style="display:table-row">
  50. <div style="border-left: 1px solid #e1e1e1; display:table-cell"></div>
  51. <div style="display:table-cell;">jakas przykladowa tresc</div>
  52. <div style="border-right: 1px solid #e1e1e1; display:table-cell"></div>
  53. </div>
  54. <div style="display:table-row">
  55. <div class='box_bottom_left' style="display:table-cell"></div>
  56. <div class='box_bottom_center' style="display:table-cell"></div>
  57. <div class='box_bottom_right' style="display:table-cell"></div>
  58. </div>
  59. </div>
piotrooo89
coś by me...
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.