Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alesão

Centralizar o Site no browser

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

Alesão    0

Alesão
Postado

Bom dia a todos, sou novato e poderão confirmar isso no nível das perguntas. Eu não estou conseguindo centralizar o site no navegador.

 

Caso não tenha sido claro na pegunta vou tentar me expressar melhor. Eu gostaria que o site ficasse no meio da tela, que o topo, rodapé, e as laterais não ficassem enconstadas e sim no centro.

 

Desculpem se criei a duvida no local errado, prometo melhorar.

 

Um bom dia a todos , aguardo resposta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

macielcr7    9

macielcr7
Postado

se você trabalha com div no css da div principal coloque 

Margin:auto;
se trab com tabelas clique nela e tem uma opção align coloque ela com o valor center

 

mais aconcelho você trabalhar com divs.....

 

 

http://www.renanlima.com/blog/curso-de-web-008-css-trabalhando-com-divs/

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Marina    0

_Marina
Postado

Oi.

 

Se você estiver usando tabelas, basta selecionar ela e nas propriedades da tabela escolha na opção Align: Center ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alesão    0

Alesão
Postado

Bom dia Marina e Maciel. Obrigado por responderem a pergunta. Mas o lance não é alinhar infomações no conteudo do site. Eu quero é deixar o site no centro do browser. Ou sejá, o topo, rodape e as laterais não encostam em nada.

 

Eu cheguei a criar um div dentro da div boddyclass, ela criou um espaçamento pequeno entro o topo e a linha do navegador, mas não ficou centralizado.

 

Oi pessoal, chegeui aqui.

 

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 100px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	width: 100%;
	height: 100%;
	float: none;
}

Quando coloquei 100px em margin, criei o espaçamento que queria. Grato pelas respostas e se alguem tiver uma sugestão de como melhorar eu fico grato. Eu estou trabalahndo num laptop, então se os mais experientes, puderem me dar dicas de quantos px devo colocar para que a imagem fique boa em qualquer monitor eu agradeço.

 

Espero poder contribuir com os demais também.

 

Eita alegria de pobre dura pouco, pessoal como faço para que não estoure nas laterais?auhhuauhauhauhauhuhauh

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Buzzo    0

André Buzzo
Postado

Fala Compadres e Comadre! rs

 

Seguinte....não precisa mexer no "Body" não para deixar o site no centro do navegador.

 

A única coisa que você precisa ter em mente é o seguinte...qual o WIDTH do seu site?

 

É 760px? 984px? Pra qual resolução de monitor você tá fazendo o seu site?

 

Por exemplo...se for pra uma resoluçã de 800x600, você vai criar ele com 760px de largura que ele vai se encaixar perfeitamente na janela do navegador, sem exibir a barra de rolagem do rodapé.

 

Agora, para deixar ele sem encostar em nada, fica complicado para essa resolução. Se você está utilizando um notebook, provavelmente a resoluçã dele é 1280x800 correto?

 

Ele sempre vai apresentar espaços nas laterais, dependendo da estrutura que vpcê tá praticando. Mas, vamos lá para o CSS da bagaça pra deixar ele sempre centralizado no navegador.

 

Tenta utilizar isso:

 

 

body {
 font: 100% Verdana, Arial, Helvetica, sans-serif;
 background: #666666;
 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
 padding: 0;
 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 color: #000000;
}

#wrapper {

 width:984px; /*Para monitores de 1024x764 */
 margin:auto:
 height:2500px; /*Só pra você ter noção de onde está o layout*/
 background-color:#fff;
}

Aí no seu HTML, você estrutura ele assim:

 

<body>

 <div id="wrapper">
 	...
 </div>

</body>

Todas as outras Div´s que você criar (topo, rodapé, colunas, etc e tal), você joga dentro do WRAPPER respeitando as dimensões....depois que você terminar o site, você muda, na propriedade Wrapper, o heigth dele....coloca com "auto"!

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alesão    0

Alesão
Postado

Show de bola André. Grato pela sua colaboração vou textar a dica. Neste caso em específico estou usando um modelo de template, 1column elastic, centered, header and footer.

 

Vou aproveitar pra fazer o texte em outros templates.

 

Oi bruno, não sei se fiz certo, mas criei o wrapper que você indicou bem abixo deste boddy que colei abaixo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	width: 100%;
	height: 100%;
	float: none;
	background-color: #666666;
	background-image: url(../imagen2/fundobody.png);
}

E criei a <div id="wrapper"> como você indicou abaixo da div boddy e fachando antes dela. O resultado foi que o site ficou alinhado a esquerda e continuou grudado no topo, com background branco e a imagem do background que eu já inseri ficou a direita do monitor. Creio que eu tenha deixado de fazer algo? Ou fiz errado mesmo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

DaDih*    0

DaDih*
Postado

Hellos Buddies!!

Já tentei de tudo... mas o site não centraliza.

Consegui centralizar o background mas agora o conteúdo não centraliza...

Alguem ai poderia me ajudar?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Born Tecnologia - (41) 3092.2217</title>

<style type="text/css">

body {

font-family: Verdana, Geneva, sans-serif;

font-size: 100%;

color: #fff;

background-color: #fff;

margin-left: 20px;

margin-top: 20px;

margin-right: 20px;

margin-bottom: 20px;

background-image: url(backg.jpg);

background-position: center center;

background-repeat: no-repeat;

}

 

a, a:hover, a:active, a:focus {

outline:0;

direction:ltr;

}

 

.wrapper {

position:relative; height:25px;

}

 

.mainmenu {

position:absolute;

z-index:auto;

font-family:Verdana, Geneva, sans-serif;

font-weight:normal;

font-size:90%;

line-height:25px;

left:411px;

margin-left:-303px;

width:616px;

top: 151px;

}

 

ul.menu {

padding:0;

margin:0;

list-style:none;

width:100px;

overflow:hidden;

float:left;

margin-right:1px;

}

 

ul.menu a {

background:#fff;

text-decoration:none;

color:#fff;

padding-left:5px;

}

 

ul.menu li.list {

float:left;

width:250px;

margin:-32767px -125px 0px 0px;

background:url(images/top1.png) no-repeat left bottom;

}

 

ul.menu li.list a.category {

position:relative;

z-index:50;

display:block;

float:left;

width:120px;

margin-top:32767px;

background:transparent;

}

 

ul.menu li.list a.category:hover,

ul.menu li.list a.category:focus,

ul.menu li.list a.category:active {

margin-right:1px;

background-image:url(images/tophover1.png);

background-repeat:no-repeat;

background-position:left top;

 

}

 

ul.submenu {

float:left;

padding:25px 0px 0px 0px;

margin:0;

list-style:none;

background-image:url(images/tophover1.png);

background-repeat:no-repeat;

background-position:left top;

margin:-25px 0px 0px 0px;

}

 

ul.submenu li a {

float:left;

width:120px;

background:#1171B5;

clear:left;

color:#fff;

}

 

ul.submenu li a.endlist {

background:url(images/bottom1.png);

}

 

ul.submenu li a.endlist:hover,

ul.submenu li a.endlist:focus,

ul.submenu li a.endlist:active {

background:url(images/bottomhover1.png);

}

 

ul.submenu a:hover,

ul.submenu a:focus,

ul.submenu a:active {

background:#900;

margin-right:1px;

color:#fff;

}

.style1 {

font-family: Calibri;

font-weight: bold;

}

.style2 {font-family: Calibri}

.style4 { font-family: "Lucida Sans Unicode";

font-size: 18px;

color: #1171B5;

font-weight: bold;

}

.style5 { font-size: 14px;

color: #000;

font-family: Calibri;

}

#apDiv6 {

position:absolute;

width:563px;

height:215px;

z-index:1;

left: 120px;

top: 272px;

}

.style6 {font-family: Arial, Helvetica, sans-serif}

.style7 {

font-size: 12px;

font-weight: bold;

}

</style>

</head>

 

<body>

<div class="wrapper">

 

<div class="mainmenu">

 

<ul class="menu">

<li class="list"><a href="index.html" class="category style1">Home</a></li>

</ul>

<ul class="menu">

<li class="list">

<a class="category" href="#"><span class="style1">A Born  »</span></a>

<ul class="submenu">

<li><a href="dif.html" class="style1">Diferencial</a></li>

<li class="style1"><a href="est.html">Estrutura</a></li>

</ul>

</li>

</ul>

<ul class="menu">

<li class="list">

<a class="category" href="#"><span class="style1">Serviços  »</span></a>

<ul class="submenu">

<li><a href="proj.html" class="style1">Projetos</a></li>

<li class="style1"><a href="seg.html">Segurança</a></li>

<li class="style1"><a href="cone.html">Conectividade</a></li>

<li class="style1"><a href="aud.html">Áudio e Vídeo</a></li>

</ul>

</li>

</ul>

<ul class="menu">

<li class="list">

<a href="#" class="category style2"><strong>Clientes  »</strong></a>

<ul class="submenu">

<li><a href="#" class="style1">Shopping</a></li>

<li class="style2"><a href="#"><strong>Outros Clientes</strong></a></li>

</ul>

</li>

</ul>

<ul class="menu">

<li class="list">

<a href="ima.html" class="category style2"><strong>Imagens</strong></a>

</ul>

<ul class="menu">

<li class="list"><a href="cont.html" class="category style2"><strong>Contato</strong></a></li>

</ul>

</div>

</div>

 

 

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p align="center"> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div id="apDiv6">

 

<table width="563" height="255" border="0">

<tr>

<td height="24"><p align="center" class="style4">HISTÓRIA</p></td>

</tr>

<tr>

<td height="225" class="style5"><p align="justify" class="style6">Nossa história é marcada por uma trajetória continua de sucesso e crescimento diferenciado, adotando sempre a melhor solução em tecnologia nos diversos ramos e segmentos de mercado, onde a qualidade final é essencialmente um compromisso, visando alcançar a total satisfação de seus clientes. </p>

<p align="center"> </p>

<p align="center"> </p>

<p align="center"> </p>

<p align="center"><img src="images/Figura2.png" alt="" width="100" height="22" /></p>

<p align="center" class="style6 style7">Copyright 2010 - Born Tecnlogia - Rua Willian Both, 2608 Loja 4 - Curitiba - PR</p></td>

</tr>

</table>

<p class="style5"> </p>

</div>

<p> </p>

</table>

</tr>

</td>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Elektra    102

Elektra
Postado

Exemplo para visualização:Clique aqui

Tutorial 1: http://www.toprated.com.br/css-centralizando-conteudo-verticalmente

 

 

Mesmo conteúdo por outro autor (publicidade sobreposta dificultando a visualização atualmente):

Tutorial 2: http://www.plugmasters.com.br/sys/materias/600/1/Centralizar-a-Pagina-na-horizontal-e-vertical

 

 

Já publiquei estes links algumas vezes para outros colegas do fórum.

 

Uso este CSS também para centralização de páginas swf.

 

 

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito