[Resolvido] Como faço para posicionar um site com estilo css no m

[danibol 0]

como faço para posicionar meu site usando codigos css no meio da pagina?

[Thiago Retondar 18]

danibol,

 

crie uma div:

 

<div id="box">
Texto
</div>

depois aplique esse CSS que eu fiz:

 

*{
	margin: 0;
	padding: 0;
}

#box {
	width: 500px;
	height: 500px;
	background-color: #0CF;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -250px;
}

Explicando:

 

*{ margin: 0; padding: 0; } http://forum.imasters.com.br/public/style_emoticons/default/seta.gif zera todas as margens e padding;

 

width: 500px;

height: 500px;

background-color: #0CF; http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Define uma largura (width) e uma altura (height) de 500px com a cor de fundo #0CF;

 

position: absolute;

top: 50%;

left: 50%;

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif O truque está no position: absolute, ou seja, ele vai posicionar o elemento a 50% de distância do topo e da esquerda;

 

margin: -250px 0 0 -250px http://forum.imasters.com.br/public/style_emoticons/default/seta.gif O broswers centralizam os elementos a partir dos cantos. Para resolver isso, basta colocar uma margem negativa referente a altura e largura.

 

Abraços e boas festas.

[Carlos Designer 0]

como faço para posicionar meu site usando codigos css no meio da pagina?

Se você se refere apenas a deixar o site posicionado no centro use algo como:

 

<div id="container'>
...conteudo do site...
</div>

 

#container{
width:760px; /*largura da sua página*/
margin:0 auto 0 auto; /*centraliza o conteudo*/
}

lembrando que o Internet Explorer 5 não suporta margin:0 auto 0 auto caso você precise fazer um site compativel com ele use:

 

body{
text-align:center;
}

#container{
text-align:left;
width:760px; /*largura da sua página*/
margin:0 auto 0 auto; /*centraliza o conteudo*/
}

[Thiago Retondar 18]

Carlos,

 

não entendi o porque de dois 0 auto. http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

 

Abraços.

[Carlos Designer 0]

Carlos,

 

não entendi o porque de dois 0 auto. http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

 

Abraços.

então Thiago Retondar, eu apenas usei a sintaxe completa atribuindo auto para margen esquerda e direita:

 

margin:0 auto 0 auto;

poderia ter usado a resumida, tanto faz:

 

margin:0 auto;

[Thiago Retondar 18]

Ahhhh. Entendi. http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

 

Valeu.

[danibol 0]

Vlw, muito obrigado, ajudou bastante.

 

Um abraço.