Ir para conteúdo
Fórum Script Brasil
  • 0

Como inserir js que centraliza div

Dark Panda

Perguntado por Dark Panda,

 Share

Pergunta

Dark Panda

Dark Panda

Postado
Postado

Saudações a todos,

Sou designer gráfico e não entendo nada de programação e webdesigner, mas as vezes preciso resolver alguns pepinos.

Criei a base do meu portifólio, desenhei no photoshop, fiz os slices, salvei em table, converti para css (Table2Css converter 2.9.0) e agora precisaria centralizar tudo isso na página (para deixar o layout "líquido" como dizem). Imagino que por usar uma solução automática o código tenha ficado com uma razoável quantidade de sujeira, mas para meus propósitos iniciais é o suficiente.

Andei fuçando para ver se tinha alguma forma simples para fazer isso, mas não encontrei nada. Um dos resultados deu a seguinte solução:

código javascript

function centralizar(div_pai,div_central)
{
var height_pai = document.getElementById(div_pai).offsetHeight;
var height_central = document.getElementById(div_central).offsetHeight;
var margem = (height_pai - height_central)/2;
parent.document.getElementById(div_central).style.padding = margem+"px 0 0 0";
}
e no onload eu uso centralizar('id_da_div_pai', 'id_div_centralizar'); por exemplo 
<html>
<head>
<script type="text/javascript" src="div_central.js"></script>
<style type="text/css">#pai {height:100%;}</style>
</head>
<body onload="centralizar('pai', 'filha');">
<div id="pai">
<div id="filha">conteudo</div>
</div>
</body>
</html>
As perguntas são: :: O .js fica assim: 
function centralizar(div_pai,div_central)
{
var height_pai = document.getElementById(div_pai).offsetHeight;
var height_central = document.getElementById(div_central).offsetHeight;
var margem = (height_pai - height_central)/2;
parent.document.getElementById(div_central).style.padding = margem+"px 0 0 0";
}
:: certo? :: Meu código esta assim: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Valmir Pereira da Silva</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="index.css" rel="stylesheet" type="text/css">
	    <link href="purgatorio/scripts/index.css" rel="stylesheet" type="text/css">
    </head>
	<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
		<!-- ImageReady Slices (! Portifolio (807 x 460 + 15) [Index Slices].psd) -->
		<div id="Table_01" class="ts-1">
			<div class="ts-1-1"><img height="3" alt="" src="purgatorio/images/index_01.gif" width="807"></div>
			<div class="ts-1-2"><img height="457" alt="" src="purgatorio/images/strut_02.gif" width="3"></div>
			<div class="ts-1-3"><img height="454" alt="" src="purgatorio/images/index_03.gif" width="158"></div>
			<div class="ts-1-4"><img height="457" alt="" src="purgatorio/images/strut_03.gif" width="3"></div>
			<div class="ts-1-5"><img height="454" alt="" src="purgatorio/images/index_05.gif" width="158"></div>
			<div class="ts-1-6"><img height="457" alt="" src="purgatorio/images/strut_04.gif" width="3"></div>
			<div class="ts-1-7"><img height="454" alt="" src="purgatorio/images/index_07.gif" width="158"></div>
			<div class="ts-1-8"><img height="457" alt="" src="purgatorio/images/strut_05.gif" width="3"></div>
			<div class="ts-1-9"><img height="454" alt="" src="purgatorio/images/index_09.gif" width="157"></div>
			<div class="ts-1-10"><img height="457" alt="" src="purgatorio/images/strut_06.gif" width="3"></div>
			<div class="ts-1-11"><img height="454" alt="" src="purgatorio/images/index_11.gif" width="158"></div>
			<div class="ts-1-12"><img height="457" alt="" src="purgatorio/images/strut_07.gif" width="3"></div>
			<div class="ts-1-13"><img height="3" alt="" src="purgatorio/images/strut_08.gif" width="158"></div>
			<div class="ts-1-14"><img height="3" alt="" src="purgatorio/images/strut_09.gif" width="158"></div>
			<div class="ts-1-15"><img height="3" alt="" src="purgatorio/images/strut_10.gif" width="158"></div>
			<div class="ts-1-16"><img height="3" alt="" src="purgatorio/images/strut_11.gif" width="157"></div>
			<div class="ts-1-17"><img height="3" alt="" src="purgatorio/images/strut_12.gif" width="158"></div>
			<div class="ts-1-18"><img height="15" alt="" src="purgatorio/images/strutc_01.gif" width="244"></div>
			<div class="ts-1-19"><img height="15" alt="" src="purgatorio/images/strutc_02.gif" width="319"></div>
			<div class="ts-1-20"><img height="15" alt="" src="purgatorio/images/strutc_03.gif" width="244"></div>
			<div class="ts-1-21"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
			<div class="ts-1-22"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="158"></div>
			<div class="ts-1-23"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
			<div class="ts-1-24"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="80"></div>
			<div class="ts-1-25"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="78"></div>
			<div class="ts-1-26"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
			<div class="ts-1-27"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="158"></div>
			<div class="ts-1-28"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
			<div class="ts-1-29"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="77"></div>
			<div class="ts-1-30"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="80"></div>
			<div class="ts-1-31"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
			<div class="ts-1-32"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="158"></div>
			<div class="ts-1-33"><img height="1" alt="" src="purgatorio/images/strut_00.gif" width="3"></div>
		</div>
	<!-- End ImageReady Slices -->
	</body>
</html>

:: quem é a div pai? É a "Table_01"? E a filha? Como aplico isso no código e; tem uma forma mais simples de fazer isso? Tudo ficaria mais simples se o Table2Css converter 2.9.0 tivesse a opção de centralização do layout...

desde já, grato pela atenção dispensada.

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,5k
    • Posts
      652,4k
×
×
  • Criar Novo...