Detalhes

Categoria: Joomla

Atualização: Segunda, 02 Julho 2012 19:33

Autor: vovó Vicki

Acessos: 28903

Pilotando divisórias

Para os browsers, por padrão, as divisórias são "caixas" que ocupam toda a largura da página. No exemplo acima, o browser fez tudo direitinho: como não havia nenhuma indicação do que fazer com as divisórias, ele colocou uma debaixo da outra na sequência indicada. Se quisermos modificar esta disposição, primeiramente é preciso conhecer a width (largura) das divisórias. Para entender melhor o que as diversas propriedades representam vamos determinar uma cor de fundo diferente para cada uma das divisórias: vermelho para a da esquerda, branco para a do centro, azul para a da direita e preto para o rodapé. Como fazer isto? Usando o arquivo de estilo!

Por enquanto não mudou muita coisa por que só mudamos a cor de fundo das divisórias, mas ainda não alteramos a propriedade largura das mesmas. A largura das divisórias pode ser definida em pixels ou porcentagem. Se fixarmos a largura em pixels teremos alguns problemas. Por que? Porque se o usuário tiver definido uma resolução de 800x600 pixels para a sua tela, a aparência da página será uma (cerca de 17% dos visitantes ainda usam esta resolução); se tiver definido 1024x768 pixels (mais de 70% dos usuários já optaram por esta resolução), o aspecto da página será totalmente diferente porque vão sobrar muitos espaços vazios. Só por este motivo fica claro que a melhor opção é definir a largura das divisórias em porcentagem. Considerando que a largura da tela é de 100% e que teremos três colunas, a soma da largura destas três coluna também deverá ser 100%.

Se quisermos que a largura das colunas da esquerda e da direita sejam menores que a da coluna do centro, podemos optar por alguma coisa como 20% - 60% - 20%. Neste caso, o CSS precisa fornecer estas informações:

Atualizando o arquivo template.css e chamando novamente a página, o resultado é o seguinte:

Tá tudo muito bom, dá até para ver que a coluna da esquerda ocupa apenas 20% da largura da tela, mas não é bem este o resultado que esperávamos. Na verdade, queremos que a coluna da esquerda fique à esquerda, a coluna do meio fique no meio, que a coluna da direita fique à direita (parece tão óbvio!) e não que uma fique embaixo da outra. Para resolver esta pendência vamos ter que usar a propriedade de flutuação (float) das divisórias.

Para pedir que uma divisória "flutue" à esquerda precisamos informar float: left; para que flutue à direita, usamos float: right. A flutuação de divisórias funciona da seguinte maneira: se pedirmos que uma divisória flutue à esquerda, ela é colocada na parte esquerda da tela ocupando uma determinada largura. As divisórias que vierem a seguir mantêm a propriedade float: left e também serão posicionadas à esquerda até que a propriedade float seja desativada com um clear: left ou clear: both. Se a largura da divisória não tiver sido definida, o padrão é que ela ocupe 100% do espaço disponível. Se a largura tiver sido definida e ainda restar espaço na tela, a próxima divisória é colocada ao lado da primeira e assim sucessivamente até que a largura da tela tenha sido preenchida ou quando uma divisória "estourar" o espaço disponível. Veja o que acontece quando usamos este princípio (nas divisórias miolo e colDireita não precisaríamos indicar float: left, mas incluí a propriedade para deixar o exemplo mais explícito):

Mais uma vez, atualize e salve o arquivo de estilos template.css. Verifique os resultados:

Conseguimos colocar uma coluna ao lado da outra, só que tem um porém - o rodapé acabou ficando na coluna da direita. O que aconteceu foi o seguinte: a coluna da esquerda (fundo vermelho) está corretamente posicionada e mostra o menu; a coluna central (fundo branco) também está na posição correta; a coluna da direita, que deveria ter fundo azul e conter os módulos da direita está vazia porque não há módulos definidos para ocupar a posição right nesta página. Isto significa que 20% da largura da página estão sobrando, espaço este que é ocupado pela próxima divisória - a divisória do rodapé.

Para interromper a sequência de divisórias colocadas lado a lado é preciso interromper a sequência de float, ou seja, é preciso limpar (clear) esta sequência. Experimente colocar um clear: both na divisória rodape:

Ah, agora sim! A divisória "pulou" para o fim da página e, como sua largura não foi especificada, atravessa a página inteira.