5 respostas neste tópico

[alex_azuos]

Pessoal,

Venho apanhando a alguns dias para fazer layout com divs, o que eu desejo é fazer algo bem simples, um layout com 5 divs, ( topo , esquerdo, conteudo, direito e rodape ), ate fiz e ta enganando mas o problema é que quando eu vejo o que eu fiz em diferentes resoluçoes de tela ele me mostra um layout diferente tb, por exemplo corta pedaço de texto ou imagem, tem como eu corrigir isso ?

Desde de já agradeço

Alex

[deregudegu]

Atualmente o padrão web é para a resolução 1024x728, tudo diferente disso pode sofrer distorções. Alguma dicas são: sempre definir a largura, não definir a altura (deixar a altura fluida) e criar um bloco com uma largura fixa, centraliza-lo e colocar todo o conteúdo dentro do mesmo.
Seguindo essas dicas, acho que você terá o que precisa.

[alex_azuos]

OLha...

Ja vi varias solucoes na net mas nao funcionam... o que eu quero fazer o esquedo, conteudo e direito fiquem na sequencia... usando o position absolute om top e left eu resolvo mas nao fica bom... eu queria fazer o direito flutuar a direto, o conteudo flutuar no meio e o esquerdo flutuar a esquerda tudo isso logo abaixo do topo , o meu direito e esquerdo nao tem nada neles pore com o tempo eu vou por... mas eu ja vi o site que eu fiz de varios computadores e tipo de monitores e cada um mostra de um jeito... bom mesmo so fica quando eu uso do meu notebook.. vou posta meu css pra ver se alguem ve o que acontece:

#Topo
{
position:absolute;
top:0px;
left:0px;
width: 100%;
height:200px;
background-image: url('../Imagens/design/plano_de_fundo.gif');

}
#Conteudo
{
position:absolute;
top:200px;
width:60%;
margin-left:16%;
height:730px;
/*background-image: url("../Imagens/design/plano_de_fundo.gif");*/
-moz-border-radius: 5px;



}

#Esquerda
{
position:absolute ;
top:200px;
left:0px;
width:16%;
height:730px;
background-color:#F3F3F3;

/*background-image: url("../Imagens/design/plano_de_fundo.gif");*/

}
#Direita
{
position: absolute;
top:200px;
right:0px;
width:12%;
height:730px;
background-color:#F3F3F3;

/*background-image: url("../Imagens/design/plano_de_fundo.gif");*/

}



#Rodape
{
background: -moz-linear-gradient(bottom , #B5B5B5, #F3F3F3) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#B5B5B5)) repeat-X;
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr='#000000');
position: absolute;
left:0px;
width: 100%;
top: 930px;
height:auto;
bottom:0px;
border:solid;
border-bottom:none;
border-right:none;
border-left:none;
border-width:1px;
border-top-color:#CDC5BF;
text-align:center;


}


Se alguem sobre de alguma dica eu agradeço

[deregudegu]

Bom, para que você quer usar o position? Crie uma div coloque ela com a largura que você quer que o site tenha, depois você coloca as outras divs dentro e informe as larguras para cada uma, depois coloque float:left que elas ficaram na ordem que você informou no HTML.

Espero ter ajudado.

[alex_azuos]

Cara, ja tentei isso que vc falou tambem mas olha o que acontece... ele so mostra a div conteudo ( a do meio ) e nao mostra as lateriais... talvez nao tenha comentato pas estou usando o visual studio 2008.... nao sei se tem alguma coisa a ver ... mas nao vai nem ferrando ...

Mais alguma dica ?


Alex

[deregudegu]

Entre em contato comigo via MP para que possamos trocar contatos mais rápido.