El problema es que me vendría bien poner un scroll vertical por si ampliara demasiado la cantidad de contenido de alguna ficha. Pero si solo pongo el overflow en el lugar donde lo necesito, se muestra pero no se mueve y si modifico la caja donde está la position absolute por relative, me genera un monton de problemas extra que todavía no se resolver.
¿Alguien podría decirme que le tendria que cambiar a este codigo para que funcione igual, pero con el agregado del scroll?
El overflow-y lo necesito en container y el position esta en .box
Mucha gracias
body {
font-family:'Tahoma','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
background:#545454;
margin:0;
border-top:2px solid #2A922E;
text-shadow:0 0 1px rgba(0, 0, 0, 1);
letter-spacing: 2px;
font-size: 11px;
font-weight:bold;
background: #fff url(grain.png);
}
a {
text-decoration:none;
color:#fff;
}
header {
width:940px;
margin-left:auto;
margin-right:auto;
}
header nav a {
position:relative;
float: left;
width:50px;
text-align:center;
padding-top:2px;
padding-bottom:5px;
margin-right:5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
background:#52a8e8;
background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #037a58), color-stop(1, #2A922E));
background: -moz-linear-gradient(center top, #037a58 20%, #2A922E 100%);
background: -o-linear-gradient(#037a58, #2A922E);
}
header nav a:hover {
padding-top:7px;
padding-bottom:4px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
}
h1{clear:both;text-align:center;font-size:14px}
blockquote{
font: 16px normal helvetica, sans-serif;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 15px;
padding-left: 15px;
border-left: 2px solid #222;
text-shadow:0 0 2px rgba(0, 0, 0, 0.50);
}
.author{
float: right;
padding-right: 750px;
text-shadow:0 0 2px rgba(0, 0, 0, 0.50);
}
#box {
margin: 20px auto;
width: auto;
text-align: left;
}
a {
text-decoration:none;
}
ul {
list-style: none
}
#boxes {
width:940px;
margin-left:auto;
margin-right:auto;
position: relative;
min-height: auto;
}
.box:target, .box:first-child {
opacity: 1;
-moz-opacity: 1;
}
.box {
opacity: 0;
-moz-opacity: 0;
position: absolute;
top: 0;
left: 0;
width: auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.box:target span {
height: auto;
width: auto;
background: #fff;
display: block;
position: absolute;
top: -32px;
z-index:0;
}
.box ul, .box p {
line-height: 1.5em;
padding-top: 1em;
}
#boxes a {
color: #358BBB;
text-shadow:0 1px 1px rgba(0, 0, 0, 1);
}
.box li a {
display: block;
line-height: 2.2em;
font-size: 14px;
margin-bottom: 6px;
padding-left: 10px;
}
#boxes ul li a:hover {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.container {
height: 550px;
width: 940px;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
background: #fff url(lines.png);
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
