Ir para conteúdo

POWERED BY:

Arquivado

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

alexis

como centralizar uma div

Por , em Desenvolvimento frontend

Recommended Posts

alexis    0

alexis
Postado

Ola pessoal estou com um problema ?

 

é o seguinte

 

meu cliente pedio para criar uma pagina parecida com essa desse site Clique aqui

eu queria saber como faço para fazer a pagina de conteudo ficar na mesma posição desse site

 

eu criei as divs e todo posicionamento gostaria de saber onde está meu erro

 

aqui esta meu codigo

 

<style type="text/css">
body{
margin:0;
padding:0;
text-align:center;
}
#pagina{
width:100%;
margin:0 auto;
text-align:left;
}
#topo{
height:90px;
background:#000;
}
#conteudo{
width:368px;
height:768px;
float:right;
position:relative;
left:50px;
margin-left:-30%;
background:#0CC;
}
#navegacao{
width:180px;
height:768px;
float:left;
background:#999;
}
#rodape{
clear:both;
height:50px;
background:#06F;
}
</style>
</head>

<body>
<div id="pagina">
<div id="topo">
</div>
<div id="conteudo">
</div>
<div id="navegacao"></div>
<div id="rodape"></div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Você quer centralizar a #pagina?

Usando o código que você postou defina uma largura, 100% ocupa toda a área do navegador :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexis    0

alexis
Postado

Você quer centralizar a #pagina?

Usando o código que você postou defina uma largura, 100% ocupa toda a área do navegador :)

não o conteudo

euquero que o topo e o radapé pegue a pagina toda

 

e o conteudo centralize na pagina

 

igual está nesse site

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Olá, cara se tu quer alinhar o conteudo e a navegação, o ideal é q você crie um container central alinhando todos os elementos de dentro. Ex.:

 

<div id="pagina">
<div id="topo">
</div>
<div id="middle">
 <div id="navegacao"></div>
 <div id="conteudo"></div>
</div>
<div id="rodape"></div>
</div>

 

CSS

<style type="text/css">
body{
       text-align:center;
       margin:0;
       padding:0;

}
#pagina{
       text-align:left;
       width:100%;
       margin:0 auto;
}
#topo{
       background:black;
       height:90px;
}
#middle {  
       width:980px;
       margin:0 auto; 
       overflow:hidden;
} 
#conteudo{
       background:blue;
       width:81%;
       height:768px;
float:left;
}
#navegacao{
       background:red;
       width:180px;
       height:768px;
       float:left;
}
#rodape{
       background:yellow;
       height:50px;
       clear:both;
}

</style>

 

Seria mais ou menos assim, você terá de ajustar o tamanho de acordo a grid no qual você irá trabalhar.

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