Imágenes con overflow

foreveryng · #1 (**permalink**) 08/12/2015, 19:22

Buenas noches.
La verdad es que soy autodidacta y novata, me he metido en algunos líos que poco a poco he resuelto pero esta vez no doy con la respuesta.
Estoy haciendo una galería, caben unas 14 imágenes miniatura debajo de la grande, pero necesito meter más imágenes y quiero que salgan en forma horizontal, mostrando la barra de desplazamiento horizontal, pero me salen debajo, y la barra de desplazamiento me sale vertical.

Gracias desde ya.

AngelKrak · #2 (**permalink**) 08/12/2015, 22:41

Puedes hacerlo con display flex y poniendole un Height maximo ;)

Código HTML:

Ver original<div class="thumbs">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
    <img src="//lorempixel.com/100/100">
</div>

Código CSS:

Ver original.thumbs {
    max-height: 100px;
    max-width: 600px;
    overflow-x: auto;
    display: flex;
}
.thumbs img {
    float: left;
}

Demo:
http://jsfiddle.net/AngelKrak/ue7exekc/

foreveryng · #3 (**permalink**) 09/12/2015, 10:08

Gracias!!! Pero no puedo =( Tomé un ejemplo de un tutorial por eso no entiendo al 100% los lenguajes, ya le moví a todos y nada.
este es mi HTML

<body>
<div id='wrapper'>
<div id='header'></div>
<div id='body'>
<div id="bigPic">
<img src="imgs4/1.jpg" alt="" />
<img src="imgs4/2.jpg" alt="" />
<img src="imgs4/3.jpg" alt="" />
<img src="imgs4/4.jpg" alt="" />
<img src="imgs4/5.jpg" alt="" />
<img src="imgs4/6.jpg" alt="" />
<img src="imgs4/7.jpg" alt="" />
<img src="imgs4/8.jpg" alt="" />
<img src="imgs4/9.jpg" alt="" />
<img src="imgs4/10.jpg" alt="" />
<img src="imgs4/11.jpg" alt="" />
<img src="imgs4/12.jpg" alt="" />
<img src="imgs4/13.jpg" alt="" />
<img src="imgs4/14.jpg" alt="" />
<img src="imgs4/15.jpg" alt="" />
<img src="imgs4/16.jpg" alt="" />
<img src="imgs4/17.jpg" alt="" />
<img src="imgs4/18.jpg" alt="" />
<img src="imgs4/19.jpg" alt="" />
<img src="imgs4/20.jpg" alt="" />
<img src="imgs4/21.jpg" alt="" />
<img src="imgs4/22.jpg" alt="" />
<img src="imgs4/23.jpg" alt="" />
<img src="imgs4/24.jpg" alt="" />
<img src="imgs4/25.jpg" alt="" />
<img src="imgs4/26.jpg" alt="" />
<img src="imgs4/27.jpg" alt="" />
<img src="imgs4/28.jpg" alt="" />
<img src="imgs4/29.jpg" alt="" />
<img src="imgs4/30.jpg" alt="" />
<img src="imgs4/31.jpg" alt="" />
<img src="imgs4/32.jpg" alt="" />
<img src="imgs4/33.jpg" alt="" />
<img src="imgs4/34.jpg" alt="" />
<img src="imgs4/35.jpg" alt="" />
<img src="imgs4/36.jpg" alt="" />
<img src="imgs4/37.jpg" alt="" />
<img src="imgs4/38.jpg" alt="" />
<img src="imgs4/39.jpg" alt="" />
<img src="imgs4/40.jpg" alt="" />
</div>

<div style="overflow: auto; width: 900px; height: 50px;">
<ul id="thumbs">
<li class='active' rel='1'><img src="imgs4/1_thumb.jpg" alt="" /></li>
<li rel='2'><img src="imgs4/2_thumb.jpg" alt="" /></li>
<li rel='3'><img src="imgs4/3_thumb.jpg" alt="" /></li>
<li rel='4'><img src="imgs4/4_thumb.jpg" alt="" /></li>
<li rel='5'><img src="imgs4/5_thumb.jpg" alt="" /></li>
<li rel='6'><img src="imgs4/6_thumb.jpg" alt="" /></li>
<li rel='7'><img src="imgs4/7_thumb.jpg" alt="" /></li>
<li rel='8'><img src="imgs4/8_thumb.jpg" alt="" /></li>
<li rel='9'><img src="imgs4/9_thumb.jpg" alt="" /></li>
<li rel='10'><img src="imgs4/10_thumb.jpg" alt="" /></li>
<li rel='11'><img src="imgs4/11_thumb.jpg" alt="" /></li>
<li rel='12'><img src="imgs4/12_thumb.jpg" alt="" /></li>
<li rel='13'><img src="imgs4/13_thumb.jpg" alt="" /></li>
<li rel='14'><img src="imgs4/14_thumb.jpg" alt="" /></li>
<li rel='15'><img src="imgs4/15_thumb.jpg" alt="" /></li>
<li rel='16'><img src="imgs4/16_thumb.jpg" alt="" /></li>
<li rel='17'><img src="imgs4/17_thumb.jpg" alt="" /></li>
<li rel='18'><img src="imgs4/18_thumb.jpg" alt="" /></li>
<li rel='19'><img src="imgs4/19_thumb.jpg" alt="" /></li>
<li rel='20'><img src="imgs4/20_thumb.jpg" alt="" /></li>
<li rel='21'><img src="imgs4/21_thumb.jpg" alt="" /></li>
<li rel='22'><img src="imgs4/22_thumb.jpg" alt="" /></li>
<li rel='23'><img src="imgs4/23_thumb.jpg" alt="" /></li>
<li rel='24'><img src="imgs4/24_thumb.jpg" alt="" /></li>
<li rel='25'><img src="imgs4/25_thumb.jpg" alt="" /></li>
<li rel='26'><img src="imgs4/26_thumb.jpg" alt="" /></li>
<li rel='27'><img src="imgs4/27_thumb.jpg" alt="" /></li>
<li rel='28'><img src="imgs4/28_thumb.jpg" alt="" /></li>
<li rel='29'><img src="imgs4/29_thumb.jpg" alt="" /></li>
<li rel='30'><img src="imgs4/30_thumb.jpg" alt="" /></li>
<li rel='31'><img src="imgs4/31_thumb.jpg" alt="" /></li>
<li rel='32'><img src="imgs4/32_thumb.jpg" alt="" /></li>
<li rel='33'><img src="imgs4/33_thumb.jpg" alt="" /></li>
<li rel='34'><img src="imgs4/34_thumb.jpg" alt="" /></li>
<li rel='35'><img src="imgs4/35_thumb.jpg" alt="" /></li>
<li rel='36'><img src="imgs4/36_thumb.jpg" alt="" /></li>
<li rel='37'><img src="imgs4/37_thumb.jpg" alt="" /></li>
<li rel='38'><img src="imgs4/38_thumb.jpg" alt="" /></li>
<li rel='39'><img src="imgs4/39_thumb.jpg" alt="" /></li>
<li rel='40'><img src="imgs4/40_thumb.jpg" alt="" /></li>
</ul>

</div>
<div class='clearfix'></div>
</div>

Mi css:

#wrapper{
width:979px;
min-height: 96%;
height: auto !important;
height: 96%;
text-align:center;
margin: 0 auto -30px;
padding:0 10px 0px 10px;
}

.clearfix{
clear:both;
float:none;
}
#bigPic{
width: 800px;
height: 600px;
background-color: #FFF;
margin-bottom: 10px;
text-align: center;
float: none;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 80px;
}
#bigPic img{
position:absolute;
display:none;
}
ul#thumbs li.active{
border:2px solid #000;
background:#fff;
padding:2px;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
padding-left: 80px;
}

ul#thumbs li{

float:left;
margin-right:7px;
margin-bottom:5px;
border:1px solid #CCC;
padding:3px;
cursor:pointer;
}
ul#thumbs img{
position:absolute;
margin: 0 auto;
left: 100 px;
float:left;
width:40px;
height:40px;
line-height:40px;
overflow:auto;
position:relative;
z-index:1;
}

AngelKrak · #4 (**permalink**) 09/12/2015, 14:19

Quieres algo asi no amigo?
como te dije solo ponle un Display Flex al Contenedor de las Miniaturas ;)

http://codepen.io/AngelKrak/pen/Nxqbrp

foreveryng · #5 (**permalink**) 18/12/2015, 13:35

Gracias!!! lo intenté en un archivo diferente y si funcionó, bueno me mostraba las dos barras, pero seguiré practicando.