Tema: Uso de overflow-y: auto en un box que está en position absolute
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/07/2015, 12:36
Avatar de luisdavid1993
luisdavid1993
 
Fecha de Ingreso: julio-2015
Ubicación: Anaco Venezuela
Mensajes: 78
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Uso de overflow-y: auto en un box que está en position absolute
Código CSS: 
Ver original
  1. body {
  2. font-family:'Tahoma','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  3. background:#545454;
  4. margin:0;
  5. border-top:2px solid #2A922E;
  6. text-shadow:0 0 1px rgba(0, 0, 0, 1);
  7. letter-spacing: 2px;
  8. font-size: 11px;
  9. font-weight:bold;
  10. background: #fff url(grain.png);
  11. }
  12. a {
  13. text-decoration:none;
  14. color:#fff;
  15. }
  16. header {
  17. width:940px;
  18. margin-left:auto;
  19. margin-right:auto;
  20. }
  21. header nav a {
  22. position:relative;
  23. float: left;
  24. width:50px;
  25. text-align:center;
  26. padding-top:2px;
  27. padding-bottom:5px;
  28. margin-right:5px;
  29. -webkit-border-bottom-right-radius: 5px;
  30. -webkit-border-bottom-left-radius: 5px;
  31. -moz-border-radius-bottomright: 5px;
  32. -moz-border-radius-bottomleft: 5px;
  33. border-bottom-right-radius: 5px;
  34. border-bottom-left-radius: 5px;
  35. -webkit-transition: all .25s ease-out;
  36. -moz-transition: all .25s ease-out;
  37. -o-transition: all .25s ease-out;
  38. background:#52a8e8;
  39. background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #037a58), color-stop(1, #2A922E));
  40. background: -moz-linear-gradient(center top, #037a58 20%, #2A922E 100%);
  41. background: -o-linear-gradient(#037a58, #2A922E);
  42. }
  43. header nav a:hover {
  44. padding-top:7px;
  45. padding-bottom:4px;
  46. -webkit-transition: all .25s ease-out;
  47. -moz-transition: all .25s ease-out;
  48. -o-transition: all .25s ease-out;
  49. }
  50. h1{clear:both;text-align:center;font-size:14px}
  51. blockquote{
  52. font: 16px normal helvetica, sans-serif;
  53. margin-top: 20px;
  54. margin-bottom: 10px;
  55. margin-left: 15px;
  56. padding-left: 15px;
  57. border-left: 2px solid #222;
  58. text-shadow:0 0 2px rgba(0, 0, 0, 0.50); 
  59. } 
  60. .author{
  61. float: right;
  62. padding-right: 750px;
  63. text-shadow:0 0 2px rgba(0, 0, 0, 0.50);
  64. }
  65. #box {
  66. margin: 20px auto;
  67. width: auto;
  68. text-align: left;
  69. }
  70. a {
  71. text-decoration:none;
  72. }
  73. ul {
  74. list-style: none
  75. }
  76. #boxes {
  77. width:940px;
  78. margin-left:auto;
  79. margin-right:auto;
  80. position: relative;
  81. min-height: auto;
  82. }
  83. .box:target, .box:first-child {
  84. opacity: 1;
  85. -moz-opacity: 1;
  86. }
  87. .box {
  88. opacity: 0;
  89. -moz-opacity: 0;
  90. position: absolute;
  91. top: 0;
  92. left: 0;
  93. width: auto;
  94. -webkit-transition: all .5s;
  95. -moz-transition: all .5s;
  96. -o-transition: all .5s;
  97. transition: all .5s;
  98. }
  99. .box:target span {
  100. height: auto;
  101. width: auto;
  102. background: #fff;
  103. display: block;
  104. position: absolute;
  105. top: -32px;
  106. z-index:0;
  107. }
  108. .box ul, .box p {
  109. line-height: 1.5em;
  110. padding-top: 1em;
  111. }
  112. #boxes a {
  113. color: #358BBB;
  114. text-shadow:0 1px 1px rgba(0, 0, 0, 1);
  115. }
  116. .box li a {
  117. display: block;
  118. line-height: 2.2em;
  119. font-size: 14px;
  120. margin-bottom: 6px;
  121. padding-left: 10px;
  122. }
  123. #boxes ul li a:hover {
  124. color: #fff;
  125. font-weight: bold;
  126. text-decoration: none;
  127. }
  128. .container {
  129. height: 550px;
  130. width: 940px; 
  131. margin-left: auto;
  132. margin-right: auto;
  133. overflow-y: auto;
  134. background: #fff url(lines.png);
  135. -webkit-box-shadow: #131313 0px 2px 10px;
  136. -moz-box-shadow: #131313 0px 3px 10px;
  137. box-shadow: #131313 0px 3px 10px;
  138. -webkit-border-bottom-right-radius: 5px;
  139. -webkit-border-radius: 5px;
  140. -moz-border-radius: 5px;
  141. border-radius: 5px;
  142. }
__________________
"Lucha por tus sueños o alguien te contratara para que cumplas los de el"