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

[ricoandrade 0]

Boa noite pessoal.

Gente é o seguinte fiz uma estrutura em css, só que ao executar o índex vi que ele acomoda toda a página no canto superior esquerdo, só que eu queria q ele ficasse no meio da pagina e se adequasse ao tamanho da janela sei q tem como fazer usando tabelas só q to Amando essa experiência em css, e quero fazer tudo em css a partir de hoje :D

[Thiago Retondar 18]

Para centralizar, basta da margin: 0 auto, agora em qual eixo ele vai se ajustar ao browser? Se for na horizontal, não há necessidade de centralizar, certo?

 

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

[ricoandrade 0]

Para centralizar, basta da margin: 0 auto, agora em qual eixo ele vai se ajustar ao browser? Se for na horizontal, não há necessidade de centralizar, certo?

 

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

 

Eu pensei em colocar ele dentro de uma camada maior e centralizar essa grandona mas nem isso to sabendo fazer é que sou iniciante :D, me diz por favor onde eu errei:

#logo {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:100px;
	z-index:1;
}
#menu1 {
	position:absolute;
	left:0px;
	top:100px;
	width:150px;
	height:25px;
	z-index:2;
}
#menu2 {
	position:absolute;
	left:150px;
	top:100px;
	width:150px;
	height:25px;
	z-index:2;
}
#menu3 {
	position:absolute;
	left:300px;
	top:100px;
	width:150px;
	height:25px;
	z-index:2;
}
#menu4 {
	position:absolute;
	left:450px;
	top:100px;
	width:150px;
	height:25px;
	z-index:2;
}
#menu5 {
	position:absolute;
	left:600px;
	top:100px;
	width:150px;
	height:25px;
	z-index:2;
}
#lateralesq {
	position:absolute;
	left:0px;
	top:125px;
	width:150px;
	height:250px;
	z-index:3;
}
#lateraldir {
	position:absolute;
	left:600px;
	top:125px;
	width:150px;
	height:250px;
	z-index:3;
}
#home {
	position:absolute;
	left:150px;
	top:124px;
	width:450px;
	height:250px;
	z-index:7;
	overflow: hidden;
}
#mensagerro {
	position:absolute;
	left:150px;
	top:125px;
	width:450px;
	height:250px;
	z-index:5;
	visibility: hidden;
}
#mensagcert {
	position:absolute;
	left:150px;
	top:125px;
	width:450px;
	height:250px;
	z-index:4;
	visibility: hidden;
	overflow: hidden;
}
#contato {
	position:absolute;
	left:150px;
	top:125px;
	width:450px;
	height:250px;
	z-index:6;
	visibility: hidden;
}

[Aprendiz CSS 3]

esse código esta com cara de DREAMWEAVER http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

leia esse post http://aprendacss.wordpress.com/2008/07/08/position-absolute/

 

poste um link para o seu site

 

abraço

[brcontainer 16]

Não use position para alinhar

 

faça sites desta maneira:

http://forum.imasters.com.br/index.php?/topic/223799-layout-fixo-2-colunas-menu-vertical/

http://forum.imasters.com.br/index.php?/topic/222275-layout-fixo-3-colunas/

http://forum.imasters.com.br/index.php?/forum/180-laboratorio-de-scripts-ws/

http://forum.imasters.com.br/index.php?/forum/140-artigos-tutoriais-e-materias-webstandards/

http://forum.imasters.com.br/index.php?/topic/314618-relacao-de-todos-os-artigos/

 

Vendo todos estes links você aprenderá a maneira certa de estruturar.

[Thiago Retondar 18]

Eu pensei em colocar ele dentro de uma camada maior e centralizar essa grandona mas nem isso to sabendo fazer é que sou iniciante

Se você fizer isso, irá centralizar apenas a "camada" maior, o que estiver dentro não vai centralizar. ;)

 

Siga as dicas dos companheiros acima.

 

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

[ricoandrade 0]

esse código esta com cara de DREAMWEAVER http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

leia esse post http://aprendacss.wordpress.com/2008/07/08/position-absolute/

 

poste um link para o seu site

 

abraço

 

O site ta meio vazio ta com um flash, que foi o primeiro item que comecei a fazer ta ainda pra ser finalizado esse flash, mas pra resumir o vídeo em flash era pra ta no meio da página :D

 

http://ricotestes.x10hosting.com/

[Untill 0]

Bom, como foi citado anteriormente para isto bastaria criar uma tabela e definir o atributo auto para as margens da esquerda e direita, segue abaixo um breve exemplo da codificação;

 

CSS

#divflash{
     width:800px; /* tamanho da resolução minima do site neste caso 800x600, utilizei 800px. */
     margin:0px auto; /* atributo responsável por alinhar a tabela. */
}

HTML

<div id="divflash">
    <!-- Objeto Flash -->
</div>

[Fabio Jp 0]

Eu não coloquei coments nas linhas do CSS até mesmo pq nem eu

sei como funciona esse margin 0 auto..

Mas quem for editar meu post ja poderia fazer esse favor rsrsrs..

Essa é a base de todos os meus sites que tenho que centralizar a página toda..

Funciona no firefox e ie6 perfeitamente.. creio eu que no restante tambem..

 

 

 

 

pagina_centralizada.htm

 

--------------------------------------------------------

<!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>Untitled Document</title>
<style type="text/css">
/* defaut em tudo */
html, body, form, fieldset, p, a, ul, ol, li, div, legend, label,
br, input, button, textarea, h1, h2, h3, h4, h5, strong {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 11px;
	font-family: Verdana;
	vertical-align: baseline;
	color: #000;
	line-height: 1;
	text-align: left;
}
#tudo {width:776px; margin:0 auto; text-align:left;}
#conteudo {float:left;}
#teste {width:776px; background-color:#000; color:#fff; text-align:center; padding:50px 0 100px 0;}
</style>
</head>

<body>
<div id="tudo">
  <div id="conteudo">
    <div id="teste">
      Centralizado.<br />
      Eu geralmente uso float pra ir posicionando o site aqui dentro.
    </div>
  </div>
</div>
</body>
</html>

--------------------------------------------------------

 

 

 

É isso ae.. valew..

[Thiago Retondar 18]

até mesmo pq nem eu

sei como funciona esse margin 0 auto..

Vamos lá: margin: 0 auto é a mesma coisa que margin: 0 auto 0 auto, correto? E sabemos que o primeiro valor é top, segundo é left, terceiro é bottom e quarto é riht, certo? Se você colocar auto no left e right vai centralizar pois vai ser criar uma margem automática, ou seja o que sobra do elemento pai dividido por dois.

 

Entendeu?

 

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

[ricoandrade 0]

Bom, como foi citado anteriormente para isto bastaria criar uma tabela e definir o atributo auto para as margens da esquerda e direita, segue abaixo um breve exemplo da codificação;

 

CSS

#divflash{
     width:800px; /* tamanho da resolução minima do site neste caso 800x600, utilizei 800px. */
     margin:0px auto; /* atributo responsável por alinhar a tabela. */
}

HTML

<div id="divflash">
    <!-- Objeto Flash -->
</div>

Alem da camada do flash existem outras camadas uma ao lado da outra tipo o logo em cima + 4 ou 5 menus, abaixo do logo + o meio + um lado esquerdo e um lado direito.

 

mas deixa eu ver se entendi existe como criar uma tabela q englobe todas elas e alinhe tudo de uma só vez?

[ricoandrade 0]

Eu usei o Dreamweaver, por que achei que ficava mais fácil visualizar o desenho das camadas enquanto eu as desenhava, ai percebi que ele fazia o css na mesma página, tive que editar o código e jogar pra um css externo mas agora to vendo que a facilidade ficou mais pra dificil, achei que poderia usar o Dream, pra fazer um css mais elaborado e depois dava uma mexidinha básica e ia ficar tudo legal me arrependi http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Aprendiz CSS 3]

a unica vantagem que vejo no dreamweaver é o auto complete no código CSS.

 

mas sempre é bom testar, porque ele traz umas coisas proprietárias do IE e do FF

 

abraço

[ricoandrade 0]

Eu vou refazer o css, e a medida q as dúvidas vinherem vou postar aqui, agradeço desde já ajuda dos amigos :D

[Untill 0]

Com a codificação que te passei você pode desenvolver o site dentro da tabela que este ficará centralizado.

[Fabio Jp 0]

Ahhh agora entendi Thiago..

valewww.. rsrsrs..

É f*** ter q ficar tentando descobrir sozinho...

Mas do jeito que o Untill falou parece perfeito no caso do ricoandrade...

[ricoandrade 0]

Bom, como foi citado anteriormente para isto bastaria criar uma tabela e definir o atributo auto para as margens da esquerda e direita, segue abaixo um breve exemplo da codificação;

 

CSS

#divflash{
     width:800px; /* tamanho da resolução minima do site neste caso 800x600, utilizei 800px. */
     margin:0px auto; /* atributo responsável por alinhar a tabela. */
}

HTML

<div id="divflash">
    <!-- Objeto Flash -->
</div>

Mas eu botei o flash dentro de uma camada mas existem outras ao redor dele, o site não vai ser só em flash, ou é pra botar as outras divs dentro dessa grandona?

[Thiago Retondar 18]

Naquele link que você passou hospede a página inteira em que está trabalhando para que possamos entender melhor.

 

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

[ricoandrade 0]

Naquele link que você passou hospede a página inteira em que está trabalhando para que possamos entender melhor.

 

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

 

Eu coloquei cores nas camadas agora elas vão aparecer, não mudei mas nada só fiz colocar cores diferentes em cada camada agradeço mesmo a ajuda :D

 

http://ricotestes.x10hosting.com/

[Eliseu M. 2]

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