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