scroll horizontal para imagenes

Flora · #1 (**permalink**) 14/05/2007, 00:20

Hola!

Me gustaria hacer para la seccion de trabajos realizados en mi sito web un scroll pero en lugar de horizontal, solo vertical, con el fin de ir poniendo diferentes imagenes dentro.
Alguien sabria como hacerlo con css, o html?
Muchas gracias.
Flora. Cuida tu environment.

Flora · #2 (**permalink**) 14/05/2007, 00:22

Peerdon, me equivoque. Quise decir que quiero que el scroll sea horizontal, que la barra del scroll este la de abajo en horizontal, pero no la vertical de siempre.
Gracias.
Flora. Cuida tu environment.

kahlito · #3 (**permalink**) 16/05/2007, 06:51

Hola Flora.

Para hacer un scroll horizontal puedes hacer de dos maneras, una metiendo las imágenes dentro de un bloque y luego poner ese bloque con scroll (overflow:scroll;) o simplemente tienes que meter toda la galería de imágenes dentro de una caja cualquiera, pero que esta mida menos que el ancho total de las imágenes y así luego le metes el scroll horizontal (overflow:auto;)

lickybuay · #4 (**permalink**) 17/05/2007, 07:04

Concuerdo con lo comentado por kahlito, solo que agrego otro detalle ya que note que solo quieres que salga el scroll horizontal y no el vertical.

Primero creas el div (bloque) le colocas la medidas que debe tener, tanto de alto, como de ancho, despues agregas overflow:auto; y despues overflow-y:hidden; (oculta scroll vertical en el caso que salga).

Ejemplo:

#contenedor_galeria {
width: 600px;
height: 110px;
float: left; /* En mi caso */
overflow: auto;
overflow-y: hidden;
}

Espero te haya servido, saludos

salvia · #5 (**permalink**) 07/08/2009, 08:44

yo tengo un div que se llama "slide" y quiero poner las fotos de manera "horizontal" como hablan anteiormente en este div.. las hice de 230 de altura... pero me manda las fotos una abajo de la otra.. me pueden ayudar??

dejo el codigo CSS aqui:

.contenedor {
float: left;
height: 530px;
width: 950px;
}
.botonera-gal {
height: 380px;
float: left;
width: 170px;
background-color: #CCCCCC;
}
.tira {
height: 350px;
float: left;
}
.trama {
float: left;
height: 20px;
width: auto;
background-image: url(images/trama_1.jpg);
background-repeat: repeat-x;
}
.slide {
width: 780px;
height: 250px;
float: left;
overflow: auto;
overflow-y: hidden;
}

.titulo {
font-family: Verdana;
font-size: 14px;
background-color: #333333;
height: 80px;
float: left;
width: 780px;
}

.contenido {
height: 380px;
width: 950px;
float: left;
background-color: #000000;
}

.top {
float: left;
height: 130px;
width: 950px;
}
.top-data {
float: left;
height: 125px;
width: 950px;
background-color: #8dc63f;
}
.top-line {
float: left;
height: 5px;
width: 950px;
background-color: #FFFFFF;
background-image: url(images/space.gif);
background-repeat: repeat;
}
.down {
float: left;
height: 40px;
width: 950px;
background-color: #8dc63f;
}
h5 {
font-family: Verdana;
font-size: 12px;
color: #333333;
margin-left: 25px;
letter-spacing: 0.5px;
text-align: left;
}

h6 {
font-family: Verdana;
font-size: 28px;
color: #CCFF99;
letter-spacing: 0.5px;
}
h4 {
font-family: Verdana;
font-size: 24px;
color: #CCCCCC;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
}
h3 {
font-family: Verdana;
color: #333333;
font-size: 16px;
letter-spacing: 0.5px;
text-align: center;
}

salvia · #6 (**permalink**) 07/08/2009, 08:46

Aqui dejo el body de lo mencionado...

<body>
<div class="contenedor">
<div class="top">
<div class="top-data">
<h6>ZEFALONIA</h6>
</div>
<div class="top-line">
</div>
</div>
<div class="contenido">
<div class="botonera-gal">
<h5>Animals</h5>
<h5>Blanco y Negro</h5>
<h5>Natura</h5>
<h5>Paisajes</h5>
<h5>People</h5>
<h5>Secuencias</h5>
<h5>Urbano</h5>
</div>
<div class="titulo">
<h4>Urbano</h4>
</div>
</div>
<div class="down">
<h3>Tel: 115 388 6210 // [email protected]</h3>
</div>
</div>

</body>

Cita:

Iniciado por salvia

yo tengo un div que se llama "slide" y quiero poner las fotos de manera "horizontal" como hablan anteiormente en este div.. las hice de 230 de altura... pero me manda las fotos una abajo de la otra.. me pueden ayudar??

dejo el codigo CSS aqui:

.contenedor {
float: left;
height: 530px;
width: 950px;
}
.botonera-gal {
height: 380px;
float: left;
width: 170px;
background-color: #CCCCCC;
}
.tira {
height: 350px;
float: left;
}
.trama {
float: left;
height: 20px;
width: auto;
background-image: url(images/trama_1.jpg);
background-repeat: repeat-x;
}
.slide {
width: 780px;
height: 250px;
float: left;
overflow: auto;
overflow-y: hidden;
}

.titulo {
font-family: Verdana;
font-size: 14px;
background-color: #333333;
height: 80px;
float: left;
width: 780px;
}

.contenido {
height: 380px;
width: 950px;
float: left;
background-color: #000000;
}

.top {
float: left;
height: 130px;
width: 950px;
}
.top-data {
float: left;
height: 125px;
width: 950px;
background-color: #8dc63f;
}
.top-line {
float: left;
height: 5px;
width: 950px;
background-color: #FFFFFF;
background-image: url(images/space.gif);
background-repeat: repeat;
}
.down {
float: left;
height: 40px;
width: 950px;
background-color: #8dc63f;
}
h5 {
font-family: Verdana;
font-size: 12px;
color: #333333;
margin-left: 25px;
letter-spacing: 0.5px;
text-align: left;
}

h6 {
font-family: Verdana;
font-size: 28px;
color: #CCFF99;
letter-spacing: 0.5px;
}
h4 {
font-family: Verdana;
font-size: 24px;
color: #CCCCCC;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
}
h3 {
font-family: Verdana;
color: #333333;
font-size: 16px;
letter-spacing: 0.5px;
text-align: center;
}