Ir para conteúdo

POWERED BY:

Arquivado

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

danielvlopes

Alinhar layout verticalmente

Por , em Desenvolvimento frontend

Recommended Posts

danielvlopes    0

danielvlopes
Postado

Olá, quero centralizar meu layout vertical e horizontalmente na tela usando um div.

 

Abaixo está o código que estou usando, mas só consigo alinhar horizontalmente, se alguem puder me ajudar ficarei muito grato:

 

body{	margin: 0;	padding: 0;	font-family: Verdana;	font-size: 9pt;	background-color: #462562;		}#container{	background-color:#462562;	height:420px;	margin:0 auto;	width:760px;}#header{	width: 100%;	}#conteudo{	float: left;	width: 100%;	background-color:#c0c2c4;}#footer{	width: 100%;		text-align:left;	background-color:#c0c2c4;	}

HTML:

 

<!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=iso-8859-1" /><title>StageSound - Home</title><link rel="stylesheet" href="templates/sshome.css"></head><body><div id="container">	<div id="header"><img src="images/home/menu_01.jpg" alt="menu" border="0" /></div>	<div id="conteudo"><img src="images/home/home_fundo.jpg" alt="home"/></div>		 <div id="footer" class="copyright" >© copyright Stagesound Academy</div></div>	</body></html></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Santiago    0

Santiago
Postado

Tenta isso aqui:

 

#container	/*configura a div container e posiciona no meio da tela*/{	position: absolute;	width: 750px;	height: 420px;	top:50%;	left:50%;	padding: 0px;	margin-top: -210px; /*Aqui você coloca a metade da altura do container*/	margin-left: -325px; /* aqui você coloca metade da largura do container */}

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Parece que me expressei mal... Não quero que o div fique uma caixinha no centro da tela, quero o contrário, que ele fica horizontalmente alinhado como está e a altura dele se adapte ao navegador todo. Já procurei muito e não achei nada.

 

Imagem Postada

 

Estou tentando desta forma:

 

body{	margin: 0;	padding: 0;	font-family: Verdana;	font-size: 9pt;	background-color: #46166b;		}#container{	background-color:#cccccc;	margin:0 auto;	width:760px;	position:relative;}#header{	width: 100%;	}#conteudo{	float: left;	width: 100%;	background-color:#cccccc;}#footer{	text-align:left;	background-color:#cccccc;		clear: both;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Não resolve, fiz uma pergunta tentando resolver o problema com CSS não javascript e o exemplo do site que você passou não funciona. Gostaria que alguem respondese a minha dúvida, obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Daniel,Como diz meu grande amigo Hunter:

os browsers (todos) não interpretam bem altura em %

Conforme o link que passei, com JS ou....table ;) []´s

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