Posicionamento de DIV com CSS

[iabadu 0]

Olá amigos,

 

Estou com uma dúvida em relação a posicionar div's com css de modo que consiga fatiar a estrutura da página e organizar o seu layout montando tudo através de CSS.

 

Acontece que montei uma estrutura assim mas essas div's se movem de acordo com a resolução da página. Fiz a estrutura da página para resolução mínima de 1024 x 768 px, mas sei que pessoas com resolução 800 x 600 px ainda podem acessar essa página. Testando nessa resolução de 800x600 os objetos em DIV controlados seu posicionamento com as css acabaram se movemdo um pouco pra esquerda e pra baixo ficando fora do centro da página.

 

Exemplo de como trabalhei essa estrutura:

amostra da DIV no html da página:

<div class="div_infos_1"><img src="images/infos_1.gif" /> </div>

 

amostra do código css que controla o posicionamento dessa DIV:

.div_infos_1 {border:none; width:727px; height:217px; position:absolute; top:210px; right:90px;}

 

 

Bom... quero entender como organizar pra que o conteúdo da página fiquei sendo visualizado normalmente independente da resolução de vídeo do usuário.

 

Aguardo help dos amigos.

 

abraços,

 

Alan Douglas

[Giovani 104]

iabadu, poste o link com o que você já conseguiu fazer.

As duas linhas que você passou não ajudam muito.

 

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

[William Bruno 1501]

Não é indicado o uso de position absolute.

Estruture o layout com floats, margins, paddings.

 

O Absolute é somente para slices pequenos... esteja certo de verificar o container desse elemento. Pois esse position, retira o elemento do fluxo do documento, e o posiciona apartir de um ancestral com position explicitamente declarado(se não tiver nenhum, vai pegar apartir do body, por isso que está mudando de lugar, qndo você muda de resolução).

[iabadu 0]

Bom.... pra entender melhor. A estrutura dessa página estava trabalhando com "tables" ainda, de modo que a base da página é em tabelas e ai por cima vem esse conteúdo que estou pesquisando melhor pra atualizar os meus desenvolvimentos.

 

Fiz um teste aqui com uma resolução maior que 1024 x 768 e as imagens se movem para a direita da página e quando abro na resolução de 800 x 600 movem-se para a esquerda da página.

 

Em relação ao que você disse "Willian" [(se não tiver nenhum, vai pegar apartir do body, por isso que está mudando de lugar, qndo você muda de resolução).]

 

Há como configurar a css de modo que pegue então o position a partir do body da página pra não mudar de lugar de acordo com a resolução?

 

Bom... pra visualizarem melhor vai o link da página: >> Veja a página <<

 

 

Aguardo,

 

Alan

[William Bruno 1501]

É oque eu disse.

Não use position para estruturar o layout.

Para manter um site no centro horizontal da tela, independente da resolução, costumamos usar:

margin: 0 auto; e um valor definido em pixels para a largura.

 

Assim o site ficará com margens esquerda e direita automáticas, que serão recalculadas, colocando o site no centro, independente da resolução.

Reveja toda a estrutura, use floats, margins, paddings..

 

Infelizmente eu tenho poucos exemplos...

http://www.cenasordidas.hbe.com.br/lay2/ (esse é meio deslocado mesmo, mas é a mesma qntidade, em qq resolução)

http://www.cenasordidas.hbe.com.br/

 

E procure por tutoriais para começar à fazer a estrutura correta.

[iabadu 0]

beleza Willian.... Já estou pesquisando aqui no Foruns sobre conteúdos... mas como preciso de urgência nesse, acho que vou fechar essas páginas como tabelas e vou estudar direitinho pra aprimorar meus conhecimentos em Tableless.... Mas obrigado pelas dicas..

 

Abraço,

 

Alan

[iabadu 0]

Olá amigos,

 

Aproveitando aqui o mesmo tópico. Consegui organizar o posicionamento do layout dentro da página sem que modifique de acordo com as resoluções de tela. Fiz umas pesquisas e ai coloquei uma div como geral mapeando o local do conteúdo na página e as demais div's dentro dessa geral controladas pelo CSS.

 

Essa página eu estava trabalhando em tabelas. Mantive o que estava trabalhando em tabelas e o corpo do conteúdo fiz com DIV.

 

Testei tudo no firefox, Chrome, Opera... funcionam direitinho, sem problemas... mas no nosso "querido" IE as div's se movem para a direita da página.

 

Como organizar esse problema em relação ao IE??

 

Para visualizarem a página: Acadêmico Nota 10

 

Bom... Pra entenderem melhor como organizei as DIV's no código da página e as CSS vou colocar os códigos abaixo pra ver se ajuda em algo.

 

CODIGO HTML:

<div id="geral">
					<!-- DIVs de Conteudos da Pagina - informacoes -->
					<div id="div_clipes"><img src="images/clipes.gif" /> </div>
					<div id="div_titulo_Acad10"><img src="images/titulo_academicoNota10.gif" /> </div>
					<div id="div_infos_1"><img src="images/infos_1.gif" /> </div>
					<div id="div_infos_2"><img src="images/infos_2.gif" /> </div>
					<div id="div_descontos"><img src="images/infos_descontos.gif" /> </div>
					<div id="div_lembrete"><img src="images/lembrete_clique_premiados.gif" border="0" usemap="#Map" /> </div>
					<div id="div_cds"><img src="images/cds_notas.gif" /> </div>
					<div id="div_foto">
					  <table width="326" border="0" cellspacing="0" cellpadding="0">
						<tr>
						  <td><img src="images/baseFoto_1.gif" width="329" height="17" /></td>
						</tr>
						<tr>
						  <td height="155"><img src="images/baseFoto_2.gif" width="329" height="155" /></td>
						</tr>
						<tr>
						  <td height="53" valign="top" background="images/baseFoto_3.gif"><div align="center">
							  <table width="200" border="0" cellspacing="0" cellpadding="0">
								<tr>
								  <td height="40"><div align="center" class="txt_nomeAcademico1">Roberto da Silva Justus</div></td>
								</tr>
							  </table>
						  </div>

 

 

CSS:

 

/* estilos pagina Canal. ACADEMICO NOTA 10 */
TEMAS {
}
#div_titulo_Acad10 { width:351; height:55; margin-left: 8em; float: none; padding-top: 36px; }
#div_clipes { width:56px; height:102px; position:absolute; top:393px; float: right; margin-left: 810px; }
#div_infos_1 { width:727px; height:217px; position:absolute; top:211px; float: left; margin-left: 110px; }
#div_infos_2 { width:424px; height:263px; position:absolute; top:435px; float: right; margin-left: 406px; }
#div_cds { width:95px; height:159px; position:absolute; top:782px; float: right; margin-left: 325px; }
#div_descontos { width:437px; height:284px; position:absolute; top:705px; float: right; margin-left: 398px; }
#div_lembrete { width:190px; height:200px; position:absolute; top:770px; float: left; margin-left: 120px; }
#div_foto { width:329px; height:315px; position:absolute; top:435px; float: left; margin-left: 74px; }

Aguardo alguma dica.... valeu...

 

Alan

[Aprendiz CSS 3]

olhando o trecho CSS que você mostrou já vi muita coisa errada

 

tem muito position: absolute;, ele causa muitos problemas

 

veja: http://aprendacss.wordpress.com/2008/07/08...ition-absolute/

 

você está misturando muitas coisas no site, tabelas com divmania ( http://www.maujor.com/tutorial/divmania.php ), css no meio do código.

 

tente estruturar melhor o seu site.

 

abraço

[iabadu 0]

Sim... mas fui montando os css's e utilizando mais as opções margin e padding não estava posicionando direitinho... ai visualizando pelos demais navegadores sem o IE funciona direitinho... mesmo mudando a resuloção de tela não da pepino... só no IE mesmo...

 

Vou restruturando as páginas... mas por enquando já tenho a estrutura principal como tabela... e preciso terminar mais rápido... por isso não queria mudar tudo agora... até porque preciso ir pegando mais coisas também em relação a Tabeless..

 

mas vou ver os links que passou e valeu pelas dicas..

[Aprendiz CSS 3]

margin e padding não são para layout...

 

são para espaçamentos curtos!

 

abraço

[chlins 1]

Estou com o mesmo problema neste site: Clique aqui.

Ainda em fase de desenvolvimento, o problema em questão é a aba no alto que faz o login pro painel.

Se muda a resolução ele sai do lugar (para a direita).

Fiz esta aba seguindo um modelo e este está usando "positions", minha pergunta: foi usado positions para ser utilizado em apenas uma resolução? Pelo que parece, quem fez não é amador como eu (risos).

 

Somente olhando o site, será que dá para me dar uma solução?

Até tentei usar float, mas este mexe com muitas coisas no site e o positions foi mais prático, apesar de estar dando este problema.