Site em Tableless – Parte 5
De volta ao trabalho pessoal! Depois de muitos projetos, enfim consegui continuar esse maravilhoso especial sobre Tableless. Se você está começando agora, será essencial pegar as primeiras partes.
Criação da Lateral?
Como já virou hábito, abra a estrutura.css. Primeiro vamos criar a div lateral
Vimos uma nova tag (float). Ela tem a função de flutuar a div para a esquerda ou direita. Preste atenção também na largura. Declaramos que ela teria 190px, mais temos os atributos da borda e espaçamento, no qual ela fica no resultado final com 200px. É fundamental observar isso na hora da criação do layout.
Também declaramos que nossa div terá posição relativa. Usei isso para evitar bugs no Internet Explorer em relação aos outros navegadores. Você que daqui em diante trabalhará com CSS em seus projetos, terá que conviver com esses problemas de renderização entre os navegadores.
Criação do Conteudo
Diferente das partes anteriores, vamos continuar a criar as divs restantes no arquivo css, só depois vamos inserir na index.html. Então mãos a obra:
Simples, declaramos os atributos da margem, depois definimos que em cada parágrafo na div conteúdo teremos um recuo da esquerda de 20px. Depois justificamos o texto.
Agora observe, abri a div conteúdo de novo, mas dessa vez coloquei a tag p (parágrafo) na frente. Quer dizer que editaremos o parágrafo somente na div conteúdo.
Com isso declarei que não teremos margem nos parágrafos dentro da div conteúdo. Simples, né?
Criação do Rodape
Continuando:
Opa! O que é clear? Ela serve para limpar os espaçamentos da flutuação das divs anteriores.
Declarei o atributo right pois na div lateral declaramos flutuação a direita. Com isso ela fica abaixo da div lateral e conteúdo.
Inserindo as divs na página
Pronto! Agora vamos inserir as divs na página index.html, na seguinte ordem: lateral, conteudo e rodape. Olha como deve ficar o código-fonte da página:
Veja o resultado:
Estamos terminando galera! Na próxima parte vamos fazer uma conclusão do nosso estudo. Você já pode inserir conteúdo, imagens, filmes em nossa página. Apenas respeite a largura de cada div.
Deus abençoe vocês!!!
Escrito por Luiz Gustavo
on julho 8, 2008. Arquivado em CSS.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Eaii Gustavo!!!
Velho.. acho que houve um engano… Onde era pra estar a imagem com as tegs do menu conteúdo, você linkou a imagem do html…
Pode arrumar isto pra nós?
Muito bom este seu tutorial! Me ajudou horrores.
Abraço.
Cauê
Olá Luiz,
Tá bem legal esse tutorial, mas na parte criação conteudo a imagem q vc utilizou parece não estar correta, com isso o meu aki está ficando errado.
gostei bastante das dicas agora se possivel gostária de saber se vocês podem ou tem algum pdf ensinando flash pois estou com dúvidas e gostária de saber criar animações em banner ou outros atributos espero respostas.
UFA!!
Problema resolvido galera!!
Luiz Gustavo beleza com esse teu tutorial estou aprendendo muito com ele, mais tem um problema o meu layout não fica bem organizado conforme esta na imagem tem algum segredo para tal
O dedicação em! valeu Luiz Gustavo! Sucesso pra você…
Mete ficha neste CSS! Estou aprendendo afú contigo!!
Abraço
Fala Vivaldo!
tem segredo não irmão.
Testei no IE, Firefox e Safari e
funciounou certinhu.
Verifque seu código-fonte da página e do arquivo css.
Abraço
Mais uma vez, obrigado cara!
Ficamos agora ansiosos pela conclusão do tutorial!
Muito obrigado mesmo!
Fala Ivan
Aqui no site tem matérias em Flash.
Na web então tem variedades de sites que oferecem cursos online.
Agradeço a todos que estão apoiando!
abraço
Matéria de responsa, to começando na área e com certeza to aprendendo muito. Valew pela sua paciência em ensinar os que estão começando.
i ae Luiz!!
pô veio muito maneiro o tutorial
perfeito, vc simplificou bastante agora esta bem simples de se aprender CSS…
abração cara.
to no aguardo da ultima parte né!
Luiz, sou iniciante no assunto, mim tira uma duvida cara e se possivel da um toque como que faz.
Cara tem como eu abrir um link em uma div?
da mesma forma que abro um link numa frame, tipo assim
so que abrindo numa div, sem precisar sair da pagina , atualizando só a div.
?
obg cara e desculpa ae o encomodo.
Tem sim Emerson. Só que abordaremos não só CSS, mas também Javascript.
Vamos estudar depois. Masna web você acha isso fácil.
Um abraço.
Luiz Gustavo parceiro!
como que eu procuraria isso ae na rede?
da uma força ae cara.
obrigadão pela atenção parceiro!!
Caro gustavo tem como eu aumentar mais uma lateral debaixo da lateral que já foi feita?
Olá,
Como deve-se fazer para o menu ficar colorido com letras brancas? Quando insiro o link fica uma tarja branca escondendo a cor do menu.
Obrigada!
Olá Vivaldo. Não entendi sua pergunta.
Olá Cládia! Provavelmente você alterou a função background-color. Para deixar a cor branca, você terá q colocar #FFFFFF, na função color.
Caro Luiz Gustavo beleza, a minha pergunta é se tem como colocar dois menus laterais e como faço para remover a cor azul dos links.
Powww kra que legal teu artigo, gostei + tb por seus comentarios perfeito ..
Muito bom…
mas pra quem está aprendendo.
De qualquer forma, gostei muito dos 5 artigos.
Parabens!
ESTA MEIO APAGADO AS TABELA PRA COPIAR FALTA APENAS ESSE PRA MIM AS TABELAS LATERAIS VALEU ..
O luis tudo bom parabéns pelo trabque vc postou ai muntobom ,entaum cara eu estou comum probleminha eu fiz o tablelles ficou otimo mais eu queria que a pagina fica-se centralizada , ela esta no canto d tela como eu posso por ela no centro juntos com as divs da tabelas ..abraço ..
Parabéns pelo tuto, ficou facil, prático.
Espero a 6ª parte.
abraco
Rafael, da uma olhada no BODY do CSS pois é lá que centralizamos.
abraco
Luiz, estou tentando fazer os links tentando abrir dentro da DIV conteudo mas nao estou conseguindo.
como eu faco isso?
abraco
Você teria que dispor de um script que faria a div carregar na mesma página.
Vamos estudar isso depois.
Um abraço.
Caro Luiz Gustavo tem como colocar dois menus laterais e como faço para remover a cor azul dos links.
Para remover a cor azul dos links faça o seguinte:
a {
color: ;
}
Caso queira remover tambem o sublinhado o codigo é o seguinte:
a {
text-decoration: none;
}
flow
E como faco pra dividir uma div em 3 colounas.
Abracao.
ae luiz,vc tá de parabéns,,
me ajudou muito..continue assim
um grande abraço,,
“fique com DEUS”
belo tutorial LUIS, me ajudou muito brigadão, agora só no css do rodape que n deu muito bem com o valor “TOP”, ai eu tirei e alterei o valor do “PADDING” ai ficou perfeito, abração e sucesso!
Olá? muito bom o tutorial eu fiz tud. como ta no codigo css , mas a lateral não ficou alinhada com o div do conteudo eu tentei de tudo mas não houve jeito.
Ah, conssegui resolver….muito facil, foi erro meu na hora de definir os divs do conteudo e lateral..
otimo tutorial.
continue !!
Muito bom tutorial,antes só usava template para fazwer sites, comprei um curso sobre tableless mas mesmo assim não conseguia aprender, mas com seu tutorial aprendi muita coisa…
foi muito bom esse tutorial…