CSS para impressão

[ericolvr 0]

Boa tarde, pessoal nunca escrevi um CSS para impressão.

*{ margin: 0; padding: 0; list-style: none; background: transparent;}
body{ text-align: center; background: #FFF;}

a{ text-decoration: none; color: #000; }

#geral{
margin: 0 auto;
text-align: left;
width: 714px;
background: #FFF;
}

#topo, #barra,  .bem-vindo, .local, #esquerda{ display: none; }

#conteudo{ width: 714px; height: auto; }
#direita{ width: 714px; height: auto; }

.barra-direita{ 
   width: 714px;
   height: 150px;
   background: url(../images/logotipo.jpg); }
#conteudo-acoes{
width: 714px;
height: auto;
}
table, tr, td{ font: bold 11pt Verdana, Arial, Helvetica, sans-serif  color: #000; border-collapse: collapse; padding:0 0 0 10px; }

 

Estou setando como display: none as #divs e .class que naão quero que aparecam, ate ai beleza.

 

Essa class .barra-direita tem outro estilo no meu css media/screen, é possível eu sobrescre-la no css ptint para que tenha outra aparencia?

estou tentando aqui, mas nao rola.

 

Grato

[Vinicius Weber 0]

sim, voce pode escrever novamente e colocar um !important no css.

[ericolvr 0]

uhn, vou tentar valeu.

 

uhn, vou tentar valeu.

 

Não funcionou,aparece em branco, nao imprime a .class.

.barra-direita{
   width: 714px !important;
   height: 150px !important;
   background:  #0066CC !important; }

[Vinicius Weber 0]

como voce definiu ela no seu site? pode ser tambem por nao ter float e position

[ericolvr 0]

como voce definiu ela no seu site? pode ser tambem por nao ter float e position

 

 

ela tem um float: right no outro css, engracado que se a coloco como display: none, o relatório sobre, eliminando o espaço que ela ocupa.

[Vinicius Weber 0]

sim, se voce jogar display none; ele provavelmente some.. joga um position:relative tbm nele e ve se aparece.

 

esse float right voce que que ele alinhe mesmo a direita?

[ericolvr 0]

no meu css de exibição ela esta assim:

.barra-direita{
float: right;
margin: 0;
width: 900px;
height: 50px;
background: #E6E6E6;
font: 12px "Trebuchet MS", Verdana, serif;
color: #222;
}

 

e no print:

.barra-direita{
position: relative !important;
width: 714px !important;
height: 150px !important;
background-color: #E6E6E6 !important;
}

 

Inseri uma div com um display: none,e no css print display: block!important;

Não rolou.

[Evandro Oliveira 331]

Veja o que casa com o que foi definido no CSS padrão e o que deve ser alterado. Para retornar a valores padrão (como o float, por exemplo) você deverá especificar.

 

Faça uso da especificidade da cascata também. Importe a CSS de impressão depois da CSS geral.

 

 

tente desta forma:

 

@media print {
   .barra-direita {
       float: none; /* não queremos flutuar, marcamos o valor padrão */
       width: 714px;
             height: 150px;
   }
}

 

Percebe que, como não vamos substituir a cor de fundo, não declaramos nada?

 

Atente para o detalhe das preferências de impressão, se está marcado para imprimir cores e imagens de fundo.

 

 

 

 

[Paulo de Tarso F. M. 24]

Se você quiser trabalhar com dois CSSs diferentes, utilize o atributo media="screen" para os browsers e um media="print" no CSS de impressão. Dessa forma, as regras não precisam ser "anuladas", em contrapartida, terá que reescrever todo o CSS. Mas aí cabe a você decidir o que é melhor...

 

 

:joia: