Foros del Web » Creando para Internet » CSS »

scroll horizontal para imagenes

Estas en el tema de scroll horizontal para imagenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2007, 01:20
 
Fecha de Ingreso: mayo-2006
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 1
scroll horizontal para imagenes

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)  
Antiguo 14/05/2007, 01:22
 
Fecha de Ingreso: mayo-2006
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 1
Re: scroll horizontal para imagenes

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.
__________________
flora
  #3 (permalink)  
Antiguo 16/05/2007, 07:51
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: scroll horizontal para imagenes

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

  #4 (permalink)  
Antiguo 17/05/2007, 08:04
 
Fecha de Ingreso: noviembre-2003
Ubicación: Asuncion
Mensajes: 76
Antigüedad: 14 años, 1 mes
Puntos: 1
Re: scroll horizontal para imagenes

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
  #5 (permalink)  
Antiguo 07/08/2009, 09:44
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Re: scroll horizontal para imagenes

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;
}
  #6 (permalink)  
Antiguo 07/08/2009, 09:46
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
PD: Re: scroll horizontal para imagenes

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




La zona horaria es GMT -6. Ahora son las 10:01.