Centralizar pagina

Jeferson Bueno · Outubro 1, 2008

Gostaria de saber se alguem poderia me ajudar centralizar esta pagina , pois ela fica somente no lado esquerdo do bronzer e eu não consiguo por ela no centro... segue o codigo da mesma...

<? 
session_start();
if((session_is_registered("cida") && session_is_registered("log"))){   
$cidade = $_SESSION[cida];
}
else{
	header("Location: index.php");
	}
?>
<?
if($pg == "area_vip" OR $pg == "vip_cad" OR $pg == "vip_alb" OR $pg == "vip_pro" OR $pg == "vip_proAdd" OR $pg == "vip_exclui_foto"){
require "verifica.php";
}
include "config.php";
$pg = $_GET['pg']; 
//$cidade = //$_GET[cidade];
?>
<?

/*if(empty($cidade)){
$cidade = "1";

}*/

if(empty($pg)) {
$pg = "principal";
}
if($pg == "nosite"){
	$celula_cor = "#FF9900";
}
elseif($pg == "distrair" || $pg == "piadas" || $pg == "curiosidades"){
	$celula_cor = "#0033cc";
	}
elseif($pg == "chat"){
	$celula_cor = "#99cc00";
	}
elseif($pg == "area_vip" || $pg == "index_vip" || $pg == "vip_cad" OR $pg == "vip_alb" OR $pg == "vip_pro" OR $pg == "vip_proAdd" OR $pg == "vip_exclui_foto"){
	$celula_cor = "#cc3300";
	}
elseif($pg == "osite"){
	$celula_cor = "#660099";
	}
else{
	$celula_cor = "#494949";
	}
?>



<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Romaria, romagito, mg, Chapada Diamantina, portal chapada, Portal Chapada, Diamantina, história, história chapada, cidades chapada diamantina, cidade chapada, Barra da Estiva, Ibicoara, Lençóis, Mucugê, fotos chapada diamantina, turismo, aventura, viagem," />
<meta name="description" content="Portal Romaria, o portal de Romaria, onde você encontra tudo sobre Romaria, cidades, história, fotos, informações e muito mais." />
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:120;
	height:600;
	z-index:1;
	left: 807px;
	top: 14px;
}
-->
</style>
<!--Começo do script dentro do head--><style TYPE="text/css">
#floater {
		position: absolute;
		right: 0;
		visibility: visible;
		left: 798px;
		top: 1px;
		z-index: 0;
}
</style><!--Fim do script do script dentro do head--></head>
<body onLoad="
<?
if($pg == "principal"){
$busca = mysql_query("SELECT * FROM banners_popup WHERE id_franquia='$cidade' order by ordem");
while($dados=mysql_fetch_array($busca)){
?>
window.open('estrutura/banners_popup/popup<? echo $dados[ordem];?>.php?cidade=<? echo $cidade?>','Janela<? echo $dados[ordem];?>','width=<? echo $dados[largura];?>,height=<? echo $dados[altura];?>,left=<? echo $dados[posicaox];?>, top=<? echo $dados[posicaoy];?>, toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizab
le=no');
<? }
}?>
">

<!--Começo do script--><script LANGUAGE="JavaScript">

		self.onError=null;
		currentX = currentY = 0;  
		whichIt = null;		   
		lastScrollX = 0; lastScrollY = 0;
		NS = (document.layers) ? 1 : 0;
		IE = (document.all) ? 1: 0;


	
		function heartBeat() {

			if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
			if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
			if(diffY != lastScrollY) {
						percent = .1 * (diffY - lastScrollY);
						if(percent > 0) percent = Math.ceil(percent);
						else percent = Math.floor(percent);
									   if(IE) document.all.floater.style.pixelTop += percent;
									   if(NS) document.floater.top += percent; 
						lastScrollY = lastScrollY + percent;
			}
			   if(diffX != lastScrollX) {
						percent = .1 * (diffX - lastScrollX);
						if(percent > 0) percent = Math.ceil(percent);
						else percent = Math.floor(percent);
						if(IE) document.all.floater.style.pixelLeft += percent;
						if(NS) document.floater.left += percent;
						lastScrollX = lastScrollX + percent;
				}	   
		}



		function checkFocus(x,y) { 

				stalkerx = document.floater.pageX;
				stalkery = document.floater.pageY;
				stalkerwidth = document.floater.clip.width;
				stalkerheight = document.floater.clip.height;
				if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
				else return false;
		}
   
		function grabIt(e) {

				if(IE) {
						whichIt = event.srcElement;
						while (whichIt.id.indexOf("floater") == -1) {
								whichIt = whichIt.parentElement;
								if (whichIt == null) { return true; }
					}
						whichIt.style.pixelLeft = whichIt.offsetLeft;
					whichIt.style.pixelTop = whichIt.offsetTop;
						currentX = (event.clientX + document.body.scrollLeft);
						currentY = (event.clientY + document.body.scrollTop);   
				} else { 
				window.captureEvents(Event.MOUSEMOVE);
				if(checkFocus (e.pageX,e.pageY)) { 
						whichIt = document.floater;
						StalkerTouchedX = e.pageX-document.floater.pageX;
						StalkerTouchedY = e.pageY-document.floater.pageY;
				} 
				}
			return true;
		}
		
		function moveIt(e) {
				if (whichIt == null) { return false; }
				if(IE) {
					newX = (event.clientX + document.body.scrollLeft);
					newY = (event.clientY + document.body.scrollTop);
					distanceX = (newX - currentX);	distanceY = (newY - currentY);
					currentX = newX;	currentY = newY;
					whichIt.style.pixelLeft += distanceX;
					whichIt.style.pixelTop += distanceY;
						if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
						if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
						if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
						if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
						event.returnValue = false;
				} else { 
						whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
				if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
				if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
				if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
				if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
				return false;
				}
			return false;
		}
		
		function dropIt() {
				whichIt = null;
			if(NS) window.releaseEvents (Event.MOUSEMOVE);
			return true;
		}

		
		if(NS) {
				window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
				window.onmousedown = grabIt;
				window.onmousemove = moveIt;
				window.onmouseup = dropIt;
		}
		if(IE) {
				document.onmousedown = grabIt;
				document.onmousemove = moveIt;
				document.onmouseup = dropIt;
		}
		
		if(NS || IE) action = window.setInterval("heartBeat()",1);

</script>

<table width="796" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td><? include "cima.php"?></td>
  </tr>
</table>
<div id="floater" ><? 
$limite = 1;
$pagina = "padrao";
include "estrutura/banners/banners1024.php"; ?></div>
<table width="796" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td height="28" rowspan="2" valign="bottom"><img src="images/top_menu.jpg" width="128" height="49"></td>
	<td height="28" valign="bottom" bgcolor="#0066CC"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_no_site.gif" width="86" height="28" border="0" usemap="#Map"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_distrair.gif" width="86" height="28" border="0" usemap="#Map2"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_chat.gif" width="86" height="28" border="0" usemap="#Map3"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_areavip.gif" width="86" height="28" border="0" usemap="#Map4"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_sobre.gif" width="86" height="28" border="0" usemap="#Map5"><img src="images/separa_menu.jpg" width="2" height="19"><img src="images/menu_oblog.gif" width="86" height="28" border="0" usemap="#Map6"><img src="images/separa_menu.jpg" width="2" height="19"></td>
	<td rowspan="2" valign="bottom"><img src="images/top_menu_dir.jpg" width="136" height="49"></td>
  </tr>
  <tr>
	<td height="3" bgcolor="#0066CC" valign="top"><?php 
									if($pg == "nosite"){
									$linha_divide = "images/divide_nosite.jpg";
									}
									elseif($pg == "distrair" || $pg == "curiosidades" || $pg == "piadas"){
									$linha_divide = "images/divide_distrair.gif";
									}
									elseif($pg == "chat"){
									$linha_divide = "images/divide_chat.gif";
									}
									elseif($pg == "area_vip" || $pg == "index_vip" || $pg == "vip_cad" OR $pg == "vip_alb" OR $pg == "vip_pro" OR $pg == "vip_proAdd" OR $pg == "vip_exclui_foto"){
									$linha_divide = "images/divide_areavip.gif";
									}
									elseif($pg == "osite"){
									$linha_divide = "images/divide_sobrenos.gif";
									}
									else{
									$linha_divide = "images/linha_divide_centro_menu.gif";
									}
									?></td>
  </tr>
  <tr>
	<td width="128" height="193" valign="top" bgcolor="#0066CC"><table width="128" border="0" cellspacing="0" cellpadding="0">
	  
	  <tr>
		<td bgcolor="#0066CC"><? include "estrutura/menu2.php"?></td>
	  </tr>
	</table></td>
	<td width="532" bgcolor="#0066CC" valign="top"><? include "query.php"?></td>
	<td width="136" valign="top" bgcolor="#0066CC"><table width="120" border="0" align="center" cellpadding="0" cellspacing="0">
	  <tr>
		<td></td>
	  </tr>
	</table>
	  <br>
	  <? 
$pagina = "padrao";

$posicao = 1;
include "estrutura/banners/banners120.php";
$posicao = 2;
include "estrutura/banners/banners120.php";
$posicao = 3;
include "estrutura/banners/banners120.php";
$posicao = 4;
include "estrutura/banners/banners120.php";
$posicao = 5;
include "estrutura/banners/banners120.php";
$posicao = 6;
include "estrutura/banners/banners120.php";
$posicao = 7;
include "estrutura/banners/banners120.php";
$posicao = 8;
include "estrutura/banners/banners120.php";
$posicao = 9;
include "estrutura/banners/banners120.php";
?>
		</p>
	<p>		 </p></td>
  </tr>
</table>
<table width="796" height="50" border="0" cellpadding="0" cellspacing="0">
  <tr>
	<td width="186" height="40" bgcolor="#0066CC"><img src="images/rodape.jpg" width="186" height="50" border="0" usemap="#bobrinha"></td>
	<td width="610" background="images/rodape1.jpg" bgcolor="#0066CC"><div align="left">Copyrigth© 2007-
		<?=date(Y)?>
		<?=$tsite?>
- Todos os Direitos Reservados.<br>
O melhor conteúdo em um só lugar... </div></td>
  </tr>
</table>

<map name="Map"><area shape="rect" coords="2,4,84,26" href="?pg=nosite" alt="No site">
</map>
<map name="Map2"><area shape="rect" coords="4,2,85,27" href="?pg=distrair" alt="Distrair">
</map>
<map name="Map3">
<area shape="rect" coords="4,3,85,26" href="?pg=chat" alt="Chat">
</map>
<map name="Map4"><area shape="rect" coords="4,3,84,26" href="?pg=area_vip" alt="Área VIP">
</map>
<map name="Map5">
  <area shape="rect" coords="3,2,83,27" href="?pg=osite" alt="O site">
</map>
<map name="Map6"><area shape="rect" coords="3,2,84,26" href="?pg=videos" alt="Assista vídeos">
</map>

<map name="bobrinha">
<area shape="rect" coords="10,31,128,46" href="mailto:jefersonbueno@gmail.com" alt="Jeferson Bueno - Desenvolvimento Web">
</map>

Giovani · Outubro 1, 2008

http://forum.imasters.com.br/index.php...st&p=735132

Zumkeller · Outubro 1, 2008

Cara,

Você pode usar um código CSS para centralizar esta página.

Segue:

.principal {

width: 600px;

height: 400px;

position: absolute;

top: 50%;

left: 50%;

background: #FF0000;

margin-top: -200px;

margin-left: -300px;

}

Repare que no caso, eu coloquei Largura de 600px e Altura de 400px, mas aí você coloca o tamanho exato.

Depois, na margin-top, você coloca exatamente a Metade da altura total da página e na Margin-left, a metade da largura total da página. O Top e o Left em 50% farão com que você esteja na metade exata da tela, menos a metade da largura e altura da página, assim ficando sempre exatamente no centro da tela, independente do tamanho do monitor do usuário.

Espero ter ajudado!

Falow!!

Jeferson Bueno · Outubro 1, 2008

Zumkeller ta ajudando demais so que sou leigo no assunto e to começando agora e não sei bem onde lança este codigo que você me passou, que com certeza sera minha solução...

abraços

alebae · Outubro 3, 2008

Seria assim, entre as tag's <head></head>

<style type="text/css">
  #principal {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%; 
  background: #FF0000;
  margin-top: -200px;
  margin-left: -300px;
}
</style>

E, entre <body></body>

<div id="principal">
  Todo o conteúdo da página aqui
</div>

Entrar

Arquivado

Centralizar pagina

Recommended Posts

Jeferson Bueno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zumkeller 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jeferson Bueno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante