Mostrando postagens com marcador css. Mostrar todas as postagens
Mostrando postagens com marcador css. Mostrar todas as postagens
sexta-feira, 29 de fevereiro de 2008

Escolher o que imprimir com CSS

CSS oferece uma forma de selecionar o que imprimir em uma página, ou seja, quais quadros você deseja imprimir.

Isto é definido pela tag @media print. Dentro desta tag você coloca as DIVs que não deseja imprimir. Por exemplo, após ter definido a folha de estilo para seu site, dividido em cabeçalho, conteúdo e rodapé, você pode definir quais DIVs poderão ser impressas. Caso queira que somente o conteúdo seja impresso, a definição de @media print ficaria assim:

@media print 
{
#cabecalho { display: none; }
#rodape { display: none; }
}
Neste caso, impede-se o cabeçalho e o rodapé de serem impressos, ficando apenas o conteúdo!

O Internet Explorer leva em conta não a altura indicada de um elemento, mas sim as alturas dos elementos desse elemento.

Com o código abaixo é possível fazer com que a altura indicada em porcentagem para uma DIV seja respeitada no Internet Explorer, ou seja, se uma DIV é pra ter 100% de altura, então ela terá!

Testei este código no Internet Explorer, Firefox e Opera, funcionou em todos. Provável que funcione para qualquer nevegador.

<style type="text/css">
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#camadaTeste {
min-height:100%;
height:auto;
width:100px;
background:#FFCC00;
}
/* Para Internet Explorer */
* html #camadaTeste {
height:100%;
}
</style>

<div id="camadaTeste">Conteúdo</div>


UPDATE

#camadaTeste: removida a propriedade height:100% e acrescentada min-height:100%; height:auto;
Acrescentada a correção para casos de conteúdo extenso que necessitem de redimensionamento automático:

/* Para Internet Explorer */
* html #camadaTeste {
height:100%;
}


Valeu "Anônimo" pela observação!

Utilizando folhas de estilo CSS é possível centralizar uma DIV verticalmente e horizontalmente na tela, independente da resolução que está sendo usada. Segue o código e posteriormente a explicação.

#idCamada {
background:#FF0000;
position:absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-300px;
width:600px;
height:300px;
}


Com o código CSS acima é possível centralizar horizontalmente e verticalmente uma DIV. Basta criar a DIV <div id="idCamada">Conteúdo</div>.

A margem esquerda margin-left deve assumir o valor negativo da metade da largura width, ou seja, como width é 600, margin-left assume o valor -300. O mesmo se aplica à margem superior margin-top em relação à sua altura. Sendo a altura 300, margin-top assume o valor -150 (atente para o valor negativo).

quinta-feira, 13 de dezembro de 2007

Formatando Input baseado no seu tipo com CSS

Quando se define um formato para um tipo específico de elemento, todos os seus descendentes irão ficar com a mesma formatação. Isto ocorre, por exemplo, no formato input. Quando se define uma formatação para este elemento, todos os demais que se originam deste (button, checkbox, file, hidden, image, password, radio, reset, submit e text) irão ficar com a mesma formatação, ou seja, se eu defino uma borda de 2 pixels para um input, todos esses demais elementos ficarão com uma borda de 2 pixels.

input { border: 2px; }

Para resolver isto, usa-se seletores de atributos, que individualizam cada elemento do layout, dando características próprias. Sua sintaxe é a seguinte:
input[type="image"] { border: none; }

Neste caso, apenas o input do tipo image não ficará com bordas.

Apesar de ter uma funcionalidade bastante adequada, ela não funciona no IE6!