Ir para conteúdo

POWERED BY:

Arquivado

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

Celinho

[Resolvido] Site 100% não centraliza

Por , em Desenvolvimento frontend

Recommended Posts

Celinho    0

Celinho
Postado

Não estou conseguindo centralizar o site, se eu uso o width:100%... Ainda ta só o esqueleto, a estrutura e tals mas ja quero aplicar os efeitos minimos no css.. Quero que o site tenha um total de 100% na tela só que o conteúdo vai ficar dentro de 960px mas não consigo centralizar os 960px se to usando o width:100% =/

 

/*RESET*/
*{margin:0; padding:0;}
body{margin:0; padding:0; width:100%;}
/*TOPO*/
#topo{height:690px; background:#000;}
/*CONTEUDO*/
#conteudo{height:460px; background:#FFF; }

 

daí se eu coloco width:960px em algum lugar o 100% desaparece e fica só em 960px com o fundo em branco

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

O body já é 100% por padrão. Você quer que a largura seja 960? Então é o width e não o height, como você definiu no id topo para centralizar o site, use o margin:0 auto;

 

/*RESET*/
*{margin:0; padding:0;}
body{margin:0; padding:0; }
/*TOPO*/
#topo{width:690px; margin:0 auto; background:#000;}
/*CONTEUDO*/
#conteudo{height:460px; background:#FFF; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Celinho    0

Celinho
Postado

É na verdade o height la era a altura que vai ter o topo, porque dentro dele vai ter logo/menu/slide/3 artigos pequenos... eu quero fazer tipo aqui no forum, onde o menu e o rodape vão até o fim da tela e o conteúdo fica todo centralizado.. daí meio que não importa a resolução do monitor sempre vai dar certo praticamente(ounão)

 

colocando do jeito que você mostrou Allex, ele fica só com os 960px na tela, não vai até o final igual o rodapé aqui do forum por exemplo

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafael-tdc    13

rafael-tdc
Postado

 

 

<!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>Documento sem título</title>
<style type="text/css">
body{
	margin:0px;
	padding:0px;	
}
#geral{
	background:#FF0;
	height:500px;
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

#banner{
	width:100%;
	height:55px;
	background:#0F9;	
}
#menu{
	width:100%;
	height:30px;
	background:#F00;	
}

#footer{
	width:100%;
	height:50px;
	background:#C09;	
}

</style>
</head>

<body>

<div id="banner">
banner
</div>
<div id="menu">
menu
</div>
<div id="geral">
conteudo
</div>
<div id="footer">
footer
</div>
</body>
</html>

 

 

 

Pra centralizar o conteúdo do banner/menu/footer, você faz do melhor jeito que você achar aí, com o que eu passei já da para entender a estrutura né? ^^

 

Qualquer coisa só pergunta ae :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Então você tem que colocar uma div dentro da outra, tipo assim:

 

<div id="topo">
   <div id="conteudo_topo">

   </div><!-- conteudo_topo -->
</div><!-- topo -->

 

E o css:

 

#topo { width:100% background:#000; float:left; }
#conteudo_topo { width:960px; margin:0 auto; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado 

#conteudo{width: 960px; float: left; position: relative; left: 50%; margin-left: -480px;}

Tenta esse código que vai centralizar, qualquer coisa posta ai!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

se o problema é com a altura, então leia:

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Celinho    0

Celinho
Postado

Opaa obrigado Rafael deu certo aqui xD.. consegui centralizar tudo certinho dando uma baseada no que você falou aew hehe.. muito obrigado o/

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