Foros del Web » Diseño web » CSS »

Problema para mover Divs

Estas en el tema de Problema para mover Divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/01/2014, 06:51
 
Fecha de Ingreso: octubre-2013
Mensajes: 11
Antigüedad: 1 año
Puntos: 1
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
  #2 (permalink)  
Antiguo 08/01/2014, 08:34
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.373
Antigüedad: 12 años, 2 meses
Puntos: 1697
Respuesta: Problema para mover Divs

Hola muchacho.

Cometes algunos errores bastante incómodos. No en lo que se refiere a tu problema, sino en cómo participar en un foro. Descuidas bastante la ortografía, pones código con una indentación bastante difícil de leer y un poco anárquica aquí y allá, y además publicas código irrelevante al problema. Todo esto sin contar que te inventas palabras al vuelo, como taba, aboslute, postie, etc.

Cuando lees alguna vez un tutorial, fíjate que todo esto que te comento no existe, siempre hay buena ortografía, código con buena indentación y código que se reduce a lo que enseña el tutorial. Yo creo que ese respeto que muestra el que escribe el artículo hacia el lector se debería (y de hecho se suele hacer) de replicar en un foro del cual esperas que la gente te ayude; pues pónselo un poco más fácil.
  #3 (permalink)  
Antiguo 08/01/2014, 10:33
 
Fecha de Ingreso: octubre-2013
Mensajes: 11
Antigüedad: 1 año
Puntos: 1
Respuesta: Problema para mover Divs

Disculpa miembro de la real academia española, lo redacte rapido y quizas me equivoque en algunas palabras, el codigo lo puse de esa manera porque despues dicen "Ponlo como codigo", si no puedes aportar nada, agradezco a que te limites a no contestar, y si quieres contestar algo, por lo menos ten la decencia de aportar y no solo criticar.


PD: si ya se, de seguro me suspenderas la cuenta o borraras algo, ni modo.
  #4 (permalink)  
Antiguo 08/01/2014, 11:01
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.373
Antigüedad: 12 años, 2 meses
Puntos: 1697
Respuesta: Problema para mover Divs

No sé en qué lugar estarás acostumbrado a participar, pero aquí no suspendemos cuentas por un simple ataque, por muy gratuitos que sean.

El problema es que tu código no es muy legible, ni tampoco tu texto, ya que uno tiene que ir adivinando las palabras. Todo el mundo se equivoca, pero se ve claramente la diferencia cuando es sin querer de cuando es porque no le importa a quien escribe (pistas: falta de mayúsculas y puntos, "q", "pq" etc y faltas ortográficas por doquier y demás). Obviamente en tu caso es que no te importa demasiado, ya que el siguiente mensaje si que lo escribiste bien, a falta de tildes, pero se puede leer perfectamente bien. Así que es más desgana (por no decir falta de respeto) que otra cosa.

Aunque no debería de contestarte al problema, ya que esa política tuya de "o aportas o te callas" no invita a ello...

Pero básicamente te pasan dos cosas.

La primera ya te la dije, que escribes fatal. Donde tiene que poner absolute escribes otra cosa que no existe, luego no cambias la posición ya que sigue estando con una posición estática, que es la del por defecto. Luego tampoco debería de hacer caso a otras propiedades (por ejemplo top, left o z-index) ya que sólo funcionan con elementos cuya posición no sea estática.

Luego tu código en algunas partes está bien si estuviéramos en algún momento de antes de la Navidad de 1999, ya que por aquel entonces se publicó la especificación HTML4.01 donde etiquetas como [inline]center[/center] fueron depreciadas y atributos como align también. Aunque, según tu código, deberías de usar el DOCTYPE de HTML5, ya que usas atributos de HTML5.
Por sintetizarlo, estás usando elementos que hace 15 años se descatalogaron y elementos que en el año 2014 aún no son algo oficial (porque HTML5 no es una recomendación aún, sino un borrador). Es decir, que tienes un cacao en forma de código importante.

Tampoco es de buena escuela poner tablas y otras yerbas en listas de definición. Estás básicamente usándolas como elementos estructurales.

Todo eso, además de otros muchos detallitos.

Así que seguramente no tengas demasiada idea de lo que estás haciendo. Yo que tú limpiaría el código antes de seguir. Muchas veces cuando se hace esta limpieza los problemas se arreglan como por arte de magia.

Etiquetas: background, color, divs, html
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 07:33.
SEO by vBSEO 3.3.2