Na verdade a gravação foi feita em 7 minutos e 51 segundos.
Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.
Se quiser ver o exemplo com o código fonte, clique aqui.
Eu estava justamente precisando de algo como isso, esta com dificuldade de fazer isso das outras formas que conheço…
Agora meu sistema que tem opções das duas formas de layout vai poder se livrar das tabelas!
o HTML serve para colocar o conteúdo independente do visual, todo o layout (de preferência) deve ficar no CSS. Por isso os ids devem fazer sentido para o conteúdo, e não fazer referência questões visuais.
Ids que fazem sentido por exemplo seriam “navegação”, “blogroll”, “notícias”, etc. Mesmo porque, nada impede que com CSS você mude um seção de um lado para o outro. Manter em mente que HTML serve para o conteúdo, CSS para o visual, e JS para a parte comportamental do site, ajuda muito na hora de desenvolver.
Obrigado Edgard, já possuo essa visão de desenvolvimento, só discordo em não poder usar tais IDs, na minha opinião os IDs não devem ser removidos, porém a parte CSS que não faz parte de posicionamentos, por exemplo background, deve ser aplicada a uma classe, até porque os 2 menus usam as mesmas propriedades de estilização, mudando apenas o seu posicionamento.
Sendo assim o estilo deles iria para uma classe “.menu”, os IDS “esquerda” e “direita” continuariam, apenas com floats, e os divs conteriam ids e classes.
Por que disso? Se, por exemplo, você resolve usar um Ajax para modificar o lado direito, um id chamado “direita” faz bastante sentido não acha?
Bom, talvez eu esteja enganado, mas estamos aqui para aprender…
Concordo com o Edgar em partes, acho que a ideia de se usar IDs “lógicos” para os divs faz sentido, por exemplo, se um dia o div do menu que estava a direita e se chamava “direita” “resolve” mudar de lugar, vai ficar meio ilógico um div chamado direita no meio da página certo?
Mas se você fizer o CSS pensando naquele momento (quando o div “direita” está na direita) ele também faz sentido… é tudo uma questão de estruturação….
Bom dia Diego;
Em primeiro, parabéns pelo tutorial que ficou muito bacana e simples de entender.
Pelo vídeo, pareceu que vc trabalha com MAC e se realmente for isso, gostaria de saber qual IDE vc usa, se ao desenvolver nos padrões web há alguma diferença na visualização entre safari, ie7 e firefox?
A plataforma OS X é muito melhor para desenvolvimento web?
Valeu e tenha um bom dia.
Não entendi o motivo deste exemplo (e o outro do “form em 8min.” também).
Não entendi mesmo…
Só notei uma coisa que errada nesta(s) página(s) de exemplo(s).
Colocando divs dentro de uma div (geral), o conteúdo delas só é mostrado depois de ler a tag de fechamento da div geral.
Desta forma as divs estão funcionando como uma tabela. Fica aquela tela branca e, de repente, “puf”, aparece tudo.
Não há a necessidade de usar uma div GERAL, pra centralizar o site no meio da tela. Isto está virando vício, caras.
Nos exemplos, sem imagens e com lorem ypslun’s, funciona bem, mas coloque vários includes acessando banco de dados no conteúdo central, uma imagem no cabecalho e várias imagens na lateral esquerda. Vais ver aquela tela branca, o motivo principal da criação do tableless. Acelerar o carregamento.
Depois volto aqui pra ler as “broncas” e “lições” dos mestres(ao menos eu os considero como).
Fernando, já que você possui uma visão de desenvolvimento, imagine a sempre o HTML separado do CSS e separado do JS. Pois desse jeito você consegue reaproveitá-los muito melhor.
Vendo assim já não faz sentido ids direita/esquerda no HTML, pois só com o HTML fica uma coisa embaixo da outra. Se você precisar fazer o “parsing” de alguma informação de qualquer site, aposto que você nem vai ligar pro CSS, e consequentemente não vai ligar pra um id direta/esquerda porque ele não agrega nenhuma informação útil. Mas pense bem, se o id fosse “menu” ou “navegação”, você não precisaria verificar a página inteira pra saber do que se trata cada coisa. É claro, para isso você precisa ser consistente, nos meus projetos sempre uso os mesmos id e classes, e por consequência consigo reaproveitar muitos dos css (que são totalmente diferentes visualmente) com pouquissimas alterações (mesmo pq não sou eu que os faço, pois sou craque em estragar layouts).
Um ponto que você deixou meio implicito é que o javascript só tem document.getElementById e não tem document.getElementsByClassName, mas nada impede você de implementar essa função, ou melhor ainda, usar uma biblioteca (jQuery por exemplo) que tem essa facilidade.
E Aecio concordo plenamente com você sobre o div “wrapper”, na verdade eu não gosto de layouts com muitos divs, alguns layouts tem tantos divs que é pior do que a versão com tabelas em muitos aspectos (gosto de chamar esses sites de divful), mas depois de muita discussões com os designers com quem trabalhei eles conseguiram me convencer que esse “wrapper” é inevitável, se você quiser manter a compatibilidade com o IE6 sem usar hacks.
E acho que essa discussão é válida, pois sempre tive interesse nisso e sempre é bom ouvir opiniões sobre o assunto.
Acelio, eu intendo o que você diz, até concordo em partes. mais eu ainda uso uma div geral porque realmente é inevitavel.
Outro exemplo da “precisao” de se usar tal div é a seguinte.
Se você quiser usar um position:absolute; em alguma div por exemplo, e quiser colocar ela a 10px do topo e a 30px da direita em relação a pagina? Existe várias maneiras, mas pra mim a mais viavel foi posicionar ela de acordo com a div “geral”.
Não to dizendo que essa é o único motivo de eu usar essa div, mais é um dos motivos e que realmente ajuda muito.
Muito legal o vídeo, acompanho o site a anos e sempre me acrescenta coisas novas!
Eu também, assim como alguns aí acima, gostaria de saber qual o programa que você usa, e se MAC* é muito melhor ou dá na mesma pra desenvolvimento web.
Detalhe foram removidas todas tags html hehehe então resumindo você colocou input dentro de label e não é a forma coreta de se fazer a semântica…. eles deve estar fora
Eu utilizei o conceito aqui apresentado no meu e-commerce que possui a mesma estrutura, e ocorreu um problema (que tambem acontece no seu):
quando o conteudo da lateral é maior que o do meio, o rodape nao fica onde deveria (em baixo como deveria ser).
eae!! deixa eu perguntar.. o firefox download day eh hj..
vcs naum vao anunciar num topico naum?
a brazil tah em terceiro lah no site.. quase chegando na polonia.. e a italia vem quente atras e ameaça passar o Brazil…
deêm uma força aí!!
Sou um “dinossauro” do HTML e tenho uma baita dificuldade em me livrar das tabelas, mas esse vídeo passo-a-passo foi muito didático! Vou experimentar num próximo projeto. Obrigado.
