Depois de algum tempo, consegui gravar o último vídeo do nosso assunto sobre Layout CSS.
Neste post nós veremos como criar as DIV's internas. Veremos como alinhar uma DIV ao lado da outra e, também um truque muito usado em CSS chamado faux columns.
Bom, como de costume, vou deixar aqui no início o vídeo, para ajudar no aprendizado:
Bom, abaixo segue o código de onde nós paramos no último post (no primeiro post nós criamos a DIV principal e a alinhamos a esquerda e, no segundo, fizemos ela ocupar 100% da altura da tela):
Lembrando que basta clicar na figura para ampliá-la.
O que falta para chegarmos até o formato do site esperado são as 3 DIV's internas. Vou colocar novamente a imagem com o formato que desejamos montar:
Criando as DIV's Internas
Agora sim vamos continuar da onde paramos.
Primeiramente vamos criar três DIV's dentro da DIV principal. Seus id's serão "topo", "menu" e "rodapé".
Conforme figura abaixo:
Ps. Como o código já está grande, não posso mais colocá-lo inteiro dentro das figuras. Por isso estou numerando as linhas, para você saber que esse não é o código completo.
Agora irei definir uma altura para a DIV "topo" e uma borda (apenas na parte de baixo).
Para fazer isso adicionarei um novo bloco no CSS com o seletor #topo, conforme figura abaixo.
Agora vamos começar a criar o CSS para as DIV's "menu" e "conteudo".
Primeiramente, vou definir uma largura fixa para as duas (130 px) e uma cor de fundo para cada uma (#faa para o menu e #aaf para o conteúdo).
Como você pode ver as DIV's ficaram uma em cima da outra. Para corrigir isso vamos utilizar a propriedade "float", que fará com que cada uma delas flutue em relação a DIV principal. Vamos definir float: left para o menu e right para o conteúdo.
Agora cada DIV já está posicionada no seu respectivo lugar.
Vamos então definir uma largura para o menu e o conteúdo, para que cada um ocupe todo o espaço disponível para eles.
Como a DIV principal tem 600px, vou utilizar 130px para o menu e 469px para o conteúdo. Fazendo isso deixarei entre eles um espaço de 1 px, que eu utilizarei mais para frente.
Segue figura:
Agora vamos definir uma borda entre o menu e o conteúdo.
Para fazer isso, a técnica escolhida será o faux columns. Criarei uma imagem com a largura da DIV principal (600px) e apenas 1px de altura.
Farei com que essa imagem tenha fundo transparente e pintarei nela apenas 1 pixel preto, justamente na posição onde está sobrando um pixel vazio em nosso layout. Definirei essa imagem como fundo da DIV principal.
Sendo assim ela se repetirá e pintará uma borda entre as duas DIV's (menu e conteúdo).
Segue abaixo o código onde insiro a imagem como fundo da DIV principal:
Infelizmente, por falhas técnicas do blog, não está sendo possível fazer upload da imagem que utilizei como fundo. Mas basta você criar qualquer imagem de 600x1 px e pintar um pixel preto no lugar correto. Veja como fazer isso no vídeo, utilizando o GIMP.
Você verá que a imagem também ficará como fundo da DIV "topo", o que não é o que queremos.
Para solucionar isso basta colocar uma cor de fundo na DIV topo, como faço na figura abaixo (aproveitei também para retirar a cor do fundo do menu e do conteúdo).
Agora estamos perto de terminar.
O resultado já está bem parecido com o desejado, mas o texto ainda está muito próximo das bordas. Para solucionar isso adicionarei 10px de padding a cada uma das 3 DIV's internas.
Ao adicionar o padding você terá de remover 20 px tanto da altura da DIV topo, quanto da largura das DIV's menu e conteúdo, pois senão os novos tamanhos empurrarão a estrutura do nosso site.
Veja como ficou na figura abaixo:
Agora só falta ajustarmos um detalhe.
No último post sobre o assunto fizemos todo um trabalho para que o DIV principal acompanhasse o conteúdo do site caso ele fosse maior que a janela. Como utilizamos as propriedades float no DIV menu e conteúdo, eles não empurrarão mais a DIV principal (coloque bastante texto dentro do DIV conteúdo fazendo com que ele ultrapasse o tamanho da janela, na vertical, para conferir).
Para solucionar isso vamos fazer uma "gambiarra". Colocaremos depois da div conteúdo uma nova DIV chamada "rodape", que será invisível.
Colocaremos um novo bloco no CCS referente a DIV rodapé colocando a propriedade "clear" dela como "both".
Sendo assim a DIV invisível rodapé será posicionada abaixo do menu e do conteúdo e, como ela não tem float, ela empurrará a DIV principal!
Veja código abaixo:
E assim, finalmente chegamos ao resultado proposto!
Mais pra frente podermos criar um quarto post extra, ensinando a criar um rodapé de verdade, que fique posicionado sempre no fundo da janela.
Por enquanto é isso, espero ter ajudado!
Abraços!
Links relacionados:
6 comentários:
Porra Grasselli,
Nao acredito q vc tah fazendo programacao, velho!
Parabens pelo Blog, eh bem didatico e tem muito conteudo.
Thank God for Facebook!
Ola bruno, estou aprendendo astante com seus videos. Bom, fui seguir este video e na hora de utilizar o padding:10px, o IE respondeu bem, nao desalinhou, porem desalinhou no chrome e firefox, e quando tiro os 20px de cada lado pra alinhar nos outros, ele desalinha no firefox e chrome. Alguma dica? Estou com este problema!! Abraços.
Fala Galvao!
Você diz no próprio exemplo do tutorial?
Faz assim, você consegue me mandar o código fonte e eu dou uma olhada? Manda no meu e-mail, tem ele la no meu perfil do blog.
Geralmente quando da algum erro assim comigo é um espaçamento de borda inesperado ou algo do gênero.
Não lembro de cabeça agora, mas acho que ele considera a parte da largura do objeto a borda e padding. Então pode ser que extrapole o tamanho da tag pai, se ela estiver calculada de forma errada.
Fico no aguardo do código!
Abraços!
Olá Grasselli,
Adorei as suas dicas sobre css.
Funcionou que é uma blz.
Tava penando pra consertar isso.
Thanks a lot.
bom bruno parabens pelos videos so agora com seu videos é que eu entendi o css, mas estou com problemas um div chamada loja e outra chamada sidebarmas elas nõa aconpanham a dvi principal os elementos dentro destas divs aparecam cortado só quando uso a propiedade overflow elas aparecem,mas overflow fica muito feio, como fazer a div principal se estender de acordo com o tamanho da div principal, a div rodape não empurra,estou montando meu site com filosofia faça você mesmo né, esta nova index ainda não publiquei quero fazer isto até o fim de semana,obrigado.
www.delfosinformatica.com.br
www.3gandredelphi.blogspot.com
agora estou com outro problema meu projeto só carrega no firefox os outros navegadores não funciona
ogrigado.
Postar um comentário