Problemas Alineado de Slider

joseaplwork · #1 (**permalink**) 05/09/2013, 12:22

Os comento es muy basico.

no me alinea las imagenes horizontalmente y me lo hace verticalmente :S ? no entiendo porque

os dejo el codigo

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Primer Ejercicio</title>
    <style type="text/css">
    .slider{
        margin: auto;
        width: 100%;
                max-width: 960px;
        max-height: 560px;
        overflow: hidden;
        position: relative;
        display: block;
    }
    .content-slider img{
        display: block;
        float: left;
    }
 
    </style>
</head>
<body>
<div class="slider">
    <div class="content-slider">
        <img src="images/images.jpg">
        <img src="images/images.jpg">
        <img src="images/images.jpg">
        <img src="images/images.jpg">
    </div>
</div>
 
</body>
</html>

Alguien me puede ayudar no entiendo el porque ! no me lo alinea! horizonaltmente lo hace vertical

codeams · #2 (**permalink**) 06/09/2013, 01:02

Prueba con "float:left" para las imagenes. Creo que eso lo arreglaría (:

Suerte con eso.

pzin · #3 (**permalink**) 06/09/2013, 01:11

No se pueden centrar elementos flotados, al menos no sin cambiar algunas otras cosas, por lo que no deberías de flotar las imágenes, que por otro lado, no tiene a priori mucho sentido ya que son elementos en linea que pueden centrarse perfectamente aplicando al elemento padre text-align: center.
Si necesitas que sean elementos en bloque, puedes usar para las imágenes un display: inline-block.

joseaplwork · #4 (**permalink**) 06/09/2013, 02:46

Cita:

Iniciado por codeams

Prueba con "float:left" para las imagenes. Creo que eso lo arreglaría (:

Suerte con eso.

Ya estan flotando a la izquierda. se lo aplico en el css " .content-slider img "

joseaplwork · #5 (**permalink**) 06/09/2013, 02:51

Cita:

Iniciado por pzin

No se pueden centrar elementos flotados, al menos no sin cambiar algunas otras cosas, por lo que no deberías de flotar las imágenes, que por otro lado, no tiene a priori mucho sentido ya que son elementos en linea que pueden centrarse perfectamente aplicando al elemento padre text-align: center.
Si necesitas que sean elementos en bloque, puedes usar para las imágenes un display: inline-block.

yo no quiero centrar las imagenes , lo que quiero es que se muestren en linea horizontal , una despues de otra.
y con el div principal " slider " mostrar solo una imagen y ocultar las siguientes( con overflow )

faillure · #6 (**permalink**) 06/09/2013, 05:14

Acá hay mas de lo que dices y muestras.
Estas haciendo un slider de imagenes, imagino. Mejor si ves alguna demo. Solo con css que es donde consultas:

[URL="http://www.cssplay.co.uk/menu/"]http://www.cssplay.co.uk/menu/[/URL] en la columna Photo galleries

[URL="http://codepen.io/search?q=gallery&limit=all&depth=everything"]http://codepen.io/search?q=gallery&limit=all&depth=everything[/URL]

[URL="http://ksesocss.blogspot.com/2013/09/galeria-css-manual-automatica.html"]http://ksesocss.blogspot.com/2013/09/galeria-css-manual-automatica.html[/URL]

[URL="https://www.google.es/#q=galeria+imagen+puro+css"]https://www.google.es/#q=galeria+imagen+puro+css[/URL]