Posicionamento e Layouts (Parte 03)

Bruno Dulcetti
em HTML

Começo
aqui o terceiro e último artigo desta série. Irei
abordar um dos temas mais pedidos por e-mail e, talvez, mais complexos,
principalmente para quem está iniciando em webstandards:
os complicados layouts com cantos arredondados. Não são
complicados, mas sim chatos para serem entendidos no início.

Falarei sobre três modos de desenvolvermos
tais layouts: sem a utilização de imagens, utilizando
quatro bordas e utilizando um topo, um corpo e uma base para o
layout. Falarei detalhadamente sobre cada uma, tentando explicar
pra vocês a diferença entre elas, vantagens, desvantagens,
etc.

O layout em si eu criarei me baseando no segundo
artigo, seguindo toda estrutura, lógica do layout, etc.
Falarei primeiramente sobre a versão com três imagens,
uma para o topo, uma para a base e outra para o conteúdo.

Vamos lá.

Cantos arredondados com três imagens.
(Ver
On-line
):

body { text-align: center;
} /* deixando o alinhamento do body centralizado
*/

#geral {
width: 530px; /* definindo 530px para a
largura do div */

margin: auto; /* colocando auto, para que
o #geral fique de acordo com o alinhamento do body, ou seja, centralizado
*/

background: #FFF url(“corpo.jpg”) repeat-y; /*
definido o background para branco e a imagem corpo.jpg como fundo
repetindo somente na vertical */

}

#topo {
background: #FFF url(“topo.jpg”) no-repeat; /*
definido o background para branco e a imagem topo.jpg como fundo
sem repetição */

height: 35px; /* definido a altura para
que a imagem de background seja visualizada */

}

#conteudo {
padding: 0 20px; /* definindo padding de
0 para a base e topo e 20px para as laterais para que o conteúdo
não cole nas extremidades */

font: 8pt Verdana; /* definindo a fonte
do texto para Verdana tamanho 8pt */

text-align: left; /* definindo o alinhamento
do texto da div para esquerda, já que a do body está
center */

}

#rodape {
background: #FFF url(“rodape.jpg”) no-repeat; /*
definido o background para branco e a imagem rodape.jpg como fundo
sem repetição */

height: 35px; /* definido a altura para
que a imagem de background seja visualizada */

clear: both; /* definindo o clear para futuras
atualizações que o conteúdo pode ter, com
divs possuindo floats não interfira no rodapé */

}

conteúdo

Este exemplo é o mais fácil de criar,
na minha opinião. Criei três imagens: uma para o
topo, uma para o corpo e outra para a base da estrutura e exportei
como gif. Utilizei somente quatro divs, o #geral, #topo, #conteudo
e #rodape. Para lembrar, o #geral eu utilizo para uma melhor forma
de posicionamento, para os divs internos não precisarem
de position, e o posicionamento depender somente do #geral. Falei
sobre isso mais detalhadamente nos artigos anteriores. Explicarei
melhor, abaixo, sobre cada div e suas características:

- Topo

Como dito no início do artigo, exportei
uma imagem gif para a utilização neste div. Faça
o download da imagem clicando aqui
.

Utilizei esta imagem como background do div e defini
somente a altura do div pois, como dito no artigo anterior, se
não declararmos o width, automaticamente ele herda a largura
do seu “pai”, que é o #geral e como ele recebeu
550px de largura, então o #topo fica 100% do #geral que
é o valor 550px.

“Mas por que declarar a altura? Ela não
fica automaticamente com a altura do #geral?” Não
necessariamente. O #geral não recebeu nenhum valor de altura,
então ele ficará de acordo com o conteúdo
do div respectivo, ou seja, o #topo. Mas concorda comigo que o
#topo não possui conteúdo nenhum? Então se
ele não recebe conteúdo nenhum, automaticamente
a altura é 0(zero) e não é o que queremos.
Por isso a utilização do height. ;)

- Rodapé

Aqui não tem mistério nenhum. É
exatamente como a explicação do #topo, pela utilização
do atributo height, da não utilização do
width, a utilização da imagem como background, etc.

Faça o download da imagem do rodapé clicando aqui

. A única coisa de diferente no #rodape é o acréscimo
do clear: both, que falei detalhadamente sobre este atributo no
artigo anterior. Caso tenham dúvida, vejam novamente nele.

Na verdade não seria necessária a
utilização do clear agora, pois é só
um exemplo, mas achei melhor utilizá-lo caso vocês
venham a utilizar este exemplo com o conteúdo com floats,
que pode dar problemas.

- Conteúdo

A parte onde terá o conteúdo do site.
Nada demais no código, somente um padding para o conteúdo
ficar um pouco mais pra dentro do div e não ficar muito
colado nas bordas, dando pra perceber que são dois valores,
o primeiro corresponde ao padding superior e inferior, enquanto
o segundo corresponde pro da direita e esquerda. Um font para
mudar a aparência, tamanho do texto. Muito simples.

- Geral

Agora você deve estar se perguntando (ou
melhor, me perguntando): “Mas aonde eu coloco a imagem de
fundo do corpo? Não seria no #conteudo?”. Bom, poderia
ser, mas como no exemplo do #rodape, que deixei o clear, para
que futuramente, com alguns testes ou modificações
de vocês mesmo, não venham ter problemas na utilização
do código. Faça
o download da imagem do conteúdo clicando aqui
.

“Ah sim… Beleza, mas não entendi
ainda por que você colocou.” Calma, explicarei agora.
Esta é uma versão bem simplificada da técnica
FAUX-COLUMNS. Esta técnica é utilizada quando você
possui um site com três colunas, por exemplo, e você
quer colocar uma divisão diferente entre as três
colunas. Acontece que, para utilizar as três colunas, você
precisa de floats, um no div da esquerda e outro no da direita.
Até aí simples demais, mas o único problema
é que, vamos supor que o conteúdo da esquerda não
seja do mesmo tamanho do da direita e do conteúdo, ou qualquer
caso, automaticamente a imagem de background do div irá
parar de acordo com o fim do conteúdo dele próprio.

Não irei cair em detalhes sobre FAUX-COLUMNS
aqui neste artigo, pois não é o foco, mas falarei
no meu Blog sobre este assunto esta semana e mostrarei exemplos
e explicarei seu funcionamento.

Retornando a parte da imagem de fundo ser no #geral.
Neste nosso exemplo, nem precisaria ter colocado, pois o #conteudo
não possui conteúdo nenhum, nenhuma div no interior,
mas como havia mencionado, caso vocês utilizem futuramente,
já tenha pronto. ;)

Quando você utiliza floats em um layout,
a altura do geral só acompanha o div que não possui
o float. Veja um exemplo clicando aqui. Aqui você pode ver
que o div da direita não tem o float, por isso a cor de
background do #geral acompanha a altura, conteúdo do div
da direita. Agora vejamos outro exemplo clicando aqui. Neste exemplo,
podemos ver que o conteúdo do div da esquerda é
maior e ele possui um float: left, com isso, o cinza do #geral
não acompanha o div.

Portanto, se utilizássemos a imagem de background
no #conteudo, poderíamos ter problemas futuros, com a implementação
de div com floats, etc.

Vimos também certas diferenças do
background do #geral para os outros. Enquanto os outros recebem
no-repeat, o do #geral recebe repeat-y, pois assim, a cada conteúdo,
ele irá se repetir, não tendo o menos perigo, limitação
de conteúdo, altura, etc.

Com isso finalizamos o primeiro exemplo de layout
com canto arredondado, utilizando apenas três imagens.

Cantos arredondados com quatro imagens.
(Ver
On-line
):

body { text-align: center;
} /* deixando o alinhamento do body centralizado
*/

#geral {
width: 530px; /* definindo 530px para a
largura do div */

margin: auto; /* colocando auto, para que
o #geral fique de acordo com o alinhamento do body, ou seja, centralizado
*/

text-align: left; /* definindo o alinhamento
do texto da div para esquerda, já que a do body está
center */

background-color: #4D906F; /* definindo
um verde escuro para a cor de fundo do div */

}

#topo {
background: #4D906F url(“cantoDS.gif”) no-repeat top
right; /* definindo uma imagem de background
para o topo, alinhada à direita e grudada no topo */

height: 20px; /* definindo altura de 20px
para o topo, para que o background seja visualizado corretamente
*/

}

#conteudo {
padding: 0 20px; /* definindo padding de
0 para a base e topo e 20px para as laterais para que o conteúdo
não cole nas extremidades */

font: 8pt Verdana; /* definindo a fonte
do texto para Verdana tamanho 8pt */

}

#rodape {
background: #4D906F url(“cantoDI.gif”) no-repeat top
right; /* definindo uma imagem de background
para o rodapé, alinhada à direita e grudada no topo
*/

height: 20px; /* definindo altura de 20px
para o rodapé, para que o background seja visualizado corretamente
*/

clear: both; /* definindo o clear para futuras
atualizações que o conteúdo pode ter, com
divs possuindo floats não interfira no rodapé */

}

alt="" />

conteúdo

alt="" />

Veremos, neste exemplo, uma versão bem simples
e facílima de usar. No início pode ser meio chatinho
pra entender um pouco, mas depois que entende o funcionamento
fica fácil, fácil. Você precisará de
quatro imagens, praticamente idênticas, a única mudança
é o ângulo das imagens. Faça
o download das imagens clicando aqui
.

Neste exemplo utilizaremos apenas quatro divs também,
na mesma estrutura do exemplo anterior, mas com algumas modificações
e adições no código como podemos ver acima.
Mudei a altura do #topo e #rodape para 20px, lembrando que o valor
da altura deve ser o valor da altura da imagem, senão pode
dar problema. Coloquei o text-left no #geral para que todos os
outros divs dentro do #geral alinhem os textos à esquerda.
Uma das partes mais importantes, o background do #topo e #rodape,
que são praticamente idênticos, mudando somente o
nome. Mas a cor de fundo e o posicionamento são de extrema
importância. A cor de background deve ser a mesma cor da
imagem que vai estar no fundo.

Prestem atenção que alinhei o background
à direita e no topo. Para assegurar que fiquem lá
e dentro de cada um dos divs, tem uma tag chamando
a imagem respectiva a seu div. Por exemplo, a do topo recebe na
tag uma imagem cantoSE.gif, que é uma abreviação
de canto Superior Esquerdo, assim como no #rodape tem a imagem
cantoIE.gif, que seria canto Inferior Esquerdo.

Como o alinhamento de todas as divs está
à esquerda, então, automaticamente as imagens vão
ficar na esquerda, devido a isso coloquei as imagens de background
à direita, para que uma não sobreponha a outra.

Temos que chamar um detalhe, que as imagens têm
que ter a cor de fundo, a mesma cor de fundo do ou
da div “pai”, para que não tenha problemas
com as cores, por exemplo, o bom uma cor verde de
fundo, e a imagem ter um fundo cinza, ficará errado, pois
a imagem será um quadrado. Veja
o exemplo clicando aqui
.

Uma vantagem é que basta retirar o width
do geral para que o site fique líquido. Clique
aqui para ver o exemplo
. Expliquei mais detalhadamente este
pondo no artigo anterior. Clique
aqui para visualizá-lo
.

Vimos que não tem mistério nenhum
criar esta versão, não é verdade? Resumidamente
é um div com uma imagem de background alinhada à
direita, enquanto temos uma imagem colada à esquerda para
completar o arredondamento e o div com a mesma cor de background
que a cor dos cantos. ;)

Cantos arredondados sem utilização
de imagens.
( Ver
On-line
):

span.topoRedondo, span.baseRedondo
{
display:block; /* deixando o display dos
span como block, já que o padrão é inline
e é necessário para visualização correta
*/

background: transparent; /* deixando o background
tranparente para que sempre que mudarmos a cor de fundo do
por exemplo, não seja necessário a mudança
aqui. */

}

span.topoRedondo span, span.baseRedondo
span {
display: block; /* deixando o display dos
span como block, já que o padrão é inline
e é necessário para visualização correta
*/

height: 1px; /* declarando a altura dos
spans poara 1px */

overflow: hidden; /* ocultando todo o conteúdo
que poderia ser visualizado no span. Todo espaço é
reduzido. Sem isso, no i.e. não é visualizado corretamente.
*/

background: #DEF6DD; /* definindo a cor
de fundo dos spans para verde. Sempre que quiser mudar a cor,
essa é a parte que deverá ser alterada. */

}

span.rum { margin:0 5px;
} /* Definindo a margem para 5px para as
laterais e 0 para base e topo para o primeiro span */

span.rdois { margin:0 3px; } /* Definindo
a margem para 3px para as laterais e 0 para base e topo para o
segundo span */

span.rtres { margin:0 2px; } /* Definindo
a margem para 2px para as laterais e 0 para base e topo para o
terceiro span */

span.rquatro { margin: 0 1px; height: 2px; } /*
Definindo a margem para 1px para as laterais e 0 para base e topo
para o quarto span e definido a altura para ele de 2px, a única
altura diferente dos demais.*/

.meioRedondo {
background: #DEF6DD; /* definindo a cor
de fundo dos spans para verde. Sempre que quiser mudar a cor,
essa é a parte que deverá ser alterada. (Sempre
deixar a mesma cor dos spans acima) */

color: #000; /* definido a cor preta para
o texto */

margin: 0; /* zerando a margem */
padding: 5px 15px; /* definindo padding
de 5px para a base e o topo e 15px para as laterais, para que
o conteúdo não fique colado nas bordas. */

}






conteúdo






Recebi alguns e-mails, várias perguntas,
não só aqui, como no fórum também,
de como criar divs com cantos arredondados sem o auxílio
de imagens. Há várias vantagens na utilização
deste modelo, pois vocês não dependem de imagens
para formá-la e, com isso, muito mais fácil de,
por exemplo, mudar a cor, etc. Logicamente que tem suas limitações,
que falarei mais no final do artigo.

Podem perceber a diferença no div topoRedondo
pro baseRedondo? As classes se invertem, no topo aparece rum,
rdois, rtres e rquatro, enquanto na base fica rquatro, rtres,
rdois e depois rum. E são exatamente esses spans que fazem
a “mágica” do arredondamento. É apenas
uma “ilusão óptica”. Pense você
criando no Photoshop, por exemplo, um quadrado arredondado, mas
sem o anti-aliasing. Se você criar um quadrado grande, você
verá a pixelização do quadrado, mas se você
fizer um quadrado bem pequeno, você nem perceberá
direito isso. Veja
o exemplo clicando aqui
. É como funciona com as fontes
também.

Experimente escrever um texto no seu html com uma
fonte tamanho 10pts, o texto aparecerá sem problemas nenhum,
mas coloque 34pts e ficará um tamanho gigante e com alguns
serrilhados por não possuir um anti-alias. Veja
o exemplo clicando aqui
.

Veja que defini as margens para as laterais e não
somente para um dos lados. Senão o site ficaria com somente
um dos lados arredondado. Clique
aqui para ver o exemplo
. Ou seja, como o primeiro span tem
5px de margem nas laterais, ele ficará 5px afastado do
#geral, que é seu “pai”, o segundo, com 3px
nas laterais, ficará 3px afastado e assim por diante. Se
nós colocarmos 1px de diferença para cada span,
ficaremos com um div com uma diagonal ao invés do arredondado.
Clique
aqui para ver um exemplo
. Como tem poucos spans, fica quase
imperceptível, parecendo até arredondado, mas tente
colocar mais spans, ficará mais visível. Clique
aqui para ver o exemplo
.

Tem um blog explicando muito bem o funcionamento
desse artifício, com imagens, etc. Baseei-me um pouco neste
post, mas fiz algumas mudanças, melhorias no código.
Clique
aqui para ver o post
. Ele utilizou a tag , utilizei
a tag . Tem um exemplo em outro blog, que também
utiliza . Clique
aqui para visualizar.

Não tem muito mistério, só
deixei o display: block nos spans, para que eles deixassem de
ficar inline sempre quebrar linha, depois tirei a cor de fundo
dos span baseRedondo e topoRedondo. O div meioRedondo não
tem mistério nenhum, coloquei um padding, logicamente a
mesma cor de fundo dos spans do topo e base para ele, senão
teremos uma diferença de cor e não é o que
desejamos. Nos spans topoRedondo e baseRedondo eu coloquei também
o overflow: hidden, que faz com que não contenha nenhum
conteúdo dentro desses span, que fiquem invisíveis.
Normalmente não precisaria desta linha, mas o i.e. coloca
espaços, mesmo sem conteúdo, parece que ele renderiza
os espaços também, coisas do nosso querido i.e.

Vantagens x Desvantagens

Como tudo que existe na vida, temos pontos negativos
e positivos para cada um dos exemplos. Listarei alguns dos principais
pontos e cabe agora a vocês, decidirem qual a melhor opção.
Varia de caso a caso.

Vantagens

Três imagens:

- Você pode colocar bordas nas curvas, nas
imagens, sem perda de qualidade;
– Adicionar sombras nas imagens;
– Código bastante reduzido;
– Visual mais rico.
– Variação de angulação dos arredondamentos;

Quatro imagens:

- Possibilidade de fazer com sites líquidos
facilmente;
– Bem simples e rápido para futuras alterações,
precisando somente mexer no CSS;
– Código reduzido;
– Variação de angulação dos arredondamentos;

Sem imagens:

- Possibilidade de fazer com sites líquidos
facilmente;
– Para modificações, basta apenas modificar o CSS,
sem precisar editar imagens;
– Como não utiliza imagens, site em geral fica mais leve;

Desvantagens:

Três imagens:

- Limitação a layouts fixos;
– Para futuras alterações, não basta somente
o css, como modificar em um programa a imagem;
– Mais peso, pois as imagens geralmente são mais pesadas
que os outros exemplos;

Quatro imagens:

- Para futuras alterações, não
basta somente o CSS, mas modificar a imagem em um programa;
– Limita a somente utilizar fundo com cores somente, sem bordas,
sombras, etc;

Sem imagens:

- Limita a somente utilizar fundo com cores somente,
sem bordas, sombras, etc;
– Código um pouco mais sujo, com um pouco mais de tags;

– Falta do anti-alias na visualização dos arredondamentos;

Existem outras vantagens, desvantagens, mas que
acabam se enquadrando nestes pontos citados. No início
pode ser um pouco complicado entender o funcionamento de algumas
dessas utilizações, mas depois de uma prática,
modificações, vocês acabam entendo legal.

Bom, finalizo aqui a seqüência dos artigos
“Posicionamentos & Layouts”. Espero ter ajudado
o pessoal e que tenha englobado as principais dificuldades no
início da criação dos layouts webstandards.
No próximo artigo, falarei sobre “Reciclagem de CSS”,
assunto que foi bastante solicitado, não só por
e-mail, quanto no fórum do iMasters. Tentarei abordar ao
máximo, a economia que pode ser feita no CSS. Temos por
aí na internet alguns sites que fazem isso, mas creio que
para o desenvolvedor, é bom saber o porquê disso
e não somente fazer. Vai que você está em
casa, sem internet e está terminando o site… E aí,
como que fica? Espera a internet voltar? Não seria melhor
saber a lógica disso?

Caso tenham alguma dúvida, é só
entrar em contato, me mandar um e-mail, sinal de fumaça,
qualquer coisa. No que puder ajudar, estarei ajudando, assim como
no meu blog.

Fico por aqui. Aquele abraço!

Mensagem do anunciante:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Bruno Dulcetti

é formado em Gestão e Criação de Ambientes Internet e finalizando Pós-Graduação em Interface, Internet e Multimídia na UFF. Bruno é atuante na área de webdesign há mais de 5 anos, sendo 4 deles profissionalmente. Auto-didata em Tableless, XHTML e CSS, onde está se especializando atualmente. Conhecimentos avançados em Flash, Photoshop, entre outras tecnologias.

Comentários

Para comentar no iMasters você precisa estar logado.

O iMasters possui mais de 13 mil textos publicados, em 13 anos já somos uma comunidade de mais 350 mil pessoas. Cadastre-se agora mesmo GRATUITAMENTE e tenha acesso a todo o mundo iMasters.

Já tenho conta Quero me cadastrar
  1. Fala Mermão! Rapaz Parabéns mesmo pela materia, realmente conseguiu tirar todas as dúvidas que eu tinha com as bordas arredondadas em CSS! O texto ficou muito fácil e prático de entender. Parabéns mesmo. Abraços,

  2. Muito bom Bruno!!
    Eu andei fazendo o com tres imagens, acho bem legal esse esquema, o de quatro imagens eu não acho tão legal…
    agora esse sem imagens eu achei show, nem tinha ideia de como fazer, ta de parabens!
    abraço!

Este projeto é mantido e patrocinado pelas empresas: