[Resolvido] Centralizar página

Marostegan · Novembro 10, 2008

pessoal, estou montando um site e utilizando CSS para que o mesmo esteja sempre centralizado.

Através de buscas na internet chequei a um script que funcionou certinho! porém o único problema que estou tento é que preciso que esse site fique "grudado" no topo da página, o problema é que esse código CSS deixa um espaço que não consigo tirar... Alguém sabe como fazer para que o site fique, além de centralizado, grudado no topo do navegador?

Obrigado, abaixo os códigos CSS:

No Site:

<style type="text/css">
}
#central {
	color: inherit;
	width: 778px;, 
	padding-top: auto;
	padding: 0;
	margin: 0 auto; /* centraliza [ I-E + M.z ] */
	border: 0px solid #000000;
}
.style1 {color: #FFFFFF}
.style3 {
	color: #000000;
	font-family: verdana;
	font-size: 14px;
}
.style4 {color: #000000; font-family: verdana; font-size: 14px; font-weight: bold; }
.style7 {
	font-size: 8px;
	font-family: verdana;
	font-weight: bold;
}
.style8 {
	font-family: verdana;
	font-weight: bold;
	font-size: 10px;
}
#apDiv1 {
	position:absolute;
	left:733px;
	top:338px;
	width:137px;
	height:24px;
	z-index:1;
}
.style9 {font-family: verdana; font-weight: bold; font-size: 11px; }
</style>

Arquivo: AC_RunActiveContent (dentro da pasta: Script)

//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2007 Adobe Systems Incorporated.  All rights reserved.
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

function ControlVersion()
{
	var version;
	var axo;
	var e;

	// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry

	try {
		// version will be set for 7.X or greater players
		axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
		version = axo.GetVariable("$version");
	} catch (e) {
	}

	if (!version)
	{
		try {
			// version will be set for 6.X players only
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
			
			// installed player is some revision of 6.0
			// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
			// so we have to be careful. 
			
			// default to the first public version
			version = "WIN 6,0,21,0";

			// throws if AllowScripAccess does not exist (introduced in 6.0r47)		
			axo.AllowScriptAccess = "always";

			// safe to call for 6.0r47 or greater
			version = axo.GetVariable("$version");

		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 4.X or 5.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = axo.GetVariable("$version");
		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 3.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
			version = "WIN 3,0,18,0";
		} catch (e) {
		}
	}

	if (!version)
	{
		try {
			// version will be set for 2.X player
			axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
			version = "WIN 2,0,0,11";
		} catch (e) {
			version = -1;
		}
	}
	
	return version;
}

// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
	// NS/Opera version >= 3 check for Flash plugin in plugin array
	var flashVer = -1;
	
	if (navigator.plugins != null && navigator.plugins.length > 0) {
		if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
			var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
			var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
			var descArray = flashDescription.split(" ");
			var tempArrayMajor = descArray[2].split(".");			
			var versionMajor = tempArrayMajor[0];
			var versionMinor = tempArrayMajor[1];
			var versionRevision = descArray[3];
			if (versionRevision == "") {
				versionRevision = descArray[4];
			}
			if (versionRevision[0] == "d") {
				versionRevision = versionRevision.substring(1);
			} else if (versionRevision[0] == "r") {
				versionRevision = versionRevision.substring(1);
				if (versionRevision.indexOf("d") > 0) {
					versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
				}
			}
			var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
		}
	}
	// MSN/WebTV 2.6 supports Flash 4
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
	// WebTV 2.5 supports Flash 3
	else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
	// older WebTV supports Flash 2
	else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
	else if ( isIE && isWin && !isOpera ) {
		flashVer = ControlVersion();
	}	
	return flashVer;
}

// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
	versionStr = GetSwfVer();
	if (versionStr == -1 ) {
		return false;
	} else if (versionStr != 0) {
		if(isIE && isWin && !isOpera) {
			// Given "WIN 2,0,0,11"
			tempArray		 = versionStr.split(" "); 	// ["WIN", "2,0,0,11"]
			tempString		= tempArray[1];			// "2,0,0,11"
			versionArray	  = tempString.split(",");	// ['2', '0', '0', '11']
		} else {
			versionArray	  = versionStr.split(".");
		}
		var versionMajor	  = versionArray[0];
		var versionMinor	  = versionArray[1];
		var versionRevision   = versionArray[2];

			// is the major.revision >= requested major.revision AND the minor version >= requested minor
		if (versionMajor > parseFloat(reqMajorVer)) {
			return true;
		} else if (versionMajor == parseFloat(reqMajorVer)) {
			if (versionMinor > parseFloat(reqMinorVer))
				return true;
			else if (versionMinor == parseFloat(reqMinorVer)) {
				if (versionRevision >= parseFloat(reqRevision))
					return true;
			}
		}
		return false;
	}
}

function AC_AddExtension(src, ext)
{
  if (src.indexOf('?') != -1)
	return src.replace(/\?/, ext+'?'); 
  else
	return src + ext;
}

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
  var str = '';
  if (isIE && isWin && !isOpera)
  {
	str += '<object ';
	for (var i in objAttrs)
	{
	  str += i + '="' + objAttrs[i] + '" ';
	}
	str += '>';
	for (var i in params)
	{
	  str += '<param name="' + i + '" value="' + params[i] + '" /> ';
	}
	str += '</object>';
  }
  else
  {
	str += '<embed ';
	for (var i in embedAttrs)
	{
	  str += i + '="' + embedAttrs[i] + '" ';
	}
	str += '> </embed>';
  }

  document.write(str);
}

function AC_FL_RunContent(){
  var ret = 
	AC_GetArgs
	(  arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
	 , "application/x-shockwave-flash"
	);
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_SW_RunContent(){
  var ret = 
	AC_GetArgs
	(  arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
	 , null
	);
  AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
  var ret = new Object();
  ret.embedAttrs = new Object();
  ret.params = new Object();
  ret.objAttrs = new Object();
  for (var i=0; i < args.length; i=i+2){
	var currArg = args[i].toLowerCase();	

	switch (currArg){	
	  case "classid":
		break;
	  case "pluginspage":
		ret.embedAttrs[args[i]] = args[i+1];
		break;
	  case "src":
	  case "movie":	
		args[i+1] = AC_AddExtension(args[i+1], ext);
		ret.embedAttrs["src"] = args[i+1];
		ret.params[srcParamName] = args[i+1];
		break;
	  case "onafterupdate":
	  case "onbeforeupdate":
	  case "onblur":
	  case "oncellchange":
	  case "onclick":
	  case "ondblClick":
	  case "ondrag":
	  case "ondragend":
	  case "ondragenter":
	  case "ondragleave":
	  case "ondragover":
	  case "ondrop":
	  case "onfinish":
	  case "onfocus":
	  case "onhelp":
	  case "onmousedown":
	  case "onmouseup":
	  case "onmouseover":
	  case "onmousemove":
	  case "onmouseout":
	  case "onkeypress":
	  case "onkeydown":
	  case "onkeyup":
	  case "onload":
	  case "onlosecapture":
	  case "onpropertychange":
	  case "onreadystatechange":
	  case "onrowsdelete":
	  case "onrowenter":
	  case "onrowexit":
	  case "onrowsinserted":
	  case "onstart":
	  case "onscroll":
	  case "onbeforeeditfocus":
	  case "onactivate":
	  case "onbeforedeactivate":
	  case "ondeactivate":
	  case "type":
	  case "codebase":
	  case "id":
		ret.objAttrs[args[i]] = args[i+1];
		break;
	  case "width":
	  case "height":
	  case "align":
	  case "vspace": 
	  case "hspace":
	  case "class":
	  case "title":
	  case "accesskey":
	  case "name":
	  case "tabindex":
		ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
		break;
	  default:
		ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
	}
  }
  ret.objAttrs["classid"] = classid;
  if (mimeType) ret.embedAttrs["type"] = mimeType;
  return ret;
}

se alguém souber como fazer isso ou tenha algum outro CSS para centralizar site que seja melhor que esse...

brigadao pessoal!!

abraços

Aprendiz CSS · Novembro 10, 2008

* {

margin: 0;

padding: 0;

}

Paulo de Tarso F. M. · Novembro 11, 2008

Embora zerar tudo nesse momento pode causar uma série de problemas indesejados. Para utilizar a dica do amigo Aprendiz CSS, é recomendável que se faça isso logo no começo...

Como já há bastante coisa pelo jeito, remova apenas do body:

body {margin:0;}

Aprendiz CSS · Novembro 11, 2008

Pelo que notei o código da pessoa é em flash!

sendo assim não vejo porque não usar o css reset!

abraço

Marostegan · Novembro 11, 2008

Embora zerar tudo nesse momento pode causar uma série de problemas indesejados. Para utilizar a dica do amigo Aprendiz CSS, é recomendável que se faça isso logo no começo...

Como já há bastante coisa pelo jeito, remova apenas do body:
body {margin:0;}

olá amigo.. não tem isso ai no body.... =//

Marostegan · Novembro 11, 2008

Pelo que notei o código da pessoa é em flash!

sendo assim não vejo porque não usar o css reset!

abraço

oláa... não entendi esse negócio de ser em flash e nem de resetar...

na verdade não manjo nda de CSS, pretendo estudar mas no momento preciso urgente desse código funcionando certinho...

poderia me ajudar?

ou ao inves de usar esse código mque colei aqui, se tiver algum outro melhor para centralizar a pagina e o topo ficar "grudado" no navegador pode ser também, pois estou começando esse novo site do zero...

William Bruno · Novembro 11, 2008

O Paulo de Tarso Disse para você adicionar essa linha ai.

o remover foi no sentido, de zerar a margin do body.. e não de tirar algum trecho de código

Adicione essa linha ai no teu css.

Marostegan · Novembro 11, 2008

pessoal, eu segui esse modelo que achei aqui na net e deu certo... vocês que conhecem bem... isso é o correto em fazer? terei problemas no decorrer do desenvolvimento? existe algo melhor para esse procedimento?

obrigado!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#cccccc;
text-align:center; /* hack para o IE */	
	}
#tudo {
width: 760px;
margin:0 auto;			
padding: 10px;
text-align:left; /* "remédio" para o hack do IE */	
	}
#conteudo {
padding: 5px;
background-color: #eeeeee;
	}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
	<h1>Pagina Centrada com CSS sem scroll ate 800x600</h1>
	<p> Não use nenhum elemento HTML 
(figuras, tabelas, etc...) com largura 
	  superior a 750px.</p>
</div>
</div>
</body>
</html>

Marostegan · Novembro 11, 2008

O Paulo de Tarso Disse para você adicionar essa linha ai.

o remover foi no sentido, de zerar a margin do body.. e não de tirar algum trecho de código

Adicione essa linha ai no teu css.

ah sim, entendi....

bom, não manjo nada de CSS... então fiz o seguinte:

<style type="text/css">
}
#central {
	color: inherit;
	width: 778px;,
	padding: 0;
	margin: 0 auto; /* centraliza [ I-E + M.z ] */
	border: 0px solid #000000;
	body: margin:0;
}

mas fala que a página está com erro e não acontece mais nada!

que fiz de errado?

Aprendiz CSS · Novembro 11, 2008

isso é o que nos te falamos para você!!!

caso queira ler, dê uma pesquisada aqui no forum que vai ver bastante coisa!!

se quiser ler um artigo que fiz acesse: http://aprendacss.wordpress.com/2008/06/25...-na-horizontal/

isso não existe

body: margin:0;

correto

body { margin:0; }

abraço

William Bruno · Novembro 11, 2008

Cara... bastava fazer isso:

<style type="text/css">
body{ margin:0;}
#central {
	color: inherit;
	width: 778px;,
	padding: 0;
	margin: 0 auto; /* centraliza [ I-E + M.z ] */
	border: 0;
}

Marostegan · Novembro 11, 2008

opaa... agora deu certo!

obrigado amigos, pela ajuda e pela paciência!!!

http://forum.imasters.com.br/public/style_emoticons/default/grin.gif http://forum.imasters.com.br/public/style_emoticons/default/grin.gif http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Arquivado

[Resolvido] Centralizar página

Recommended Posts

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Paulo de Tarso F. M. 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marostegan 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante