Colunas e faixas em CSS: Impressão

Como aplicar corretamente estilos CSS para definir áreas do conteúdo (definidas com elementos DIV) como colunas e faixas, sem recorrer ao uso de tabelas. Este documento define um leiaute em duas colunas, acrescido de uma faixa de topo e outra faixa horizontal logo abaixo, demonstrando boas práticas e técnicas de uso de estilos CSS.

O toque extra deste documento são as definições de estilo adicionais específicas para a impressão.

Neste exemplo final, a faixa horizontal logo abaixo do topo passou a ser chamada barraMenuHorizontal, e a coluna da esquerda renomeada para barraVerticalEsquerda. Ambas foram consideradas aqui como elementos de interface na tela e, portanto, excluídas da impressão graças a um estilo CSS: definir a propriedade display com o valor none.

Como a margem esquerda da coluna principal (aqui renomeada para conteudo) havia sido definida apenas para dar espaço à coluna esquerda, definimos também no estilo para impressão esta margem de volta ao normal como automática.

Também optamos por eliminar o fundo do documento (BODY) e colocá-lo transparente durante a impressão (para o caso de estar configurada no navegador a opção de imprimir cores e texturas de fundo).

@media print {
	div#barraVerticalEsquerda, div#barraMenuHorizontal {
		display: none;
	}
	div#conteudo { margin-left: auto; }
	body#duasColunas { background: transparent; }
}

Experimente visualizar a impressão (ou mesmo imprimir) este documento para ver os efeitos dos estilos adicionais definidos.

Retornar para o exemplo inicial de Colunas e Faixas em CSS.

© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.