Problema para mover Divs Estoy necesitando mover una tabla con CSS, para poder crear una hoja de impresion optima como ami me gusta, el poblema es q muevo la tabla, pero siempre me queda como un contenedor blanco en el lugar donde antes estaba la tabla, y a la hora de imprimir (en hoja) me taba otros textos que deberia haber en ese lugar, paso el codigo del html que contiene la tabla y sus contenedores, haber si alguien me puede decir cual de todo es el q tengo q mover con css para q me quede bien Código HTML: <dt>Consultas</dt>
<dd>
<div class = "contenedorconsulta">
<fieldset class="fieldset1"><legend><label for="address" class="etiqueta">Direccion</label></legend>
<div class="calle"><input id="callec" name="address" type="textbox" required="required" placeholder="Calle" maxlength="20" onkeypress="return permite(event, 'num_car')" /></div>
<div class="altura"><input id="alturac" name="altura" type="textbox" required="required" placeholder="Altura" maxlength="4" onkeypress="return permite(event, 'num');" /></div>
</fieldset>
<fieldset class="fieldset2"><legend><label for="icono" class="etiqueta">Especificaciones</label></legend>
<center>
<div class="metros"><input id="cmetros" name="cmetros" type="textbox" required="required" placeholder="Superficie" maxlength="5" OnKeyUp="csuperficieCategoria(this.value)" onkeypress="return permite(event, 'num');" /></div>
<select id="cicono" class="select" name="cicono" onchange="ccategoriaSuperficie(this.value)" >
<option value="sincategoria">Seleccionar Categoria</option>
<option value="categoria0">Categoria 0</option>
<option value="categoria1">Categoria 1</option>
<option value="categoria2">Categoria 2</option>
<option value="categoria3">Categoria 3</option>
<option value="categoria4">Categoria 4</option>
</select>
</center>
</fieldset>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="distanciasok" class="distanciasok" style="display:none;">
<div id="tabla" class="tablaimp">
<div id="texto" class="tex" style="display:none;">
<th>Por el presente informo que los comercios que a continuación se detallan,</th>
</div>
<table border="1" bordercolor="#FFFFFF" id="tablaconsultas" class="tablaconsultas" align="center">
<thead>
<tr><th width="160" class="theadimp">Nombre</th><th width="160" class="theadimp">Direccion</th><th width="160" class="theadimp">Distancia</th><th width="160" class="theadimp">Categoria</th></tr>
</thead>
<tbody>
<tr id="tr0"><td id="nom0" align="center"></td><td id="dir0" align="center"></td><td id="dist0" align="center"></td><td id="cat0" align="center"></td></tr>
<tr id="tr1"><td id="nom1" align="center"></td><td id="dir1" align="center"></td><td id="dist1" align="center"></td><td id="cat1" align="center"></td></tr>
<tr id="tr2"><td id="nom2" align="center"></td><td id="dir2" align="center"></td><td id="dist2" align="center"></td><td id="cat2" align="center"></td></tr>
<tr id="tr3"><td id="nom3" align="center"></td><td id="dir3" align="center"></td><td id="dist3" align="center"></td><td id="cat3" align="center"></td></tr>
<tr id="tr4"><td id="nom4" align="center"></td><td id="dir4" align="center"></td><td id="dist4" align="center"></td><td id="cat4" align="center"></td></tr>
<tr id="tr5"><td id="nom5" align="center"></td><td id="dir5" align="center"></td><td id="dist5" align="center"></td><td id="cat5" align="center"></td></tr>
<tr id="tr6"><td id="nom6" align="center"></td><td id="dir6" align="center"></td><td id="dist6" align="center"></td><td id="cat6" align="center"></td></tr>
<tr id="tr7"><td id="nom7" align="center"></td><td id="dir7" align="center"></td><td id="dist7" align="center"></td><td id="cat7" align="center"></td></tr>
<tr id="tr8"><td id="nom8" align="center"></td><td id="dir8" align="center"></td><td id="dist8" align="center"></td><td id="cat8" align="center"></td></tr>
<tr id="tr9"><td id="nom9" align="center"></td><td id="dir9" align="center"></td><td id="dist9" align="center"></td><td id="cat9" align="center"></td></tr>
<tr id="tr10"><td id="nom10" align="center"></td><td id="dir10" align="center"></td><td id="dist10" align="center"></td><td id="cat10" align="center"></td></tr>
<tr id="tr11"><td id="nom11" align="center"></td><td id="dir11" align="center"></td><td id="dist11" align="center"></td><td id="cat11" align="center"></td></tr>
<tr id="tr12"><td id="nom12" align="center"></td><td id="dir12" align="center"></td><td id="dist12" align="center"></td><td id="cat12" align="center"></td></tr>
<tr id="tr13"><td id="nom13" align="center"></td><td id="dir13" align="center"></td><td id="dist13" align="center"></td><td id="cat13" align="center"></td></tr>
<tr id="tr14"><td id="nom14" align="center"></td><td id="dir14" align="center"></td><td id="dist14" align="center"></td><td id="cat14" align="center"></td></tr>
<tr id="tr15"><td id="nom15" align="center"></td><td id="dir15" align="center"></td><td id="dist15" align="center"></td><td id="cat15" align="center"></td></tr>
<tr id="tr16"><td id="nom16" align="center"></td><td id="dir16" align="center"></td><td id="dist16" align="center"></td><td id="cat16" align="center"></td></tr>
<tr id="tr17"><td id="nom17" align="center"></td><td id="dir17" align="center"></td><td id="dist17" align="center"></td><td id="cat17" align="center"></td></tr>
<tr id="tr18"><td id="nom18" align="center"></td><td id="dir18" align="center"></td><td id="dist18" align="center"></td><td id="cat18" align="center"></td></tr>
<tr id="tr19"><td id="nom19" align="center"></td><td id="dir19" align="center"></td><td id="dist19" align="center"></td><td id="cat19" align="center"></td></tr>
<tr id="tr20"><td id="nom20" align="center"></td><td id="dir20" align="center"></td><td id="dist20" align="center"></td><td id="cat20" align="center"></td></tr>
</tbody>
</table>
<script type="text/javascript">
var t = new SortableTable(document.getElementById('tablaconsultas'), 100);
</script>
<div id="texto2" class="tex" style="display:none;">
<br>
<th>se encuentran dentro del área de radicación previsto en la ordenanza Nº 4766/2003</th>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="firma" class="firma" style="display:none;">.....................</div>
</div>
</div>
<div id="imagen" style="display:none;"><a href="#" title="pie de pagina"><img alt="pie de pagina" border="0" src="iconos/pie.png " style="position:fixed; bottom:0; left:0;"/></a></div>
<input class="consulta" type="button" value="Realizar Consulta" onclick="codeAddress();"></input>
<input class="limpiarconsulta" type="button" value="Limpiar" onclick="if(confirm('Se borraran las consultas realizadas. ¿Desea Continuar?')){limpiarConsulta();}"></input>
<input class="imprimir" type="button" value="Imprimir" onclick="window.print();"></input>
</div>
</dd
>
CSS...
Código:
.tablaimp {
position: aboslute;
top: -70%; left: 0%;
height:700px; width: 850px;
overflow:auto; font-size:18px;
}
.distanciasok{
display: block !important;
position: aboslute;
top: -70%; left: 0%;
height:700px; width: 850px;
}
.tablaconsultas {
background: rgba(237,237,237,1);
background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,1)), color-stop(53%, rgba(246,246,246,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(237,237,237,1) 0%, rgba(246,246,246,1) 53%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 );
position: aboslute;
top: -70%; left: 0%;
height:700px; width: 850px;
border: black 3px solid;
border-collapse:collapse;
font-size:25px;
}
.contenedorconsulta{
background: rgba(100,100,100,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(100,100,100,1) 0%, rgba(54,54,54,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, rgba(100,100,100,1)), color-stop(100%, rgba(54,54,54,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(100,100,100,1) 0%, rgba(54,54,54,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(100,100,100,1) 0%, rgba(54,54,54,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(100,100,100,1) 0%, rgba(54,54,54,1) 100%);
background: radial-gradient(ellipse at center, rgba(100,100,100,1) 0%, rgba(54,54,54,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646464', endColorstr='#363636', GradientType=1 );
border: 0px solid #000000;
position: aboslute;
top: -70%; left: 0%;
padding: 2px;
width: 850px;
height:700px;
}
aqui les dejo una imagen de como me queda y explico como deberia quedar
la tabla q esta ensima del mapa deberia esta mas arriba para q no me taba el mapa
PD: lo postie en css ya que para crear la hoja de impresion y ubicar los elementos en la misma lo hago con css |