Ir para conteúdo

POWERED BY:

Arquivado

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

jrotta

[Resolvido] Centralizar Página

Por , em Desenvolvimento frontend

Recommended Posts

RafaelNMNM    0

RafaelNMNM
Postado

Então para a DIV "wrapper" coloque o CSS assim para centralizar na vertical horizontal:

#wrapper {
	width: 760px;
	margin: 0 auto;
}

E depois coloque as propriedades que deseja dentro do #warepper.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrotta    0

jrotta
Postado

Sem resultados =S

e o margin funciona no ie?

#wrapper
{
	width: 760px;
	margin: 0 auto;
	border-left: 3px solid #CEA663;
	border-right: 3px solid #CEA663;
	padding: 0px 0px 0px 0px;
	height: 100%;
	background: url("../images/pin.jpg");
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Narciso    3

Anderson Narciso
Postado

Brother se você já está utlizando o Doctype atualziado que foi passado não tem segredo, acabei de fazer um teste e funciona igual no IE e no FF

 

<!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" lang="en" xml:lang="en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Teste de posicionamento de div no centro!</title>
</head>
  
<style>

body {background: #000;}

#container { width:760x; height: 100%; margin:0 auto; background: red;}

#container #wrapper {width:760px; height: 500px; background: green; margin:0 auto;}

</style>
  
<body>
 
 
<div id="container">
 
    
    
<div id="wrapper"></div><!-- /wrapper -->
 
 
 
</div> <!-- /container -->
  
</body>
 
</html>

Coloquei cor e um tamanho na wapprer e na container apenas para saber onde estão no background preto.

Se era uma div centralizada, para depois arrumar as bordas, está ai mais ou menos o que você queria. (eu acho)

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrotta    0

jrotta
Postado

Ehtnies, seu código está funcionando certinho, mt obrigado.

Só um problema. Quando eu coloco o height: 100%; no wrapper, não funciona =S (lembre-se que quero que a parte verde seja sempre 100% vertical)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Aí é outra história.. veja:

http://imasters.com.br/artigo/9065/css/posicionar_o_rodape_embaixo_da_janela/

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrotta    0

jrotta
Postado

usar min-height? n funciona!

ahh to gastando muito tempo numa coisa simples como centralizar a página, alguem pode concertar o código pra mim?

só quero que a página tenha height 100%!

 

<!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" lang="en" xml:lang="en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Teste de posicionamento de div no centro!</title>
</head>
  
<style>

body {
	margin: 0em auto;
	padding: 0em;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 0.8em;
	background: url("../images/dot.jpg") center top repeat-x #FFFFFF;
}


#container {
width:760x;
min-height: 100%;
margin:0 auto;
background: red;
}

#wrapper {
width:760px;
min-height: 100%;
border-left: 3px solid #CEA663;
border-right: 3px solid #CEA663;
background-color: #FAF0E4;
margin:0 auto;
}

</style>
  
<body>
 
 
<div id="container">
<div id="wrapper">
sdfsdfsdfsdfsdf


</div>
</div>
  
</body>
 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Narciso    3

Anderson Narciso
Postado

Hhuahua brother ninguém vai fazer para você, a gente te ajuda a aprender a fazer, para depois não passar por isso novamente, não é por sacanagem mas sim por você aprender. O link que o Bruno passou mostra certinho, o problema e como resolver, é muito simples, dê uma conferida.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Se ainda não conseguir resolver o problema com o link que o Bruno passou, poste um link para a sua página para que possamos ajudar mais rápido, mas creio que isso não seja nessário.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrotta    0

jrotta
Postado

eheh, Ehtnies, entendo oq você quer fazer mas é que prometi atualizar o site domingo, e jah perdi 1 dia nessa parte =S

eu jah tentei com esse código que tem no site que o cara postou, mas n tá dando certo com 2 divs. Arruma meu exemplo ajuda seu irmão aqui =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

será que agora deixam eu brincar com meu maldito HTML com background e BODY com position absolute???

acredito que a maioria que pitacou aqui testou e viu que o lay não alcança o fim da página...

 

podemos enxer a marcação com centenas de divs apenas pra fazer uma simples página chegar ao fim, ou simplesmente mexer em duas propriedades que PODEM SER ALTERADAS POIS ELAS EXISTEM de elemenos que não estamos acostumados a ver alterados por aí ¬¬

 

O cara me apresenta uma marcação com duas tag <html> e uma </head/> e vcs querem enfiar XHTML ESTRITO guela abaixo do coitado...

 

 

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Titulo</title>
    <link rel="stylesheet" type="text/css" media="all" href="estilos.css">
  </head>

  <body>
    <p>meu texto alinhado à esquerda de uma página com largura ABSOLUTA centralizada</p>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
}

html {
  background: url(dot.jpg) top repeat-x;
}

body {
  background: #FAF0E4;
  border-left: 3px solid #CEA663;
  border-right: 3px solid #CEA663;
  bottom: 0;
  left: 50%;
  margin-left: -380px;
  overflow: visible;
  position: absolute;
  width: 760px;
}

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Não é "enfiar guela abaixo", a questão é que esse fórum é de Webstandards, por isso nossa insistência por utilizar um Doctype, utilizar códigos semanticamente corretos, essas coisas. Sabemos que muitas soluções ditas como "válidas" são um verdadeiro pé-no-*, mas enquanto essas coisas caminham lentamente, vamos nos virando com o que tem.

 

Se não for dessa forma, o ciclo nunca terá fim: devido a prazos cada vez mais curtos e as dificuldades enfrentadas por aqueles que ainda não se familiarizaram com os padrões web, os desenvolvedores nunca terão tempo para se atualizar e acabarão sempre fazendo da maneira imprópria (errado não é porque visualmente funciona, mas todos sabem que um site vai muito além do visual).

 

Um exemplo clássico que ilustra bem isso tudo: centralização vertical. Todos sabem que o CSS não oferece recursos para centralizar o conteúdo verticalmente como acontece com uma tabela, mas sabemos que existem soluções para isso e que muitas vezes são um tanto quanto dificultosas se comparadas com o conhecido valign. Entretanto, se o cara não está com tempo de verdade e não pode atrasar a entrega por causa disso, meu, vai lá e usa uma tabela! Fazer o quê? A única coisa que se recomendaria é estudar com calma uma solução mais "correta" e depois faz a alteração...

 

Portanto, reforço a questão que iniciei esse post, só estamos fazendo valer o nome do fórum... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

jrotta    0

jrotta
Postado

Evandro Oliveira, sua solução n funciona no internet explorer =S

eu to largando de mão aqui, achei que fosse simples fazer isso por css e tentei aprender, mas tava enganado. VLw ai por todos que ajudaram!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Meu caro jrotta, você não estava enganado. É como eu disse no post anterior, muitas soluções que eram extremamente simples com as tabelas não são tão fáceis de se obter com o CSS (infelizmente), e é justamente essa dificuldade que acaba fazendo com que a maioria dos desenvolvedores abandonem as boas práticas de desenvolvimento. Mas quando se aprende a desenvolver da maneira correta, verá que é muito fácil, o controle do layout fica sob sua responsabilidade, e não do(s) browser(s).

 

Vamos lá, mais uma vez, não desista... Veja esse exemplo que montei com base no tutorial indicado pelo William:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Altura 100%</title>
	<style type="text/css" media="all">
	html, body { height:100%; }
	body {
		text-align:center;
		color:#333;
		margin:0; 
		padding:0;
		background-color:#ddd;
	}
	div#tudo {
		position:relative;
		width:760px;
		min-height:100%;
		text-align:left;
		margin:0 auto;
		background-color:#faf0e4;
		border-right:3px solid #cea663;
		border-left:3px solid #cea663;
	}
	* html div#tudo { height: 100%; }
	div#conteudo { padding-bottom:30px; }
	
	div#topo {
		width:760px;
		height:100px;
		text-align:center;
		background-color:#f3f3f3;
		border-bottom:1px dotted #cea663;
	}
	div#principal {
		float:left;
		width:510px;
		padding:10px 0 0 20px;
	}
	div#auxiliar {
		width:200px;
		float:right;
		padding-top:10px;
	}
	
	div#rodape {
		position:absolute;
		bottom:0;
		width:760px;
		height:20px;
		text-align:center;
		background-color:#cea663;
	}
	div#rodape p {
		margin:0;
		color:#fff;
	}
	div.clear {
		width:100%;
		height:0;
		overflow:hidden;
		clear:both;
	}
	</style>
</head>
<body>
	<div id="tudo">
		<div id="topo">Topo</div>
		<div id="conteudo">
			<div id="principal">
				<p>Coluna principal</p>
			</div>
			<div id="auxiliar">
				<p>Coluna auxiliar</p>
			</div>
			<div class="clear"></div>
		</div>
		<div id="rodape">Rodapé</div>
	</div>
</body>
</html>
Agora é só colocar o seu conteúdo e formatar as áreas do layout...

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.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