Resolvendo os problemas de posicionamento das layers
Olá pessoal, que bom estar aqui mais uma vez com vocês. No artigo de hoje falaremos sobre um problema que muitos desenvolvedores se esbarram com ele e infelizmente muitos deles não conseguem resolver. Abordaremos a questão sobre o posicionamento das "layers" no Dreamweaver.
O motivo de muitos não conseguir resolver os seus problemas está no seguinte: a grande maioria não possui um conhecimento sobre a linguagem em que está trabalhando e estão tão acostumados a simplemente utilizar a interface do Dreamweaver. Outros não tem disposição de consultar ao Google ou o excelente Fórum iMasters, por exemplo.
Bom, vamos ao assunto. Na aba Layout do Dreamweaver, existe a seguinte opção: Draw Layer, observe a imagem abaixo:
Com ele, você poderá desenhar as tais "layers" em sua página e o Dreamweaver se encarregará de posicioná-las e definir suas características como: largura, tamanho, posicionamento, entre outros para você.
Observe na imagem de exemplo abaixo, o resultado de uma "layer" desenhada no Dreamweaver:
A medida que você vai desenhando as "layers", o Dreamweaver vai nomeando-as de forma lógica e da seguinte forma:
Ou seja, como foi a primeira "layer", o atribudo id da tag div foi definido como: Layer1. A próxima será: Layer2e assim sucessivamente.
E ao mesmo tempo é criado o código CSS responsável pelas características da "layer", observe:
O principal objetivo dos códigos CSS acima é o posicionamento da "layer". O tipo de posicionamento utilizado foi o absolute. O que significa dizer que tal "layer" será posicionada absolutamente com relação ao elemento body, será? Basicamente sim e é o que todos esperam.
Mas, dessa forma, você terá sérios problemas quando alguém acessar a sua página em que a tal "layer" se encontra e esse alguém tiver utilizando uma resolução diferente da qual você pensou que ele estivesse. E com isso, você terá uma frustação: o posicionamento não ocorreu como o esperado.
Observe as imagens abaixo:
O meu objetivo é que a "layer" em laranja seja posicionada absolutamente, afinal estou utilizando o valorabsolute da propriedade position. Mas preciso que ela (layer) fique dentro do elemento que está na cor vermelho escuro. E como você pode observar nas imagens acima, em 800x600 ela se comporta bem, mas em 1024x768 não. Então, como resolver? Vamos lá:
Como dito anteriormente, a "layer" foi posicionada tendo como base o elemento body e não o elemento em vermelho escuro. E uma vez utilizado a propriedade position com o valor absolute, removemos o elemento de seu fluxo normal na página em que ele se encontra.
Então, o que precisamos fazer é posicionar a "layer" em relação ao elemento em vermelho escuro e não com relação ao body. Primeiramente, você deve certificar que na codificação HTML a "layer" está englobada pelo elemento em que você deseja tê-lo como referência. Observe:
E para torná-la uma referência para a "layer", proceda assim com as CSS:
A sugestão é a seguinte: crie uma div e dentro dela coloque tudo que a página irá conter e defina a propriedade CSS demonstrada acima para ela. Dessa forma, os elementos dentro dela não se posicionarão com relação ao elemento body, mas sim através dela. Sendo assim, independemente da resolução que alguém estiver utilizando, você não terá problemas quanto ao posicionamento das "layers".
Dica retirada do site: Imasters
Nenhum comentário:
Postar um comentário