CSS: Como definir o tamanho da fonte das linhas de uma tabela (Table Font Size)

3 09 2010

Me deparei com uma dúvida: Como definir o tamanho da fonte das linhas de uma tabela? Dai você pergunta: Como assim?

Vamos lá! Estava eu montando um formulário de contato bem tranquilo. Defini no css o tamanho da fonte que iria ficar dentro do body da seguinte forma:

body {
	font-family:"Verdana";
	font-size:11px;
}

Bom até aqui tudo bem. Até que descobri (ao rodar o form em ambiente de testes) que as linhas dentro da tabela não estavam sendo afetadas por este CSS! Mas qual o motivo? Simplesmente porque a table é um objeto dentro do body, e tudo que está dentro deste objeto deve ser definido separadamente! Ótimo! Vamos definí-lo então!

td { 
	font-family:"Verdana";
	font-size:11px;
}

Ou, ainda melhor, podemos fazer as duas coisas ao mesmo tempo, pois usaremos a mesma fonte e o mesmo tamanho tanto para o body quanto para a td. O código css ficaria finalmente assim:

body, td {
	font-family:"Verdana";
	font-size:11px;
}

Até a próxima!





CSS: Como colocar uma imagem de fundo na DIV que fique centralizada

7 08 2010

Semana passada enfrentei uma questão, simples pra quem manja muito de CSS, porém eu tive certa dificuldade, vamos lá!
Imagine que você tem diversas divs, dentro de cada div existe uma imagem acompanhada de um texto, porém você tem que ter em cada image uma outra imagem de fundo.

Bom, o problema que enfrentei é que as imagens estavam ficando pra fora da div e as vezes cortando. Primeira idéia que tive foi definir a altura da div com 100% para que sempre acompanhe o conteúdo.

height: 100%;

Até ai tudo bem, a próxima etapa agora era incluir a imagem de fundo, de forma que ela não repetisse e ficasse centralizada. Pra isso existem os parâmetros URL, no-repeat e center ao utilizar a palavra background:

background:URL(1/fundo.jpg) no-repeat center;

Blz, tudo quase perfeito, com exceção da cor do fundo que eu precisava que ficasse da mesma cor do restante do site. Utilizei background-color:

background-color: #CCCCCC;

Perfeito, a idéia inicial do meu problema se resolveu com este código.

Confira o código completo:

#imagens {
	height: 100%;
	background:URL(1/fundo.jpg) no-repeat center;
	background-color: #CCCCCC;
}

Claro, existem outras correções que surgiram no decorrer do desenvolvimento, mas isso é assunto para outro post!

Abraço.








Seguir

Obtenha todo post novo entregue na sua caixa de entrada.