Layouts com Position e Width, por Thalis Valle

Salve, pessoal!

No meu artigo anterior, eu escrevi sobre o básico do CSS e dei exemplo de como trabalhar com estrutura de marcação e folha de estilos, que pode ser acessado pelo endereço http://www.plugmasters.com.br/sys/materias/270/1/Design-de-sites-com-CSS

Neste artigo, pretendo falar sobre duas propriedades do CSS, responsáveis pela construção dos tipos de layout liquido e fixo: position e width

Hoje, os usuários estão cada vez mais tendo boa consciência sobre a nova web (WEB 2.0), seja em funcionalidade, usabilidade, padronização, etc.

Antigamente era comum encontrarmos nos sites, tal mensagem no rodapé: "melhor visualizado em 800x600"

Amadorismo ou ignorância, o fato é que os maiores responsáveis pelo amadurecimento geral de todos, são os desenvolvedores. Tais comportamentos, como a frase acima, é como declarar a anti-democracia da usabilidade na web. Ou seja, é a mesma coisa que obrigar os usuários a seguir maneiras pré-estabelecidas, estas que proibem o usuário de visualizar o conteúdo, do modo como queira, por diferentes browsers, resoluções e dispositivos.

A mudança

O consciente coletivo foi amadurecido graças ao esforço do W3C pela luta a favor da padronização na internet. Agora que estamos falando a mesma lingua, desenvolvedores e usuários finais, precisamos respeitá-los, possibilitando o acesso de forma irrestrita, seja qual for a plataforma, browser, tela, resolução ou dispositivo.

Usando Width

Começo falando da propriedade width. Esta propriedade é responsável por estabelecer um tamanho fixo do objeto. Ela não tem regras de hierarquia de camadas, sendo assim, não importa se esteja sendo aplicada no estilo de camadas pai ou filho.

Para width, podemos aplicar dois tipos de valores: de percentagem (%) ou em pixel (px).

Por suposição, imaginemos que você precise trabalhar em cima de um leiaute que se ajuste em qualquer resolução. Exemplo:

XHTML:

<div id="pai">
    conteudo
</div>

CSS:

#pai {
    width: 80%;
    height: 200px;
    background-color: #B3B3B3;
}

Reparem que com esta configuração, a div pai se ajusta em 80% na tela, em qualquer resolução. Se no caso, precisamos criar uma div filho que seja renderizada em 20% menor sobre os 80% da div pai, usamos:

<div id="pai">
    conteudo
    <div id="filho">
        conteudo
    </div>
</div>

#pai {
    width: 80%;
    height: 200px;
    margin: auto;
    background-color: #B3B3B3;
}

#filho {
    width: 80%;
    height: 200px;
    margin: auto;
    background-color: #F0F0F0;
}

Repare que na div filho eu usei o valor de 80% e não 60%. Isso porque a div filho é comparada a partir da div pai, quando a div pai é filho da tag body.

Usando Position

A propriedade position pode receber cinco valores: absolute, fixed, inherit, relative e static

Absolute

Faz com que a camada se posicione a partir de uma especificação absoluta na tela e em determinada resolução. Exemplo:

#filho {
    width: 80%;
    height: 200px;
    margin: auto;
    background-color: #F0F0F0;
    position: absolute;
    margin-top: 10px;
    margin-left: 20px;
}

Fixed

Faz com que a camada permaneça fixa conforme especificação determinada

Inherit

É usado para herdar o valor do elemento pai

Relative

É usada para posicionar a div com valor relativo a div pai

Static

É um valor padrão para qualquer elemento que não tenha sua posição explicitamente declarada.

Até a próxima e bom estudo!