Super module CSS


/ Published in: CSS
Save to your folder(s)

Authour: Mike Rumble (@rumble)


Copy this code and paste it in your HTML
  1. .module {
  2. position: relative;
  3. }
  4.  
  5. .module-fg {
  6. padding: 20px;
  7. position: relative;
  8. z-index: 10;
  9. }
  10.  
  11. .module-fg .module-hd,
  12. .module-fg .module-ft {
  13. overflow: hidden;
  14. }
  15.  
  16. .module-bg {
  17. height: 100%;
  18. left: 0;
  19. position: absolute;
  20. top: 0;
  21. width: 100%;
  22. z-index: 5;
  23. /* The following rule hits IE 6 only */
  24. _height: expression(this.parentNode.clientHeight+'px');
  25. }
  26.  
  27. .module-bg .module-hd div,
  28. .module-bg .module-bd div,
  29. .module-bg .module-ft div {
  30. font-size: 0;
  31. overflow: hidden;
  32. }
  33.  
  34. .module-bg .module-hd {
  35. left: 0;
  36. height: 20;
  37. overflow: hidden;
  38. position: absolute;
  39. top: 0;
  40. width: 100%;
  41. }
  42.  
  43. .module-bg .module-hd .module-hd-l {
  44. background: transparent url(hd-l.png) no-repeat 0 0;
  45. float: left;
  46. height: 20px;
  47. width: 20px;
  48. /* The following rule hits IE 6 only */
  49. _margin-right: -3px;
  50. }
  51.  
  52. .module-bg .module-hd .module-hd-r {
  53. background: transparent url(hd-r.png) no-repeat 0 0;
  54. float: right;
  55. height: 20px;
  56. width: 20px;
  57. /* The following rule hits IE 6 only */
  58. _margin-left: -3px;
  59. }
  60.  
  61. .module-bg .module-hd .module-hd-c div {
  62. background: transparent url(hd-c.png) repeat-x 0 0;
  63. height: 20px;
  64. }
  65.  
  66. .module-bg .module-ft {
  67. bottom: 0;
  68. left: 0;
  69. overflow: hidden;
  70. position: absolute;
  71. width: 100%;
  72. }
  73.  
  74. .module-bg .module-ft .module-ft-l {
  75. background: transparent url(ft-l.png) no-repeat 0 0;
  76. float: left;
  77. height: 20px;
  78. width: 20px;
  79. /* The following rule hits IE 6 only */
  80. _margin-right: -3px;
  81. }
  82.  
  83. .module-bg .module-ft .module-ft-r {
  84. background: transparent url(ft-r.png) no-repeat 0 0;
  85. float: right;
  86. height: 20px;
  87. width: 20px;
  88. /* The following rule hits IE 6 only */
  89. _margin-left: -3px;
  90. }
  91.  
  92. .module-bg .module-ft .module-ft-c div {
  93. background: transparent url(ft-c.png) repeat-x 0 0;
  94. height: 20px;
  95. }
  96.  
  97. .module-bg .module-bd {
  98. bottom: 20px; /* Bottom should be height of .module-ft */
  99. left: 0;
  100. overflow: hidden;
  101. position: absolute;
  102. top: 20px; /* Top should be height of .module-hd */
  103. width: 100%;
  104. }
  105.  
  106. .module-bg .module-bd .module-bd-l {
  107. background: transparent url(bd-l.png) repeat-y 0 0;
  108. float: left;
  109. height: 100%;
  110. width: 20px;
  111. /* The following rule hits IE 6 only */
  112. _margin-right: -3px;
  113. }
  114.  
  115. .module-bg .module-bd .module-bd-r {
  116. background: transparent url(bd-r.png) repeat-y 0 0;
  117. float: right;
  118. height: 100%;
  119. width: 20px;
  120. /* The following rule hits IE 6 only */
  121. _margin-left: -3px;
  122. }
  123.  
  124. .module-bg .module-bd .module-bd-c{
  125. height: 100%;
  126. }
  127.  
  128. .module-bg .module-bd .module-bd-c div {
  129. background: #fff url(bd-c.png) repeat-x 0 100%;
  130. height: 100%;
  131. }
  132.  
  133. .module-bg .module-bd {
  134. /* The following rule hits IE 6 only */
  135. _height: expression(Math.floor(this.parentNode.clientHeight-(this.nextSibling ? this.nextSibling.clientHeight : 0)-(this.previousSibling ? this.previousSibling.clientHeight : 0))+'px');
  136. overflow: hidden;
  137. }
  138.  
  139. .module-bg .module-bd .module-bd-l,
  140. .module-bg .module-bd .module-bd-r,
  141. .module-bg .module-bd .module-bd-c div {
  142. /* The following rule hits IE 6 and IE 7 only */
  143. *height: 10000px;
  144. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.