Jump to content
danicarla

Versão para impressão

Recommended Posts

Olá pessoas,

Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas,  O problema é que o conteúdo vem do banco de dados,  e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso?

 

Meu cód está assim:
 

header {font-family:Arial;font-size: 22px;color: #000;text-align: center;}
footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;}
article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;}
@page {size: A4;margin: 11mm 17mm 17mm 17mm;}
@media print {
header {position: fixed;top: 0;}
footer {position: fixed;bottom: 0;}
article {position: relative;top:40px;}
.content-block, p {top:40px;page-break-inside: avoid;}
html, body {width: 210mm;height: 297mm;}
}

E no HTML
 

<header>CABEÇALHO</header>
<article>Conteudo.. texto.. etc..</article>
<footer>Texto do Rodapé</footer>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By b2black
      Então, estou tentando criar um submenu com opções quando o usuário passa o link em cima da imagem, porém não estou conseguindo, qual é o jeito certo de fazer?
       
      Ao clicar no link (link-login) que é uma imagem colocada com css, abre um menu abaixo da imagem com 5 opções de link
       
      <div class="nav-container"> <nav> <ul class="desktop-nav"> <li> <a href="" class="link-logo"></a> </li> <li> <a href="">Charm Points</a> </li> <li> <a href="">Ranking</a> </li> <li> <a href="">Colaboradores</a> </li> <li> <a href="">Blog</a> </li> <li> <a href="">Eventos</a> </li> <li> <a href="">Suporte</a> </li> <li> <!--<a href="" class="link-search"></a>--> <form method="get" action="" class="search"> <input name="boxsearch" type="search-text" placeholder="" /> </form> </li> <li> <a href="" class="link-bag"></a> </li> <li> <a href="" class="link-login"></a> </li> </ul> </nav> </div>  
      .link-login { background: url('avatar.png'); background-repeat: no-repeat; display: block; background-position: center; background-size: 20px; height: 44px; width: 20px; } .link-login:hover { position: relative; display: inline-block; margin-top: 50px; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; }  
    • By b2black
      Estava vendo para atualizar o Windows pro 11, e notei isso no site da Microsoft, alguém sabe qual repositorio, ou como pesquisar para desenvolver algo similar?
      Quando você rola a página, o menu fica transparente.
       
      Explore Windows 11 OS, Computers, Apps, & More | Microsoft
    • By ferreiradealmeida
      Prezados(as), boa tarde.
       
      Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.
       
      Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:
       

       
      Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:
       

       
      Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:
       
      <div style="max-width:716px; max-height:200px; position:relative;"> <img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" /> <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;"> <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;"> <tr> <td rowspan="3" style="width:242px;"></td> <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;"> <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br> <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p> <p style="margin-top:-7px;">(16) 9 9373-2552<br> (16) 3421-7783</p> <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br> <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p> <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br> Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p> </td> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.facebook.com/adv.faf/"> <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:66px; text-align:center;"> <a href="https://www.instagram.com/faf.adv/"> <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.linkedin.com/company/faf-adv"> <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;"> </a> </td> </tr> </table> </div> </div> Serei grato se alguém souber o que ocorre e puder colaborar.
       
      Obrigado.
    • By 4Unknow
      Boa tarde pessoal, como estão?
       
      Gostaria de uma ajudinha aqui. A forma mais prática e com um layout bacana, um pop-up toda vez(ou não) que o usuário abrir o site, um informativo que é importante.
      Tenho um site que vende algo muito específico e preciso deixar claro sobre meu produto como um informativo. Ou um banner/popup que abre quando o usuário entra no site para deixar claro.

      Ou um footer bonito que deixa claro essa informação.

      Se alguém tiver uma ideia ou puder ajudar, eu agradeceria.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.