Foros del Web » Creando para Internet » HTML »

Crear div con altura fija y scroll horizontal

Estas en el tema de Crear div con altura fija y scroll horizontal en el foro de HTML en Foros del Web. Hola, quiero hacer un div que tenga unas dimensiones fijas de altura y anchura, y dentro meter fotos, de tal forma que si se supera ...
  #1 (permalink)  
Antiguo 09/08/2010, 09:26
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Crear div con altura fija y scroll horizontal

Hola,

quiero hacer un div que tenga unas dimensiones fijas de altura y anchura, y dentro meter fotos, de tal forma que si se supera la anchura del div, se tenga que hacer scroll horizontal.

Casi lo he conseguido, en esta página que he creado se puede ver que sale lo que quiero:

http://www.musicapolar.com/scroll_horizontal.html

El problema está, si veis el código fuente, que le he tenido que dar al div interior una anchura fija para que salga bien. Si os fijais al moveros con el scroll, queda espacio en blanco. Puede haber desde 2 fotos hasta 70, las que sean, así que no quiero poner una anchura fija para ese div interior (ahora he puesto 600 por poner algo).

Entonces la pregunta es, cómo hacer que este div se vea con scroll horizontal tal como está, pero poniendo una anchura variable según cuántas fotos haya.

Gracias!
__________________
padres frikis | Regalos
  #2 (permalink)  
Antiguo 09/08/2010, 10:20
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Crear div con altura fija y scroll horizontal

Hola.

solo cambia esto:

Código CSS:
Ver original
  1. .ficha_cuadro_mas_fotos{
  2.     width:212px; /*manten el ancho que necesitas*/
  3.     /*y elimina el height, de esta manera el div ira creciendo en base a la cantidad de fotos*/
  4.     max-height:95px;
  5.     overflow-x: scroll;
  6.     margin-top:5px;
  7. }
mientras que

este tiene que se mas ancho que el anterior ".ficha_cuadro_mas_fotos" para que logre generar el scroll horizontal
Código CSS:
Ver original
  1. .ficha_cuadro_mas_fotos_interior{
  2.     width:600px;
  3.     height:75px;
  4.     max-height:75px;
  5. }

Suerte.

UPS... creo que lo que te estoy dando hace crecer el div de forma vertical

Última edición por lair; 09/08/2010 a las 10:28
  #3 (permalink)  
Antiguo 09/08/2010, 10:46
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Crear div con altura fija y scroll horizontal

Bueno mas bien lo que haria seria modificarlo con js

me imagino que cargas las imagenes con algun lenguaje del lado del servidor ( php asp... ) no se cual sea, pero puedes hacer lo siguiente:

paso 1:
vas contando las imagenes que vas colocando y haciendo lo siguiente para obtener el ancho que "deberia" de tener el div

$mi_var+=71; //aprox

paso 2:
al div interior agregar un ID
<div class="ficha_cuadro_mas_fotos_interior" id="test">

paso 4:

fuera del ciclo donde colocas la imagenes colocas lo siguiente:

Código PHP:
Ver original
  1. echo("
  2.   <script>
  3.         document.getElementById('test').style['width']='".$mi_var."px';
  4.   </script>
  5. ");

con esto fuerzas a que el div se redimencione.

NOTA: estoy asumiendo que estas en php.

Suerte
  #4 (permalink)  
Antiguo 09/08/2010, 10:59
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 13 años
Puntos: 145
Respuesta: Crear div con altura fija y scroll horizontal

Creo que todos se han complicado mucho, es mucho mas simple de lo que se piensa. Con css solo debes definir el ancho y alto y utilizar la magia de "overflow: auto;" y listo, cuando sea necesario te aparecera el scroll automaticamente, ya sea horizontal o vertical.

te dejo un pequeño ejemplo que lo grafica.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style>
.scroll
	{
	width:200px;
	height:100px;
	overflow: auto;
	border:1px solid #000000; /* Solo lo puse para que se vea el cuadro*/
	}
.titulo
	{
	color: #000000;
	background:#00FF00;
	font-weight: bold;
	}
</style>
<body>
<div class="scroll">
hola
<br />
<br />
chau
<br />
<br />
<br />
<br />
<br />
<br />
<table width="300">
  <tr>
    <td class="titulo">COLUMNA1</td>
    <td class="titulo">COLUMNA1</td>
    <td class="titulo">COLUMNA1</td>
  </tr>
</table>
</div>
</body>
</html> 
saludos
__________________
http://chicho.ninja yiaaaa
  #5 (permalink)  
Antiguo 09/08/2010, 10:59
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Crear div con altura fija y scroll horizontal

Gracias por tu interés, lair.

Bueno, las imágenes se cargarán de forma dinámica, sí, en concreto uso jsp.

Intentaré tu solución, pero de todas formas, no hay una forma de hacerlo sin javascript? es que parece algo tan sencillo a priori... pero no, no me sale.

Gracias.
__________________
padres frikis | Regalos
  #6 (permalink)  
Antiguo 09/08/2010, 11:13
Avatar de lair  
Fecha de Ingreso: enero-2009
Ubicación: header('Location: Morelia");
Mensajes: 1.047
Antigüedad: 8 años, 11 meses
Puntos: 46
Respuesta: Crear div con altura fija y scroll horizontal

Cita:
Iniciado por Cherivera Ver Mensaje
....Con css solo debes definir el ancho y alto...
ese es el problema, que el ancho no puede estar definido, tiene que crecer en base a la cantidad de imagenes y cuando sean menos de las que se esperan no tiene que quedar espacio en blanco como en el enmace que nos paso.
  #7 (permalink)  
Antiguo 09/08/2010, 11:13
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 13 años
Puntos: 145
Respuesta: Crear div con altura fija y scroll horizontal

Perdon no te habia entendido, pero con el ejemplo q te di es muy simple, metes una imagen por cada columna y dejas el table sin width.


quedaria si

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style>
.scroll
	{
	width:200px;
	height:100px;
	overflow: auto;
	border:1px solid #000000; /* Solo lo puse para que se vea el cuadro*/
	}
.titulo
	{
	color: #000000;
	background:#00FF00;
	font-weight: bold;
	}
</style>
<body>
<div class="scroll">
<table>
  <tr>
    <td class="titulo">COLUMNA1</td>
    <td class="titulo">COLUMNA2</td>
    <td class="titulo">COLUMNA3</td>
    <td class="titulo">COLUMNA4</td>
    <td class="titulo">COLUMNA5</td>
    <td class="titulo">COLUMNA6</td>
  </tr>
</table>
</div>
</body>
</html> 
saludos
__________________
http://chicho.ninja yiaaaa

Última edición por chichote; 09/08/2010 a las 11:16 Razón: agregar mas contenido
  #8 (permalink)  
Antiguo 10/08/2010, 08:40
Avatar de indie81  
Fecha de Ingreso: octubre-2004
Ubicación: Zaragoza
Mensajes: 294
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Crear div con altura fija y scroll horizontal

Cherivera: perfecto, ha funcionado.

La verdad es que las tablas las tengo muy abandonadas y nunca se me habría ocurrido usar tablas para esto.

Muchas gracias!
__________________
padres frikis | Regalos
  #9 (permalink)  
Antiguo 10/08/2010, 09:17
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 13 años
Puntos: 145
Respuesta: Crear div con altura fija y scroll horizontal

Si, yo tampoco las utilizo salvo para tabular datos, pero hay casos en que siguen siendo utiles, y en terminos de posicionamiento no te afectara ya que lo que tienes dentro no son contenidos sino imagenes. Las tablas suelen romper la estructura del rastreo de los robots de los buscadores, pero en este caso no tendria insidencia, creo jejee.

saludos y que bueno que te sirvio.
__________________
http://chicho.ninja yiaaaa
  #10 (permalink)  
Antiguo 11/08/2010, 01:56
 
Fecha de Ingreso: diciembre-2008
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Crear div con altura fija y scroll horizontal

hola Cherivera, necesito ayuda, cn tu solucion es posible tener una tabla y poner 2 columnas como fijas y q el scroll solo afecte al resto de columnas?

asiasssssssssssss
  #11 (permalink)  
Antiguo 30/05/2012, 12:55
Avatar de zombie777  
Fecha de Ingreso: mayo-2012
Mensajes: 2
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Crear div con altura fija y scroll horizontal

Hola, justamente ando buscando info sobre scrolls de imágenes horizontales, la info que CHICHERA aportó me es muy útil y práctica, solo tengo dos dudas, por ejemplo:

- como le quito el botón vertical y que quede a una altura fija ?
- como puedo customizar la barra de scroll y darle distancia del contenedor ?

- muchas gracias y saludos a todos.
  #12 (permalink)  
Antiguo 30/05/2012, 12:56
Avatar de zombie777  
Fecha de Ingreso: mayo-2012
Mensajes: 2
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Crear div con altura fija y scroll horizontal

Perdón CHICHOTE quise poner , jeje.

Etiquetas: altura, fija, horizontal, scroll
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 13:01.