Ir para conteúdo

POWERED BY:

Arquivado

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

ricoandrade

[Resolvido] Não to sabendo centralizar minha página :(

Por , em Desenvolvimento frontend

Recommended Posts

Thiago Retondar    18

Thiago Retondar
Postado

Crie uma DIV que acomode todos os elementos da página, exemplo:

 

#divgeral {margin:0 auto; width:750px;  padding:0; margin:0;}

margin:0 auto; - Centraliza horizontalmente.

 

Agora, para centralizar verticalmente, ou crie um tabela e englobe todo o conteúdo e adiciona valign="center" dentro da mesma (não esqueça de inserir o conteúdo dentro de uma célula), ou... utilize JavaScript :D

 

Ou faça assim:

 

div#geral{
position: relative;
top: 50%;
left:50%;
width: 800px;
height: 600px;
margin: -400px 0 0 -300px; /* Metade da altura e largura */
}

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricoandrade    0

ricoandrade
Postado

Acho q to errando no html v o que eu fiz depois de alterar o index a coisa toda sumiu ai refiz.

 

INDEX ANTES DA ALTERAÇÃO:

 

<!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" />
<title>salgados</title>
<LINK REL="STYLESHEET" HREF="docesstilos1.css"
TYPE="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>

<div id="logo"></div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="lateralesq"></div>
<div id="lateraldir"></div>
<div id="home">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','height','250','src','meiodocssexterno2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','meiodocssexterno2' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="250">
    <param name="movie" value="meiodocssexterno2.swf" />
    <param name="quality" value="high" />
    <embed src="meiodocssexterno2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="250"></embed>
  </object>
</noscript></div>

</body>

</html>

INDEX DEPOIS DA ALTERAÇÃO:

 

<!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" />
<title>salgados</title>
<LINK REL="STYLESHEET" HREF="docesstilos1.css"
TYPE="text/css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>

<div id="geral">

<div id="logo"></div>
<div id="menu1"></div>
<div id="menu2"></div>
<div id="menu3"></div>
<div id="menu4"></div>
<div id="menu5"></div>
<div id="lateralesq"></div>
<div id="lateraldir"></div>
<div id="home">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','height','250','src','meiodocssexterno2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','meiodocssexterno2' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="250">
    <param name="movie" value="meiodocssexterno2.swf" />
    <param name="quality" value="high" />
    <embed src="meiodocssexterno2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="250"></embed>
  </object>
</noscript></div>

</div>

</body>

</html>

Não to sabendo englobar o conteudo dentro dessa div geral, outra coisa no css os elementos continuam (position:absolute;)? Desculpem a minha nubesa http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Está certo. Posta aí o link atualizado com este HTML.

 

Sempre que estiver em dúvidas se está certo o jeito que escreveu, se não esqueceu de fechar tags, etc. valide o documento.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricoandrade    0

ricoandrade
Postado

Está certo. Posta aí o link atualizado com este HTML.

 

Sempre que estiver em dúvidas se está certo o jeito que escreveu, se não esqueceu de fechar tags, etc. valide o documento.

 

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

 

Acrescentei o novo elemento no css tipo copiei e colei pra não ter chance de erro e alterei o index do jeito que postei ai:

 

http://ricotestes.x10hosting.com/

 

aqui me apareceu tudo branco sumiram as camadas, esperava que fosse dar certo onde sera q ta o erro sera que é o meu fire fox, não reconheceu esses comandos, ta tudo branco ai tb?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricoandrade    0

ricoandrade
Postado

Ops! Este link parece estar corrompido.

 

Não consigo acessar o link.

 

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

 

Que bom vcs são feras do css, as dicas foram quentíssimas :D

Foi o seguinte na ultima respota minha aconteceu o que chamamos no Flash de elementos fora do palco, nem imaginava que um navegador poderia ter tal característica :D, tipo quando lancei por engano no margin os dados do lado direito na margem esquerda e vice e versa todos os elementos em HTML saíram de uma vez pra fora da área visível do navegador, por isso que a tela tava toda branca, ai depois de vários erros e acertos cheguei num margin correto, e aproveito pra fazer uma outra pergunta:

 

Pergunto se existe um modo no css de centralizar essa div para qualquer resolução do leitor, neste modo o cara só pode escolher uma e escolhi a de 1024/768?

 

Segue abaixo a nova geral com explicações e uma espécie de paço a paço de como consegui com a ajuda dos amigos :D 

#geral{
	position: relative;
	/* top: 0;	*/
	/* left:10.73%;	*/	
	/*right:-10.73%;*/	
	width: 100%;			 
	margin:0px -102.5px 0px 102.5px;

/* Adotei 955px para calculos  que é  a resolução para 1024/768 
955-750=205 (750 largura  do  meus site, 205 é a  diferença  da
largura do site menos a resolução  adotada), 205/2=102.5 -> foi 
dividido  por  dois  para  que  cada lado fique com a metade da
sobra, pela  regra de três  102.5 é  10.73% de 955, onde 10.73%
é o desejado no meu caso para cada margem,(width: 100%) abrange
a área total visivel do navegador,  (margin:)  Primeiro valor é
top, segundo é rigth, terceiro é bottom e quarto é left.*/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não entendi melhor sua última dúvida.

 

Me responde uma coisa, a sua div#geral vai estar com width: 100% ou width: 955px.

 

Se for 955px, é só colocar margin: 0 auto que já te centraliza.

 

Ou você quer centralizar verticalmente, também?

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricoandrade    0

ricoandrade
Postado

-deleta-

Querido moderador peço-te, que seja editado meu ultimo post, esse que eu perguntei se era possível centralizar de maneira automática para qualquer resolução do leitor, eu não havia entendido o que os colegas haviam dito achei que eu tinha que escolher a resolução da maioria dos leitores do site, com isso, cometi a Kaka :D de trabalhar num único tipo de navegador o IE6, ou seja, o passo a passo ali que escrevi para mim mesmo é funcional apenas para o IE6 e ainda não atende 100% ao que eu queria, tipo ao diminuir a janela as margens ficavam desajustadas, ao confrontar no Firefox atualizado de outro PC percebi que esses dois navegadores se comportaram de maneira diferente, segue abaixo a correção que atende aos dois navegadores, te peço essa edição por motivo de algum leitor desavisado entenda o passo a passo como resolução e erre do mesmo jeito que errei:

-/deleta-

 

 

A div geral deveria ter o mesmo tamanho do site, os colegas haviam dito eu que na minha nubesa num entendi :D meu erro estava em dar um tamanho bem maior, 955px, então o correto é colocar o tamanho da div geral igual ao tamanho do site, assim ela vai poder ajustar suas margens automaticamente a qualquer resolução do leitor segue abaixo a nova #geral:

 

#geral{
	position: relative;
	width: 750px;		 
	margin:0px auto; 
}

Um material que muito me ajudou tb foi esse link aqui de Maujor um bom ecritor do assunto to começando a ler e gostei muito:

 

http://maujor.com/tutorial/margintut.php 

http://maujor.com/tutorial/margintut.php

Agradeço muitíssimo aos amigos que me deram uma grande força e tiveram uma forte paciência com o iniciante aqui :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricoandrade    0

ricoandrade
Postado

Que bom que conseguiu resolver o problema. =)

 

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

 

Te agradeço muito :D as fases são essas:

 

Antes de chegar aqui:

http://ricotestes.x10hosting.com/index1.htm

 

Durante:

http://ricotestes.x10hosting.com/index2.htm

 

e depois:

http://ricotestes.x10hosting.com/index3.htm

 

vlw moderador amigão olha não esquece de editar :D, se não der pra editar sem problema é com os erros que aprendemos http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

vlw moderador amigão

^_^

 

Os outros também ajudaram, merecem tantos créditos como qualquer um aqui do tópico. ;)

 

olha não esquece de editar

Eu posso editar e excluir aquela parte, mas não achei necessário. Se quiser que eu delete mesmo, só confirmar. =)

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito