Topo e rodapé contínuos - CSS | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Topo e rodapé contínuos – CSS

Publicado na categoria Vídeo Aulas, Vídeo Aulas - Tableless com 22.301 visualizações e 101 comentários

Topo e Rodapé Contínuos - André Buzzo - Webdesign

Fala pessoas!!

Devido ao grande número de comentários em meu site, www.andrebuzzo.com.br, sobre como eu criei o topo e o rodapé que preenchem todo o monitor, mantendo o seu conteúdo centralizado, eu resolvi criar essa VA para sanar tais dúvidas!!

Como eu digo na VA, os mais experientes que me perdoem, mas estamos aqui para ajudar a todos!!

Espero que dúvidas sejam esclarecidas e fico a disposição nos comentários para quaisquer outras que possam surgir no decorrer da apresentação!

Forte abraço a todos, fiquem com Deus e até a próxima!!

Bons estudos!

Voltar à página anterior!

  • Fala Luciano!

    Cara, no arquivo CSS, lá no início, onde eu declaro o ” * body”, basta você colocar o background-color que você quer. Aí ficaria:

    * body {
    margin:0;
    padding:0;
    background-color:#000;
    }

    Abraços!

  • Bruno

    Eu to construindo um site, na verdade eu peguei um template pronto, entretanto eu inseri o rodapé de outra maneira, com div style e position, e quando eu vejo o site em outras telas menores que o meu Mac o rodapé quebra e não fica responsivo. Como faço para ficar de acordo?

    • Bruno, em layouts de terceiros, eu não dou assistência meu velho!

      Abraços!

  • Bruno

    Opa André, te encaminhei um email, assim fica mais fácil de eu te explicar.

    Abs

  • Bruno

    Bom dia André,
    To com um probleminha referente ao meu rodapé, pois não consigo deixa-lo responsivo, sendo que todo o restante do site funciona normal.
    Pode me ajudar?

    Abs

    • Fala Bruno!

      O que está acontecendo? Qualquer coisa me envia um e-mail cara …

      Abraços!

  • bruno moura

    André e ai fmz? bom parcero eu n entendo nada do nada de site, tipo eu estou mexendo na minha loja online, e tipo n consigo fazer algumas mudanças que a empresa na me da suporte. eu gostaria de mudar cores do rodapé do meu site e n consigo, até coloquei ele em manutenção , n consigo mudar nada do nada, e gostaria de uma ajuda sua

  • Lucy Harold

    Fala André!

    Ah, este site foi usado o mesmo esquema de sua aula.
    Eu precisava para um novo trabalho. E já consegui resolver sim! :D
    Valeu a ajuda!

  • Lucy Harold

    Adorei sua videoaula e o final foi mais que demais com a singela homenagem à “porcaria dos infernos” do IE! hahahha

    Estou apanhando com um rodapé que se alinha teimosamente à esquerda ou então quando “copio” um rodapé que funciona, este coloca o background láaa em cima no meio da página!

    hahahaha Tá fogo! Mas eu chego lá!

    Abraço e parabéns pelas dicas!

    • Fala Lucy!

      Acessei o site que deixou aqui como link e vi que já está com o topo e rodapé contínuos …deu certo então?

      Abraços!

  • Cleber

    Gostei do “porcaria dos infernos de navegador”(IE)! Suahsuhash, verdade. Às vezes são necessários racks para conseguir um simples menú dropdown. Valeu pelo TUTO.

    • Fala Cleber!

      O mundo seria um lugar bem melhor sem o Internet Explorer…

      Abraços!

  • Kristopher

    Po André obrigadão velho !!!! Foi de muita ultilidade.. ultilizei a mesma tecnica em uma div banner… e tambem no footer !!!! Muito Bom !!!! Qualquer duvida… pode ter certeza que voltarei a buscar no seu site !! Abraços!

    • Fala Kristopher!

      Eu que agradeço meu amigo! Sinta-se sempre bem-vindo! E se não achar algo no site, pode me perguntar via e-mail mesmo!

      Abraços!

  • Helder Abel

    Revelangola

  • Francisco Guerreiro

    Tal como disse lá fui eu com o coração nas mãos kkkkkkk
    Pela primeira vez fui validar o CSS e correu bem, estava sem erros

    pelo que estou no bom caminho, agradeço ao André e muitos outros que me teem ajudado nos meus conhecimentos, por enquanto sou apenas um curioso nestas andanças.
    Graças a muitos, poderei aprender
    Muito obrigado!!!

  • Francisco Guerreiro

    Gostava de saber se a solução que achei é a ideal ou nem por isso (fixar topo da página)

    #topoesticado {
    width:100%;
    height:150px;
    }
    #topointerno {
    width:984px;
    height:150px;
    margin:-22px auto;
    #top_int_conteudo {
    width:984px;
    height:150px;
    position:fixed;

    Pelo menos resultou kkkkkkk

    • Fala Francisco!

      Obrigado meu velho! Valide seu CSS no site da W3C. Se ele estiver sem problemas, sem problemas!

      Abraços!

  • Francisco Guerreiro

    Olá, estou a aprender agora via internet (comecei a 30 dias +-) e cheguei e vi o video, está espectacular obrigado.
    Mas andei 2 dias para conseguir meter o topo e rodape´ fixo kkkkkk
    Aprendi imenso!!!

    Abraços

  • Helder Abel

    Preciso tanto da vossa ajuda em colocar o rodapé no meu site:http:||Revelangola.com
    Agradeço a vossa ajuda.
    Obrigado.

    • Fala Helder!

      Desculpe meu amigo, mas não entendi o que você precisa. O endereço de site informado não abre página alguma.

      Poderia ser mais específico, por gentileza?

      Abraços!

  • Helder Abel

    Revelangola. Preciso da vossa ajuda em colocar o rodapé continuo no meu site.
    Vale-me muito para atrair os meus leitores.

  • Gisely

    Olá! Adorei as dicas, estou começando a desenvolver ( na verdade aprendendo ainda) e esta de topo e rodapé esticados é muito boa! Valeu pela vídeo-aula! ^^Sucesso pra ti!

    • Fala Gisely!

      Valeu moça! Sinta-se a vontade em sempre buscar conteúdo por aqui!

      Abraços!

  • lando

    só iniciante andrebuzzo já rodei a internet inteira a procura de como colocar top e footer 100% e essa video aula foi minha salvação vlw cara e obrigado.

    • Fala Lando!

      Que bom que pude lhe ajudar em algo meu velho!

      Abraços!

  • Fabricio

    Cara me socorre estava fazendo meu site como vc passou ai, acontece que quando diminuo a resolução diminuindo o navegador vai ficando um espaço todo em branco na lateral direita ai fiz uns testes e descobri que enquanto nao entra conteudo nas divs internas blz, apos incluir ai quando chega proximo ao conteudo diminuindo o navegador pronto explode espaco pra direita.

    • Fala Fabrício!

      Meu amigo, você tem como colocar um print screen disso?

      Abraços!

  • Vancley

    Andre,

    Ai fera, posta um tutor sobre a melhor e mais simples forma de alinha texto na vertical que seja compatível com todos os navegadores usando CSS3 e HTML.

    Valeu! Seu site é 10. Já faz parte da minha lista de favoritos.

  • João Vítor

    Olá, vídeo aula muito legal, mas eu fiz tudo certo porém, ficou um espaço nas laterais e topo acredito que este código não funcione nas atualizações dos novos navegadores ou não funcione no google chrome.

    • Fala João!

      Cara..veja direitinho o seu código que é para funcionar sim.

      Abraços!

  • Fábio

    Olá André, muito legal essa vídeo aula, show!

    Agora fiz tudo certo porém, ficou um espaço nas laterais e topo, o que pode ser?

    • Fábio, precisaria ver o código para poder analisar o problema …

  • Juarez

    Olha André muito bacana sua vídeo aula, gostei muito, ainda mais quando você utilizou o IE B…, quase me acabo de rir. Tô rindo até agora!!! RSRSRSRSRS

    • Hahahahaha…. é isso aí Juarez! Please die IE! rs

      Abraços!

  • Douglas

    Fala aew André, blz?

    Pow… assisti sua aula de Topo e Rodapé Contínuos – CSS e fiz tudo que você explicou para deixar o rodapé contínuo (só adicionei mais alguns comandos) e não está funcionando. Segue abaixo a div do rodapé do meu site.

    #footer{
    position:absolute;
    bottom:0;
    width:100%;
    background-color:#E1E1E1;
    border-top:1px solid #F00;
    }

    Errei em alguma coisa?

    Agradeço desde já!
    Abraço!

    • Fala Douglas!!

      Meu amigo, por favor, acessa o Fórum (http://forum.andrebuzzo.com.br) e posta o seu código lá cara…o CSS completo e o HTML…às vezes o problema tá no HTML e não no estilo!

      Abraços!

  • jg

    tentei colocar a div de conteudo com height auto para comportar conteudo dinamico mas ai o rodape subiu…

    que posso fazer Buzzo?

    • Fala Jg!

      Cara…usa o “div class = clear” para botar o rodapé em seu devido lugar!!

      Abraços!

  • leo

    Obrigado irmao André, Abraço!

  • leo

    Beleza fiz um codigo aqui bem simples pra entender melhor o que eu tenho que modificar, se puder me dar uma ajudinha :D

    teste

    #cabecalho{
    width:100%;
    height:75px;
    background-color:#3d5998;
    }

    #cabecalho2{
    background-color:#3d5998;
    position:fixed;
    border:10px solid #f00;
    width:990px;
    height:75px;
    margin:0 auto;
    }

    </html

    • Velho…. seguinte: deixa o “fixed” apenas no #cabecalho ….

      Abraços!

  • leo

    então eu fiz isso, mas o meu menu que é para ficar ao centro, cai totalmente para a esquerda, como se nao houvesse nenhum tipo de posicionamento. :(

    • Então Léo..mas aí tem uma “jogada” que conserta o menu!

      Ele precisa ter um width fixo para ficar centralizado! Você pode usar o “container” que vai segurar ele com 100%… porém, o menu precisa de width definido…deu pra sacar o que fazer?

      Abraços!

  • leo

    Então André, até ai esta show de bola, mas estou com uma grande duvida; eu quero que o meu topo sej afixo, ou seja independente de eu ir rolando a pagina o meu topo vai ficar la paradinho, eu consegui deixar ele fixo, porem ele sai do centro mesmo com o margin: 0 auto; como eu poderia fazer com que o meu topo fique fixo e centralizado??

    • Fala Léo!

      Seguinte cara…vc vai precisar com “position” para realizar esse tipo de coisa cara…. usar o 100% de width, e usar position, para fixar o topo e deixá-lo centralizado…

      Abraços!

  • Pingback: Desenvolvimento de Sites - André Buzzo - Balanço 2011()

  • Daiane

    Andre que show fico seu site…nao tinha visto ainda depois das mudanças….
    Parabens!!!
    Olha soh sera que pra variar pode me ajudar?
    quero fazer uma pagina dividida em 4 partes…
    e em uma das 4 chamar uma url direto….nas outras sao botoes de acesso…e nesse “pedaco” queria que aparecesse tal pagina…

    obrigado por inquanto

    • Fala Daiane!

      Obrigado pelo comentário!!! E é claro que eu posso te ajudar… só não entendi direito o que você deseja fazer….

      Abraços!

  • Antunes

    Parabéns pela video aula andré muitooooo boa você é d+.
    muito bonito isso que você faz compartilhar conhecimento admiro muito você.. abraços

    • Valeu Antunes!!

      Obrigado meu velho!!

      Abraços!

  • Geraldo

    Cara hipermega simples e eu tinha uma porrada de dúvida em respeito a esse tópico, Valeu…

    • Fala Geraldo!!

      Simples mesmo né? rs

      Obrigado pela visita!

      Abraços!

  • Jean

    Bom dia Andre, Muita Paz!

    entao eu assisti.
    mas deu os erros como ja tinha solicitado a sua ajuda.
    ele joga tudo para o lado esquerdo do navegador, mesmo vc colocando aquela tag que vc fala para ele interpretar o IE8.

    Como posso fazer para resolver o problema que fica tudo ao lado esquerdo?
    Mesmo vc colocando o cabeçalho completo do DOCTYPE, etc. etc… e ainda inserindo a sua dica, ele fica tudo alinhado ao lado esquerdo (risos…)

    Como devo proceder?

    No aguardo.

    Fica na PAZ!!

    Jean

    • Cara, faz o seguinte:

      Tente remover aqueles positions que você colocou no seu CSS!

      Abraços!

  • Andre, Muita Paz a vc!

    Bom, preciso de uma orientação sua mais uma vez! (risos…)

    Estou fazendo um arquivo em CSS com o rodape fixo no final da pagina, independente do conteudo do site.

    eu fiz igual ao que o Marcio postou no site da Video Aulas Brasil. O link da aula é:
    http://www.videoaulasbrasil.com.br/tableless/rodape-fixo-no-final-da-pagina-com-css/
    Ele faz na versao dos navegadores IE 8 e Mozilla (nao sei a qual) e fica certinho.

    Eu uso o IE 9 e mais a versao recente do Mozilla.
    Mas sai tudo quebrado.
    no meu futuro site: http://www.cleberjean.com.br/index.html la tem o arquivo feito igual na aula e so da erro.

    Teria como vc ver para mim?
    Preciso de sua orientação.

    Preciso mandar algum arquivo a vc?
    A div. que faz a separacao da esq. e da direita, nao funciona. o rodape tbm nao funciona.

    Por favor… Help-me! (risos…)

    Andre, Muita Paz, Luz e $uce$$o a vc!

    No aguardo.

    Jean

    • Jean, bom dia!

      Você chegou a ver a minha VA? Eu não assisti a do Márcio,e sendo assim, não sei como ele passou as maneiras para fazer esse tipo de marcação!

      Você viu a minha?

      Abraços!

  • Jean

    Amigo….. MUita Paz!

    Fiz confor sua instrução.
    Ficou show. coloquei na div “topoInterno. e deu certo.
    So que no Firefox autlizado rodou perfeito igual da sua video aula. mas no IE9 nao deu nada certo. ficou tudo ao lado esquero.
    Como posso fazer agora??

    Abraços.
    Fica na Paz!
    $uce$$o!!!

    JEAN

    • Fala Jean!!

      Coisas que só a Microsoft faz pela gente… o seu site não se comporta do jeito que deveria no IE 9? Então faz ele entender como se fosse o IE 8!!!

      Coloca essa linha de código dentro do HEAD do seu HTML:

      <meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

      Abraços!

  • Jean

    Fala amigo Andre, tudo bem??
    Muita Paz!

    Parabens pelo projeto deste site! É de muita valia isso!
    Dias atras em algum site eu pedi ajuda para vc sobre essa video aula e vc postou, so que eu nao conseguir visualizar qual era a correção.. etc.
    Eu fiz a video aula igual a que vc fez, mas nos meus navegadores IE( + Firefox (atualizado) fica tudo centralizado a esquerda do video. (o segundo topo) fica na esquerda).

    Como faço para corrigir isso??

    Amigo muito obrigado!
    Fica na Paz!!
    Muito $uce$$o!!!!

    Jean

    • Fala Jean!!

      Seguinte…na div principal, onde está segurando todo o conteúdo do site, basta você declarar a seguinte regra no css:

      margin: 0 auto;

      Abraços meu amigo, e obrigado pelas palavras!!

      Desejo o mesmo à você, em dobro!

      Até mais!

  • Ok muito obrigado

    Grande abraço!

    AT+++

  • Carlos Rodrigo

    Oi gosto muito das suas videos aula já assisti todas e nunca perco uma essa foi SHOW de bola embora eu esteja começando entrar no ramo de web designer já tenho projetos o primeiro eu já estou trabalhando estou fazendo um site que não use nenhuma imagem só os códigos mesmo assim tornando o o site mais leve e para me ajudar queria lhe pedir 1 único favor uma vídeo aula com você ensinando como criar um site totalmente em html5 sei que o html5 esta em desenvolvimento mas muitos já estão usando se puder fazer agradeço desde já ^^

    • Fala Carlos!!!

      Seguinte meu velho… eu tenho um “Especial HTML5” que pode ser acessado aqui:

      http://www.andrebuzzo.com.br/html5

      Estou estudando sobre o assunto, e assim que eu tiver algum conhecimento melhorzinho sobre o assunto, eu vou começar a criar VA´s sobre isso ok?

      Grande abraço!

      Até!

  • Filype

    Boa tarde Andre,

    Qual é o nome do vídeo no vimeo?

    Não estou conseguindo visualizar em sua página.

    Obrigado.

    • Fala Filype!

      Cara…é o mesmo que tá no site…. mas estranho você não conseguir ver o vídeo …

      Vou dar uma verificada…

      Abraços!

  • zeneto

    André muito show! Continua assim cara galera agradece muito.

    Abrass

    • Fala Zeneto!!

      Obrigado meu caro!!

      Abraços e até mais!

  • Jorge Ricardo

    Grande Buzzo, assiti a todas as suas videos aulas e compreendi tudo, inclusive fiz uns testes e deram certo, a minha bronca é como vou fazer isso nos sites que já fiz e estao no ar, pois fiz tudo em tabelas dividindo o conteudo e alguns menus, peço ajuda…
    os sites: http://www.interturismo.com.br, http://www.marolinda.com, http://www.hjconsultoria.com.br e http://www.imperialht.com.br.

    HELP!!!!!!!!!!!!!!

    valeu Camarada.

    • Fala Jorge…

      Então, seu caso, não tem muita solução não…rs…. infelizmente, você precisaria reestruturar todos os sites na unha, para transportá-los das Tabelas para o Tableless….

      O legal, é que você já tem toda a estrutura pronta, portanto, o trabalho será um pouco menor….

      Abraços!

  • Èmerson Miranda

    Cara seu tutorial ta maneiro … mas acho que sou o unico que nao consegui fazer. comigo nao deu certo fiz tudo como manda o figurino e nao funcionou dar uma ajuda.. <

    abraços!!!

    • Fala Émerson!!

      Cara…me passa o HTML e o CSS para que eu possa analisá-lo, por favor!

      Abraços!

  • Tiago Múrcia

    Valeu pela dica André!

  • Rodrigo Martinelli

    valew André, no aguardo!

  • Rodrigo Martinelli

    Opa, estou conhecendo agora seu site, achei bem bacana, teria como vc explicar como fazer o rodapé fixo no final da pagina, sem ele subir independente do tamanho do conteudo? baseado na video aula das 3 colunas clean.

    abraço e parabens

    • Fala Rodrigo!

      Interessante o pedido meu amigo!! Deixa sobrar um tempo aqui e monto essa VA ok?

      Abraços e obrigado pela visita e pelo comentário!

      Até mais!

  • Tiago Múrcia

    Salve André!
    Muito show suas aulas, venho acompanhando todas!

    To com uma pequena gigante dúvida: como fazer um slide show de imagens, tipo do mx cursos, mas eu queria mais assim: redesuper.com.br com os comandinhos em cima, e pá.
    De preferência em Java.

    To procurando isso faz muuuuuuuito tempo, mas nao acho nada,
    se puder ajudar, valeu!

    Abraço

    • Fala Tiago!! Tudo em ordem rapá?

      Seguinte…procure por um slider chamado “AVIA SLIDER“!!!

      Ele tem exatamente essas funcionalidades, porém, vem com as bolinhas na parte de baixo das imagens…mas nada que uma mexida no CSS do negócio não resolva…rs

      Abraços!

  • Marcio Castro

    brigadão

  • Jacson Leite

    Valeu André!

    Pow cara, que simples, fiquei até com vergonha de ter pedido essa VA, porém, como dizem os professores: A dúvida de um pode ser a dúvida de outros. Hehehehe…

    Uma outra pergunta(hehehehe)?
    É obrigatório o usso de 100% na width?

    Fica na paz! e muito sucesso em teus objetivos.

    • KKKKKK … que isso Jacson… como dizia um professor na faculdade…. “Não existem perguntas idiotas ou tolas… você pode aprender outras maneiras de se fazer o mesmo…” … rs

      E quanto à sua pergunta, sim…precisa usar 100% no width, pois aí ele pega a totalidade do monitor, indepentendemente de sua resolução, entendeu?

      Abraços e lhe desejo o mesmo, porém em dobro!!

      Até mais!

  • Marcio Castro

    Fala ai andre.
    Um ideia de video aula pra vc, fala sobre termos e tipos de efeitos mas usandos no mundo do webdesign.

    • Blz meu velho!!

      Vou providenciar alguma coisa do gênero!!!

      Abraços!

  • Marcio Castro

    tudo bem, suas aulas sao otimas para aprender as tecnicas de desenvolvimento não importando o software.

  • Marcio Castro

    Salve André Buzzo.

    Linda video aula, ja sabia um pouco de como criar esse efeito, mas com essa aula meus conhecimentos se fixaram de uma vez por todas nesse assunto.
    rsrsrsr!
    Pode rola aulas de inkscape????

    • Valeu Marcio!!

      Obrigado pela visita e pelo comentário sobre a Aula meu amigo!! Isso dá gás pra criar outras!! rs

      Quanto ao inkscape, cara, vou ficar lhe devendo… eu não trabalho com o programa!! rs … aí complica!

      Abraços!

  • Antonio Carlos

    Show estava mesmo com esta dúvida, valew brow contribuiu muito pra mim e pra galera com certeza.

    []´s

  • Emiliano

    Simples cara!!!

    Valeu mesmo. Prático e objetivo!!

    • Fala Emiliano!!

      Obrigado meu amigo!

      Abraços!

  • Thiago Cardoso

    Fala André?

    tudo beleza bixo?

    super show essa dica. bem parecido com aquele Super Tutorial de “XHTML 1.0 + CSS + Validação”. super 10.

    abraços

    • Tudo em ordem Thiagão!!

      Valeu compadre!!

      Abraços!