Posicionamento de DIV´S

archanghell · Novembro 26, 2010

Oi galera td bem??

Sou iniciante em CSS e estou tendo um problema com o posicionamento de divs em diferentes resoluções.

Criei um layout ajustado para 800x600.Centralizei as divs do cabeçalho, conteúdo e rodapé. Quando mudo a resolução, fica certinho, tudo centralizado.

Mas quando criei uma outra div( a div home ) para fazer os botões, ela saí de lugar quando mudo a resolução.

Estou postando o código abaixo para vocês poderem ver diretinho o que acontece. Se alguém puder me ajudar ficarei muito agradecido mesmo. Estou a quase dois dias quebrando a cabeça tentando arrumar isso. já tentei muitas sugestões em tutoriais mas nada funcionou. Tentei mudar de position para float, mexer em margin-left e margin-top, mas não adiantou. Desde já obrigado e aguardo uma resposta.

<!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">

body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image:url(fundo.png); 
}
#barra{
position:absolute;
top:20px;
left:50%;
width:693px;
height:154px;
margin-left:-346px;
}
#conteudo{
position:absolute;
top:190px;
left:50%;
width:693px;
height:570px;
margin-left:-346px;
}
#rodape{
position:absolute;
top:800px;
left:50%;
width:693px;
height:36px;
margin-left:-346px;
}
#home{
position:absolute;
margin-top:202px;
width:105px;
height:20px;
margin-left:39%;
}
.format_menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

</style>
</head>

<body>
<div id="barra"><img src="barra.png" width="693" height="154" /></div>
<div id="conteudo"><img src="conteudo.png" width="693" height="600" /></div>
<div id="rodape"><img src="rodapé.png" width="693" height="35" /></div>
<div class="format_menu" id="home">Home</div>
</body>
</html>

Editado Novembro 26, 2010 por _Vinny_
Adicioner tag [code]

_Vinny_ · Novembro 26, 2010

Somente o código sem conteúdo nas divs não dá para perceber quase nada.

Você poderia postar um print de ambas as resoluções?

Outra coisa, a centralização da sua página não esta muito boa na minha opinião. Veja esse artigo Centralizar uma página na tela e tente fazer esse tipo de centralização que se encaixa em toda resolução.

Entrar

Posicionamento de DIV´S

Pergunta

archanghell

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

_Vinny_

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades