Criando um layout com CSS a partir do zero – Parte 12/12

Publicado: 11/07/2008 em Internet, Programação, WebDesign
Tags:, , , , , ,

Obrigado por prestigiar este tutorial. Que tal visualizá-lo melhor? Criei um site especificamente para isso. Visite www.hpmachado.com.br/tutorial-de-css e confira. 🙂

Anúncios
comentários
  1. Primeiramente, parabéns pela tradução! Também estou envolvido com tradução de material sobre desenvolvimento web, e sei que não é nada fácil. Esse é um ótimo tutorial, e é muito bom tê-lo disponível em português.

    Tenho uma sugestão: cria uma página com link pra todas as partes, fica mais fácil pra quem tá acompanhando não se perder e pra quem deseja linkar o material.

    Obrigado! 😉

  2. ZehRique disse:

    @Elomar França: Obrigado pela visita a este humilde blog. Realmente, traduzir textos técnicos (ou quase) de qualquer língua não é fácil. Eu demorei tanto para deixar a série completa por questões pessoais.

    Quanto ao tutorial, é mesmo fantástico. Tanto que, como você pode observar na primeira parte, pedi autorização do autor para reproduzi-lo em português e a proposta foi muito bem recebida.

    Sobre sua sugestão, conte comigo: Vou montar a página o quanto antes!

    Um abraço.

  3. Nathan disse:

    caraa!!

    muito bom!!

    parabens!!

    me ajudou muitoo!!!

  4. ZehRique disse:

    @Nathan: Fico contente que o tutorial do Steve Dennis tenha lhe ajudado. E aguarde mais dicas e tutoriais traduzidos.

  5. Daniel disse:

    Parabens pela continuidade do trabalho.
    Mu ajudou muito, ja estou quase terminando meu site usando css, e se nao fosse esses tudoriais que vc postou, eu nao teria nem começado.
    Ate mais.

  6. ZehRique disse:

    @Daniel: Legal! Sua mensagem é muito gratificante. Obrigado por me prestigiar.

    E sinceras desculpas a todos pela demora em concluir a tradução.

  7. Danilo Porto disse:

    fera… brigadão ai pela ajuda em CSS!!

    esse foi o prrimeiro site q deu conta de explicar com detalhes o css!!

    me ajudo bastante!!

    abração ai!!
    Deus abençoe vc!!

  8. ZehRique disse:

    @Danilo: De fato, o tutorial é excelente. Espero que você use da melhor maneira os conhecimentos adquiridos. Deus o abençoe também!

  9. Marianna disse:

    Obrigada por postar esse tutorial tão completo.
    Abs

    Mari

  10. Neroer disse:

    Primeiramente muito obrigado pelo tutorial, me foi muito útil.

    Mas infelizmente a omissão de algumas descrições de algumas tags fizeram com que não conseguisse finalizar o layout no final do tutorial.

    imagem do background da header e o menu não consegui finlizar, e sinto que falta algumas informações para que se possa concluir. Não estou lhe cobrando e sei que vc fez essa tradução com muita boa vontade e se nós quisermos terminar este tutorial que vamos estudar!!! (hehe)

    Mas seria interessante que vc colocasse o link do tutorial em inglês para que possamos nos basear!!!! Mas de qualquer forma, OBRIAGADO.

    • ZehRique disse:

      @Neroer,

      Obrigado pelo elogio e quanto às suas dúvidas, abaixo seguem alguns links:

      * Descrições das Tags você pode encontrar aqui. É um site totalmente em inglês, mas completo;
      * O tutorial está baseado nas palavras do autor. Tentei ser o mais fiel possível às suas palavras. Mas se você ainda tem dúvida sobre as informações para concluir o cabeçalho (header) e o menu, entre em contato por e-mail. Quem sabe consiga ajudá-lo?;
      * O link para o tutorial em inglês está na primeira parte. Acrescentei o link ao nome do tutorial para facilitar tanto a você quanto a quem for chegando. 🙂

  11. eddyj disse:

    olha ,eu não tô conseguindo colocar as cores certas,,
    no

    main-nave,header,fooder,sidebar-a,content,
    eu tô fazendo igual ao tutorial mais não tá dando certo.
    me ajudem por favor,,
    um abraço..

    • ZehRique disse:

      Eddyj,

      Por favor, tem como você colar fazer um novo comentário em texto puro, ou enviar um e-mail para o endereço citado na página principal do blog, anexando o arquivo .css que você criou para que eu possa analisar e responder?

      Um abraço e obrigado pela visita.

  12. Farley disse:

    Ótimo trabalho. Senti falta de ver o site funcinando. Está entre a matéria e eu não vi? Poderia ser um link no lugar da imagem do site.

    • ZehRique disse:

      Olá, Farley.

      Obrigado pelo comentário. O site não existe em lugar algum da web, se não me engano.
      O propósito do autor do tutorial foi somente explicar os conceitos da programação para a Web usando CSS. Mas a sugestão é benvinda e vou verificar se um domínio grátis que registrei ainda está em funcionamento. Se estiver, colocarei o site no ar. Mas antes farei um comunicado, avisando se o autor do tutorial permitiu a criação do site completo.

      Um abraço.

  13. Eric disse:

    Parabéns, ótimo arquivo nos ajuda nas coisas mais simples mas que requer muita atenção, a programação de site tem de ser algo feito com concentração e suor.
    Ta muito bom parabéns.

  14. cara esse tutorial me ajudou mais ainda a entender a questão de posicionamento com css. Só tem um problema o meu Menu não apareçeu 😦 Mas show o Tutorial

    • ZehRique disse:

      Samuel,

      Desculpe a demora em responder, mas leia meu comentário para o Yuri, abaixo. Devo ter cometido algum erro ao subir as imagens para o blog e quando você as salva em disco, elas vêm com nomes trocados.

  15. Yuri disse:

    Nossa, parabéns, adorei o tutorial! Foi sem dúvida o melhor que eu já vi sobre CSS, estava há muito tempo procurando por um! ^^
    Só não consegui fazer aquele lance do menu que abre imagens, mas eu usei outro método que é quase igual, que eu já sabia usar =)
    E eu tenho uma dúvida =/
    Nesse site que você usou de exemplo, o fundo é branco que nem as partes do ‘content’ e da ‘sidebar-a’, e então aquele fundo, que originalmente era de outra cor, fica branco também, mesclando com o content e a sidebar-a, mas o que eu fiz o fundo é escuro, e essas áreas são brancas, então quando acaba o texto de uma das duas, essas áreas acabam, e fica aquele “buraco” lá, aparecendo o fundo escuro. Queria saber se tem como fazer essas áreas alongarem até o footer, sem precisar de texto, para que fiquem sempre com o mesmo tamanho.
    Obrigado mais uma vez pelo tutorial incrível! Parabéns =)

    • ZehRique disse:

      Olá, Yuri.

      Obrigado pelos elogios à tradução do tutorial.
      Quanto aos problemas que você enfrentou:
      * No menu, você deveria ter copiado as imagens e nomeado elas como: about.gif; contact.gif; portfolio.gif e services.gif para que estas aparecessem corretamente.
      2. Quanto ao problema das duas div’s content e sidebar-a, você pode tentar fazer o seguinte no arquivo master.css:
      * No seletor #sidebar-a adicione a seguinte linha:
      min-height:500px;
      Você pode aumentar o valor desta propriedade o quanto quiser.
      * No seletor #sidebar-a .padding adicione mais uma linha também:
      min-height:inherit;

      Porém, lhe adivirto que esta técnica não é 100% garantida, mas durante meus testes usando o Firefox, a página se comportou bem ao alterar tamanho o texto várias vezes.

  16. Pedro Felipe disse:

    Parabéns pelo tutorial… muito bom mesmo… aprendi muito.
    só estou com o mesmo problema que o Yuri.
    ja verifiquei os nome e ta td ok.
    na barra de navegação aparece os links

    About
    Services
    Portfolio
    Contact

    um em cima do outro e sem as imagens.

    se tiver alguma dica, ficarei agradecido..

    mais uma vez parabéns..

    • ZehRique disse:

      Olá, Pedro.

      Obrigado pelos elogios.

      Quanto à questão das imagens que não aparecem, resolvi em parte. Repare que ao salvá-las para sua pasta de trabalho, elas tem que obrigatóriamente estar nomeadas de acordo com o texto personalizado: ABOUT → about.gif, SERVICES → services.gif, PORTFOLIO → portfolio.gif e CONTACT → contact.gif.
      Já o posicionamento, confira seu arquivo master.css com as regras do tutorial. Pode ser que você tenha cometido algum deslize. 😉

      Espero ter esclarecido sua dúvida.

  17. Mauricio M Filho disse:

    Bom, em primeiro lugar quero agradecer e da os parabéns por esse seu trabalho de tradução, ficou muito bom a explicação, aprendi muito.

    Sobre o menu, aqui tambem não consegui fazer o mesmo funcionar, as imagens não aparecem de forma alguma. já verifiquei a questão do nome das imagens, mas esta tudo certo. Já não sei mais o que fazer.

    Abraço.

  18. Gostei muito dessa série! Estava precisando entender como funciona uma propriedade CSS e aprendi muito mais do que esperava, obrigado!

    Que Deus o abençoe!

  19. vinijae disse:

    po muinto bom, parabens!

  20. ZehRique, primeiramente parabéns pela tradução e paciência pela publicação dela, que DEUS continue te dando essa graça irmão, você não sabe o quanto abençooe minha vida com esse material.
    Que DEUS continue te abençoando muito vélhinho.

    Meu site vai entrar no ar graças à este tutorial…

    😛

    • ZehRique disse:

      Olá, Marcelo.

      Muito obrigado pelo comentário. Você não sabe o quanto estas pequenas ações incentivam e nos mostram que estamos no caminho certo.

      Grande abraço e sucesso com seu site.

  21. kennet disse:

    Olá,

    ótimo tutorial, era exatamente este tipo de tutorial que eu procurava. Baixei diversas apostilas, fui em vários sites. porém, só aqui encontrei o que eu queria. Um tutorial passo-a-passo de como criar um layout com css.

    Muito Obrigado.

    Antes não tinha idéia de como começar a estudar css, porém, este tutorial me ajudou muito a entender css.

    Obrigado cara, ótimo site.

  22. Fabio disse:

    Muito legal, parabéns.
    Eu também tive o mesmo problema de alguns comentaristas acerta dos botões do menu que não apareceram. Entrei no site do autor e não consegui também achar o erro.
    Solucionei da seguinte maneira, ele deixou a pagina que ele fez no ar, fui lá e copiei o CSS, aí pronto.
    Parabéns pela iniciativa.

  23. Saul Alexandre disse:

    Excelente, meus parabéns!!!

    Me ajudou muito!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s