Esta é a área de topo. Ela tem margens (externas) negativas acima, à esquerda nem à direita, anulando a margem da página para ficar rente à borda da janela. Tem também magem interna (padding) nas laterais para afastar o texto da borda.
Ideal para barra de título na forma de um banner.
Esta é uma área adequada para um menu horizontal, anulando as margens esquerda e direita da página. Neste exemplo, ela não sai na impressão.
Aqui fica a coluna da esquerda, de largura fixa, que pode ser usada para menu de atalhos, índice, informações adicionais etc.
Neste exemplo, ela não sai na impressão.

Colunas e faixas em CSS: Impressão

Márcio d'Ávila, 12 de outubro de 2004. Revisão 1, 9 de julho de 2005.
Categoria: Internet: Cliente: DHTML

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.


Firefox - A web de volta
Creative Commons License

© 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.