CSS para impressão

[codercss 14]

Olá a todos,

Tenho andado a estudar CSS e estou adorar esta treta (treta no bom sentido da palavra :)

Pretendo criar um css para ser utilizado na impressão da página.

Preciso de fazer bastantes trabalho em word, ou writer (que é o meu caso). Pensei substituir a criação dos documentos em word ou libre office, para o html+css.

Questão que preciso de aprender:

1-Criar um css para ser utilizado no momento da impressão;

2-Consigo criar índices automáticos com php e numeração de páginas?

O ponto 2 é que me deixa na dúvida, pois o resto tenho consigo fazer com html+css.

Digam coisas, todas as criticas serão bem vindas, desde de que construtivas, pois claro! :)

Obrigado

[L. Henrique 179]

Codercss,

Vamos lá:

1. Sim, consegue. Leia esse tópico: http://tableless.com.br/dicas-de-css-para-impressao/ - Ele vai te explicar tudo sobre como criar uma página pronta para impressão. Você já deve ter visto ou ouvido falar sobre @media print?
2. Consegue, pra isso você pode usar uma condição for ou foreach.

Abraços!

[codercss 14]

Estou a criar o css para impressão do site. Mas estou a ter problemas com as propriedadess display: flex e overflow: auto. No css que utilizo para desenhar a página tenho display: flex para html e body, e dentro do body tenho a tag aside com width: 25%, overflow:auto e na tag main tenho width: 85%, overflow: auto.

Estas propriedades é para ter duas barras de rolagem, uma no aside e outra no main, que é onde tenho o conteúdo.

O que acontece é que a impressão não ocorre para a página toda, apenas consigo imprimir o que fica visivel na tela, quando o artigo, dentro do main, é muito comprido não imprime tudo.

Não sei qual propriedade é que pode estar a interferir com isso. Se é o display flex no html e body ou overflow ou então a propriedade height: 99%, que tive que definir para que o conteúdo ocupa-se a página toda na sua altura.

Estes são os parametros que tenho para as respectivas tags:

html,
        body {
            display: flex;            
            height: 99%;
            width: 100%;
            background-color: #EDEDED;
        }
       
         aside {
            width: 25%;
            overflow: auto;
            border-radius: 15px;
        }
 
         main {
            width: 85%;
            overflow: auto;            
            border-radius: 15px;
        }

Qual delas é que terei que contrariar para que a impressão de todo o conteúdo seja possível?

Para já o meu print.css está assim:

    body {
        color: blue;
        display: block;
    }

    aside {
        display: none;
    }

Obrigado