Foros del Web » Creando para Internet » CSS »

Imágenes con overflow

Estas en el tema de Imágenes con overflow en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/12/2015, 19:22
Avatar de foreveryng  
Fecha de Ingreso: diciembre-2015
Ubicación: México
Mensajes: 5
Antigüedad: 6 años, 5 meses
Puntos: 0
Pregunta Imágenes con overflow

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.
  #2 (permalink)  
Antiguo 08/12/2015, 22:41
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 7 años, 5 meses
Puntos: 91
Respuesta: Imágenes con overflow

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

Código HTML:
Ver original
  1. <div class="thumbs">
  2.     <img src="//lorempixel.com/100/100">
  3.     <img src="//lorempixel.com/100/100">
  4.     <img src="//lorempixel.com/100/100">
  5.     <img src="//lorempixel.com/100/100">
  6.     <img src="//lorempixel.com/100/100">
  7.     <img src="//lorempixel.com/100/100">
  8.     <img src="//lorempixel.com/100/100">
  9.     <img src="//lorempixel.com/100/100">
  10.     <img src="//lorempixel.com/100/100">
  11.     <img src="//lorempixel.com/100/100">
  12.     <img src="//lorempixel.com/100/100">
  13.     <img src="//lorempixel.com/100/100">
  14.     <img src="//lorempixel.com/100/100">
  15.     <img src="//lorempixel.com/100/100">
  16. </div>

Código CSS:
Ver original
  1. .thumbs {
  2.     max-height: 100px;
  3.     max-width: 600px;
  4.     overflow-x: auto;
  5.     display: flex;
  6. }
  7. .thumbs img {
  8.     float: left;
  9. }

Demo:
http://jsfiddle.net/AngelKrak/ue7exekc/
  #3 (permalink)  
Antiguo 09/12/2015, 10:08
Avatar de foreveryng  
Fecha de Ingreso: diciembre-2015
Ubicación: México
Mensajes: 5
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Imágenes con overflow

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;
}

Última edición por foreveryng; 09/12/2015 a las 10:24 Razón: Actualización
  #4 (permalink)  
Antiguo 09/12/2015, 14:19
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 7 años, 5 meses
Puntos: 91
Respuesta: Imágenes con overflow

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

http://codepen.io/AngelKrak/pen/Nxqbrp
  #5 (permalink)  
Antiguo 18/12/2015, 13:35
Avatar de foreveryng  
Fecha de Ingreso: diciembre-2015
Ubicación: México
Mensajes: 5
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Imágenes con overflow

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

Etiquetas: barra, barras, desplazamiento, galeria, horizontal, imagenes, listas, overflow
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:25.