Posted By

assbach on 12/27/06


Tagged

div css box graphics plates


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
vali29


CSS for auto-height rounded corner box


 / Published in: CSS
 

probably not the best way, but it seems to work

  1. <style type="text/css">
  2.  
  3.  
  4. .wPlate {
  5. width: 353px;
  6. margin: 0px 0px 20px 0px;
  7. background: #ffffff url(pl_white_center.jpg) repeat-y top left;
  8. }
  9.  
  10. .wPlateInner {
  11. background: url(pl_white_bottom.jpg) no-repeat bottom left;
  12. }
  13.  
  14. .wPlate .wPlateInner h2 { padding: 0px; margin: 0px;} /* for images */
  15.  
  16. .wPlate .wPlateInner h3 {
  17. margin: 0px;
  18. padding: 20px 20px 0px 20px;
  19. font-size: 19px;
  20. color: #009900;
  21. background: url(pl_white_top.jpg) no-repeat top left;
  22. text-align:left;
  23. font-family:Arial,Helvetica,sans-serif;
  24. }
  25.  
  26. .wPlate p {
  27. margin: 0;
  28. padding: 1em 15px 5px 20px;
  29. font-size: 12px;
  30. line-height: 1.4em;
  31. text-align: left;
  32. font-family:Arial,Helvetica,sans-serif;
  33. }
  34.  
  35. .wPlate p.button {
  36. text-align: right;
  37. padding: 0 20px 20px 20px;
  38. }
  39. </style>
  40.  
  41.  
  42. <div class="wPlate">
  43. <div class="wPlateInner">
  44. <h2><img src="hd_wie.jpg" width="353" height="46" alt="headline" /></h2>
  45. <p>
  46. Text
  47. </p>
  48. <p class="button"><a href="#"><img src="b_hierweiter.gif" width="136" height="22" alt="" border="0"/></a></p>
  49. </div>
  50. </div>
  51.  
  52.  
  53. <div class="wPlate">
  54. <div class="wPlateInner">
  55. <h3>headline</h3>
  56. <p>
  57. Text Text Text Text Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  58. </p>
  59. <p class="button"><a href="#"><img src="b_hierweiter.gif" width="136" height="22" alt="" border="0"/></a></p>
  60. </div>
  61. </div>

Report this snippet  

You need to login to post a comment.