HTML - HTML5 CSS Responsive

   
Vista:

HTML5 CSS Responsive

Publicado por Buma (1 intervención) el 18/08/2015 09:36:00
Hola,

Estoy intentando de hacer una página web HTML con imágenes carrusel de desplazamiento horizontal con altura fija. La suma de la anchura de las imágenes es más del ancho de la pantalla, por lo que siempre aparece el control de "barra de desplazamiento". (En el ejemplo proporcionado 600px de altura, "número 20" de la imagen)

Al final de este grupo de imágenes, deseo tener un grupo responsive de imágenes con ancho y altura fijas (en el ejemplo proporcionado 100px x 100px, "pequeño número 2" en la imagen)

Ver Imagen Ejemplo:
http://i.stack.imgur.com/KNenB.png

MaxWidthValue es el límite de ancho para todas las imágenes, despues de este limite aparece una nueva fila para el "pequeño número 2" de imágenes.

Intenté varias posibilidades, nuevo div dentro del "content" div, traté de cambiar algunos atributos de etiquetas ul / li / div / img al "pequeño número 2" de las imágenes, etc... pero no me funciono.

Así que os proporciono, sólo el código de "unas imágenes carrusel de desplazamiento horizontal con altura fija".

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#content {
	top: 10%;
	padding-left: 0px;
	position: fixed;
	overflow:auto;
	height: 90%;
	width: 100%;
}
 
#content ul {
	white-space:nowrap; list-style: none;
	padding: 0px 0px 0px 0px;
	margin:  0px 0px 0px 0px;
}
 
#content li {
	display: inline;
	padding: 0px 25px 0px 0px;
}
 
#content ul li img {
	max-height: 600px;
}


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
			<ul>
				<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
				<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
				<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
				<li><img src="http://www.kidsmathgamesonline.com/images/pictures/numbers600/number20.jpg"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
				<li><img src="http://zizaza.com/cache/small_wm/iconset/166505/16670/PNG/256/characters/number_numeric_2.png"></li>
			</ul>
        </div>

Código Fiddle
https://jsfiddle.net/fqqbhuok/1/

Espero vuestra ayuda, entiendo que puede ser una petición poco frecuente, pero lo necesito,
Espero haberme explicado,

Gracias de antemano,
Buma,
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Cambiar el cursor
- Tipo de bordes
- Seguridad en web
Imágen de perfil de Angel Komander

HTML5 CSS Responsive

Publicado por Angel Komander (101 intervenciones) el 18/08/2015 14:49:31
amigo mas facil, bajate un Carousel Responsive ya hecho ;)

ahi te dejo 2 para que uses el que mas te guste ;)

bxSlider
http://bxslider.com/examples/carousel-demystified

Flexisel
http://9bitstudios.github.io/flexisel/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

HTML5 CSS Responsive

Publicado por walter (28 intervenciones) el 18/08/2015 15:28:35
fijate si te sirve este que hice:
http://sonidosdistantes.com.ar/tattoo/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

HTML5 CSS Responsive

Publicado por xve (1178 intervenciones) el 18/08/2015 19:22:02
Hola Buma tal como muestras el código es muy dificil, ya que no tiene una anchura máxima, por lo que siempre te saldrán una al lado de la otra...

No se si el div id=content forma parte de un div con anchura definida? o con overflow:hidden?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar