Seções iMasters
HTML + Web Standards

Posicionamento e Layouts (Parte 03)

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:

Aprenda WordPress de uma vez por todas com os cursos especializados em WP do Apiki WP Cursos. Conheça!

Comente também

5 Comentários

Glauber Matos

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,

Renan Gomes Fogaça

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!

Ricardo Floriano da Silva

http://forum.imasters.com.br/index.php?showtopic=213982

postei no forúm um box com 6 imagens que é totalmete flexivel na largura e altura…

http://www.floriano.ppg.br/

Adriano Rosa

Muito bom este tuto velho, parabéns
valew as dicas foram uteís
Abço

Max Oliveira

Totalmente esclarecedor ..vlw

Qual a sua opinião?