Crear div con altura fija y scroll horizontal

indie81 · #1 (**permalink**) 09/08/2010, 08:26

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!

lair · #2 (**permalink**) 09/08/2010, 09:20

Hola.

solo cambia esto:

Código CSS:

Ver original.ficha_cuadro_mas_fotos{
    width:212px; /*manten el ancho que necesitas*/
    /*y elimina el height, de esta manera el div ira creciendo en base a la cantidad de fotos*/
    max-height:95px;
    overflow-x: scroll;
    margin-top:5px;
}

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.ficha_cuadro_mas_fotos_interior{
    width:600px;
    height:75px;
    max-height:75px;
}

Suerte.

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

lair · #3 (**permalink**) 09/08/2010, 09:46

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 originalecho("
   <script>
         document.getElementById('test').style['width']='".$mi_var."px';
   </script>
");

con esto fuerzas a que el div se redimencione.

NOTA: estoy asumiendo que estas en php.

Suerte

chichote · #4 (**permalink**) 09/08/2010, 09:59

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

indie81 · #5 (**permalink**) 09/08/2010, 09:59

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.

lair · #6 (**permalink**) 09/08/2010, 10:13

Cita:

Iniciado por Cherivera

....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.

chichote · #7 (**permalink**) 09/08/2010, 10:13

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

indie81 · #8 (**permalink**) 10/08/2010, 07:40

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!

chichote · #9 (**permalink**) 10/08/2010, 08:17

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.

bfam · #10 (**permalink**) 11/08/2010, 00:56

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

zombie777 · #11 (**permalink**) 30/05/2012, 11:55

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.

zombie777 · #12 (**permalink**) 30/05/2012, 11:56

Perdón CHICHOTE quise poner , jeje.