1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

problemas media print css

Discussão em 'Web Development' iniciada por alfinete, 7 de Março de 2008. (Respostas: 7; Visualizações: 3250)

  1. alfinete

    alfinete Power Member

    pus este code no css coorespondete ao form em causa que vai ser chamado na respectiva div para inibir os botões do form

    no qual funciona em tdos os browsers excepto no ie6.



    Código:
    @media print {
    
          .onlyprint
          {
          display: block;
          visibility: visible;
          }
          .noprint
          {
           display: none;
           visibility: hidden;
          }     
    }

    gostava que me ajudassem pq
     
  2. hYpe

    hYpe [email protected] Member

    Honestamente não sei..

    Mas fiquei curioso sobre essa forma de organizar a CSS, que nunca tinha visto.

    Imagina que queres usar a classe .noprint, como é que o fazes (sim, sou preguiçoso e não quero ir testar).

    Cumps

    EDIT: E o que faz a @ ?
     
  3. alfinete

    alfinete Power Member

    chamas no botão ou na div tipo

    Código:
    <button id="btnimprimir" class="noprint" value="imprimir"  onClick="window.print();></button>
    <div class="noprint"></div>
    neste caso ao clicares no botão ele chama a janela de impressão e ao imprimir , na impressão não mostra nem o botão nem a div nem qualquer outro obj que chames a class noprint

    mas isto funciona em tdos os browsers excepto no ie 6
     
  4. alfinete

    alfinete Power Member

    ou fazes assim ao inicio da page html

    <link rel="stylesheet" type="text/css" href="style-impressao.css media="print"/>

    ou assim no css

    Código:
    @media print 
    {
    
    .impressao
    {
    }
    }
    
    sobre um ponto de vista @media print é uma classe css onde podes criar novas classes

    so especificas para a impressão, mais ou menos isso

    mais ajudas sobre os media tipes

    http://www.oficinadanet.com.br/artigo/84/css_e_suas_media_types
     
    Última edição: 7 de Março de 2008
  5. hYpe

    hYpe [email protected] Member

    Ah..

    Já percebi.. Eu sei xHTML relativamente bem, mas nunca surgiu oportunidade/situação em que precisasse de usar isto.

    Obrigado pelo esclarecimento.

    Em relação ao que estás a tentar fazer, provavelmente deve haver hacks...

    Do estilo do * / > / _ ;)
     
  6. alfinete

    alfinete Power Member

    hacks explica?
     
  7. p3dro

    p3dro Power Member

    off-topic

    @ significa "at-rule"

    Também uso raramente o @

    Por ex.
    Código:
      <style type="text/css" media="print">
          .onlyprint{display: block;visibility: visible;}
          .noprint{display: none;visibility: hidden;}
      </style>
    
    vai fazer o mesmo que isto
    Código:
      <style type="text/css">
        @media print{
          .onlyprint{display: block;visibility: visible;}
          .noprint{display: none;visibility: hidden;}
        }
    
    Ou com o alfinete já tinha dito podes usar o <link>
    Código:
    <link rel="stylesheet" type="text/css" href="style.css" media="print" >
    ou o @import
    Código:
      <style type="text/css">
        @import url("style.css") print;
      </style>
    
    Basicamente o @import será um "include", em vez de estares a escrever dentro do <style> todo o código css.
    Enquanto o <link> é uma tag html que te permite fazer várias coisas, o @import será mesmo especifico css, também podes usar para "esconder" o código de browsers mais antigos que não suportam (há vários hacks também para isso).

    Acho que é isto, espero não estar a induzir ninguém em erro.


    on-topic

    O teu problema é o evento onclick não funcionar ou os objectos aparecerem sempre quando fazes print?

    Não estou a ver qual é o problema, se por ex. eu fizer isto
    Código:
    <html>
    <head>
      <style type="text/css">
        @media print{
          .onlyprint{display: block;visibility: visible;}
          .noprint{display: none;visibility: hidden;}
        }
      </style>
    </head>
    <body>
      <div class="noprint">
        Inside DIV, this should only appear when printing ...
      </div>
      <button id="btnimprimir" class="noprint" value="imprimir" onclick="window.print();">Imprimir</button>
    </body>
    </html>
    funciona bem no IE6.


    Se por ex. tiveres esse código num ficheiro externo e fizeres
    Código:
    <link rel="stylesheet" type="text/css" href="style_print.css" media="print" >
    também não funciona?

    Tenta colocar aqui mais código da página, pode ser que alguém te ajude e consiga ver melhor o problema
     
    Última edição: 8 de Março de 2008
  8. hYpe

    hYpe [email protected] Member

Partilhar esta Página