Hola,
Gracias de antemano, no se si alguien me puede dar alguna idea, no se como hacerlo...
mi problema es que voy insertando una serie de imagenes dinamicamente en un contenedor (div con "overflow:auto"), esas imagenes las coloco mediante css, con "position:relative",para poder ponerlas incluso unas encima de otras para formar una imagen completa (varias imagenes que forman una), y cuando se supera el alto del contenedor, logicamente aparece la barra de scroll. el problema es que cuantas mas imagenes voy insertando mas "espacio vacio", va quedando al final del contenedor, ya que las imagenes ocupan un espacio fijo, independiente de donde la coloques, como yo las voy "colocando para arriba",luego la barra de scroll,si la bajas hasta abajo (para arriba es jodido), solo ves el "espacio vacio o en blanco".
No se si me explicado, me gustaria saber si alguien tiene alguna idea, o alguna funcion de alguna herramienta (jquery o algo asi...), con la que pueda arreglar esto o no se, ya estoy bastante rayao....No se como solucionarlo.
Gracias.
Dejo aqui el codigo , el html lo voy generando desde java:
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.append("<div style=\" position: relative;height: 390px;top: 240px;left: 170px;width: 500px;bottom: auto;overflow-y: auto;overflow-x: hidden;background-color: transparent;margin-bottom:500px;white-space: normal;\" >");
Integer alto=new Integer(270);
Integer alto2=new Integer(57);
Integer derechaU_1=new Integer(161);
Integer altBot1=new Integer(0);
Integer altBot2=new Integer(0);
Integer altBot3=new Integer(0);
.........
String strAltBot1;
String strAltBot2;
............
altBot1=632;
strAltBot1=altBot1.toString();
altBot2=650;
strAltBot2=altBot2.toString();
altBot3=700;
strAltBot3=altBot3.toString();
.................
int longitud=3;
for (int i=1;i<=longitud;i++)
{
if (i==1)
{
out.append("<img src=\"images/u_1_nuevo.gif\" style=\" position: relative;left: 10px;top: 4px;\"/>");
out.append("<img src=\"images/DIBUJO8.GIF\" style=\" position: relative;left: 10px;top: 4px;\"/>");
out.append("<img src=\"images/asco1.jpg\" style=\"position: relative;left: 2px;top: 10px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: -98px;bottom: 160px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: -135px;bottom: 160px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: -135px;bottom: 135px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: 302px;bottom: 320px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: 145px;bottom: 248px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: 169px;bottom: 267px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: 335px;bottom: 273px;\"/>");
out.append("<img src=\"images/pnegro.gif\" style=\"position: relative;left: 323px;bottom: 243px;\"/>");
out.append("<img src=\"images/u_34_3_nuevo.JPG\" style=\"position: relative;left: 323px;bottom: 260px;\"/>");
out.append("<img src=\"images/u_8.JPG\" style=\"position: relative;left: 51px;bottom: 307px;\"/>");
if (longitud==1)//SI NO HAY MAS SUBSISTEMAS LO METEMOS AQUI, SI NO HAY QUE PONERLO DESPUES DE INSERTAR EL
//SIGUIENTE SUBSISTEMA
{
out.append("<img src=\"images/rectangulo.gif\" style=\"position: relative;bottom:169px;left: 286px;display: block;\"/>");
out.append("<img src=\"images/circulo.gif\" style=\"position: relative;bottom:194px;left: 218px;display: block;\"/>");
}
}
if (i>=2){
String strderechaU_1=derechaU_1.toString();
String string=alto.toString();
String string2=alto2.toString();
out.append("<img id=\"2.1\" src=\"images/u_1_nuevo.gif\" style=\"bottom:"+string2+"px; position: relative;right:"+strderechaU_1+"px;\"/>");
out.append("<img id=\"2.2\" src=\"images/DIBUJO8.GIF\" style=\"bottom:"+string2+"px; position: relative;right:"+strderechaU_1+"px;\"/>");
out.append("<img id=\"2.3\" src=\"images/asco5.gif\" style=\"bottom:"+string+"px;" +
"position: relative;padding: 0px;margin: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;margin-top: 0px;left: 163px;display: block;\"");
out.append("/>");
//ESTO ES DEL PRIMERO ASIQUE SI SOLO HAY UNO SEPARARLOO Y EL RESTO IGUAL (LO QUE SOBREESCRIBO CAMBIA DE POSICION)
out.append("<img id=\"2.4\" src=\"images/rectangulo.gif\" style=\"position: relative;bottom:522px;left: 286px;display: block;\"/>");
out.append("<img id=\"2.5\" src=\"images/circulo.gif\" style=\"position: relative;bottom:547px;left: 218px;display: block;\"/>");
//AÑADO LO CORRESPONDIENTE AL 2
out.append("<img id=\"2.6\" src=\"images/pnegro.gif\" style=\"position: relative;left: 158px;bottom:"+strAltBot1+"px;\"/>");
out.append("<img id=\"2.7\" src=\"images/pnegro.gif\" style=\"position: relative;left: 180px;bottom:"+strAltBot2+"px;\"/>");
out.append("<img id=\"2.8\" src=\"images/pnegro.gif\" style=\"position: relative;left: 280px;bottom:"+strAltBot3+"px;\"/>");
out.append("<img id=\"2.9\" src=\"images/pnegro.gif\" style=\"position: relative;left: 302px;bottom:"+strAltBot4+"px;\"/>");
out.append("<img id=\"2.10\" src=\"images/pnegro.gif\" style=\"position: relative;left: 280px;bottom:"+strAltBot5+"px;\"/>");
out.append("<img id=\"2.11\" src=\"images/pnegro.gif\" style=\"position: relative;left: 255px;bottom:"+strAltBot6+"px;\"/>");
out.append("<img id=\"2.12\" src=\"images/pnegro.gif\" style=\"position: relative;left: 300px;bottom:"+strAltBot7+"px;\"/>");
out.append("<img id=\"2.13\" src=\"images/pnegro.gif\" style=\"position: relative;left: 288px;bottom:"+strAltBot8+"px;\"/>");
out.append("<img id=\"2.14\" src=\"images/pnegro.gif\" style=\"position: relative;left: 147px;bottom:"+strAltBot9+"px;\"/>");
out.append("<img id=\"2.15\" src=\"images/u_34_3_nuevo.JPG\" style=\"position: relative;left: 275px;bottom:"+altu_34+"px;\"/>");
if (longitud==i)
{
out.append("<img id=\"2.16\" src=\"images/rectangulo.gif\" style=\"position: relative;bottom:553px;left: 289px;display: block;\"/>");
out.append("<img id=\"2.17\" src=\"images/circulo.gif\" style=\"position: relative;bottom:580px;left: 217px;display: block;\"/>");
}
//VARIABLES, PARA POSICIONAR IMAGEN SIGUIENTE
.........
}
}
out.append("</div>");
out.append(" </div></BODY></HTML>");
