Centralizar objetos em página HTML - Table?

11 de setembro de 2012 7 respostas

Andre_Rosa 11 de setembro de 2012

Olá. Tenho o seguinte arquivo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabela</title>
<br>
<center>
<!-- FILTRO -->
<!-- <form method="post" name="PesquisaForm"> -->
<!-- Comentei a tag form por ele nao ser necessaria, e por estar mal escrita
     isso é, ela é aberta aki, mas em nenhuma momento foi fechada. -->
<pre style="font-family: Book Antiqua;">Razão Social:</pre>
<td><input id="pesquisa" type="text" name="pesquisa" size="100"></td>
<input type="button" value="Submit" onClick='load_grid_filter()'/> 
<!-- Mudei a tag acima do tipo 'submit'p/ button, adicionei o evento onclick
     na nova funcao que criei no site.js... -->
<br><br><br>
</center>    
<!-- FILTRO -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<script src="js/prototype.lite.js"></script>
<script src="js/moo.ajax.js"></script>
<script src="js/site.js"></script>


<noscript> 
Habilite o Javascript para visualizar esta página corretamente...
</noscript> 
<style>
.borda{border: 1px solid;}
div{font-family: Verdana; font-size: 12px;}
td{font-family: Verdana; font-size: 12px;}
input{font-family: Verdana; font-size: 12px;}
</style>
<center>
</head>
<body onLoad=load_grid()>
<div id="msg" style="visibility: hidden;">&nbsp;<font face="Verdana" size="2">Processando...</font></div>
<div id="resultado"></div>
<br>
</center>
<div>
<form name="formulario">
<table width="300" border="0">
	<tr>
	<td>Bloqueado:</td>
	<td><select size="1" name="D1">
<option selected value="F">F</option>
<option value="V">V</option>
</select>	
	</tr>		
  <tr>
    <td>Razão Social:</td>
    <td><input id="nome" type="text" name="nome" size="25"></td>
  </tr>
  <tr>
    <td>Bloqueado:</td>
    <td><input id="email" type="text" name="email" size="25"></td>
  </tr>
  <tr>
    <td>Nome Fantasia:</td>
    <td><input id="fone" type="text" name="fone" size="25"></td>
  </tr>
  <tr>
      <td><input type="button" id="botao" value="Incluir" onClick=valida_form()></td>
    <td><input type="hidden" id="acao" value=""></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

Como vocês podem ver, há um formulário na página, e que aliás fica abaixo de tudo. Na página há um grid, que é preenchido à partir de um XML, com os dados no banco. O resultado é esse:

[img]http://i46.tinypic.com/flyf6p.png[/img]

Até aí tudo bem. O problema é quando há muitos items no grid, pois aí o usuário tem que rolar a página para chegar à ele. Alguém sabe como eu posso deixar esse formulário fixo no canto esquerdo da tela, na direção dos títulos do grid?

Obrigado!

7 Respostas

matheus.nani 11 de set. de 2012

Tente adicionar isso ao seu codigo na tag

<style> position:absolute; left:12%; top:50%; </style>

lembrando que left - esquerda
top - topo

então para que ela fique totalmente a esquerda deixe 0%
top você decide é a distância do topo da sua página.

Andre_Rosa 11 de set. de 2012

Não funcionou.

Mais alguma sugestão?
Obrigado!

rafaduka 11 de set. de 2012

Uma rápida pesquisa no Google vc encontraria, algo do tipo:

element {
	display: block;
	position: absolute;
	padding: 2px 3px;
	z-index: 99999; 
	height: 58px;
	left: 50%;
	margin: -29px 0 0 -75.5px;/*
				Respectivamente altura e largura, para resultado
				divida por 2, altura e largura funciona no IE 6.+
				Chrome, FF 1.5 +, Safari, etc...*/
	position: absolute;
	top: 50%;
	width: 151px;
}

Andre_Rosa 11 de set. de 2012

rafaduka:
Uma rápida pesquisa no Google vc encontraria, algo do tipo:

element { display: block; position: absolute; padding: 2px 3px; z-index: 99999; height: 58px; left: 50%; margin: -29px 0 0 -75.5px;/* Respectivamente altura e largura, para resultado divida por 2, altura e largura funciona no IE 6.+ Chrome, FF 1.5 +, Safari, etc...*/ position: absolute; top: 50%; width: 151px; }

Também não funcionou, Rafaduka.

Eu só consigo pensar em table-cells, mas não tenho certeza se daria certo.

Obrigado.

Mais alguma sugestão?

matheus.nani 11 de set. de 2012

Sua classe do CSS .borda é a tabela certo ?

faz isso:

[b].borda{
	
	border: 1px solid; 
	position:absolute;
	left:10px;
	top:103px;

}  [/b]

se não for é só criar uma outra classe colocar o código dentro e chamar a class na div da tabela.
ou só coloca ele dentro do css dela(tabela)

Andre_Rosa 11 de set. de 2012

matheus.nani:
Sua classe do CSS .borda é a tabela certo ?
faz isso:
[b].borda{
	
	border: 1px solid; 
	position:absolute;
	left:10px;
	top:103px;

}  [/b]
se não for é só criar uma outra classe colocar o código dentro e chamar a class na div da tabela.
ou só coloca ele dentro do css dela(tabela)

Deu certo em partes. Eu consegui mover o grid, tudo certo, mas dá problema com os títulos. O grid é formado assim:

<?php
require_once("include/conexao.inc.php");
require_once("include/Clbanco.php");
	
$cadastro = new banco($conn,$db);
$q = (isset($_GET['pesquisa'])) ? $_GET['pesquisa'] : "";
$data=$cadastro->seleciona("empresa", $q);

//se encontrar registros	
if(mysql_num_rows($data)){
	header("Content-type: application/xml"); 
		
	$xml="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";  
	
	//preenchimento da Array com o nome dos campos
	for($i=0;$i < mysql_num_fields($data);$i++){
		$campos[$i]=mysql_field_name($data,$i);
	}	
	
	$xml.="<dados>";
	$xml.="<cabecalho>";
	
	//cabecalho da tabela
	for($i=0;$i < sizeof($campos);$i++){
		$xml.="<campo>".$campos[$i]."</campo>";
	}
	
	$xml.="</cabecalho>";
	
	//corpo da tabela
	while($row=mysql_fetch_object($data)){
		$xml.="<registro>";
		for($i=0;$i < sizeof($campos);$i++){
			$xml.="<item>".$row->$campos[$i]."</item>";
		}
		$xml.="</registro>";		
	}
	
	//fim da tabela
	$xml.="</dados>";	
}

echo $xml;
mysql_close($conn);
exit();
?>

Andre_Rosa 11 de set. de 2012

Por que isso está acontecendo?

Obrigado!

Criado 11 de setembro de 2012

Ultima resposta 11 de set. de 2012

Respostas 7

Participantes 3

7 Respostas

Topicos relacionados