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.