quinta-feira, 18 de junho de 2009

Tabela com linhas de cores alternadas(zebrada) bem simples

Tem um jeito muito simples de se "zebrar" uma tabela:


<table>
<tr bgcolor="#CCCCCC">
<td>ID</td>
<td>Nome</td>
<td>Telefone</td>
<td>Email</td>
</tr>
<?
$cor = "#EEEEEE";
while($array = mysql_fetch_array($sua_query)){?>
<tr bgcolor="<?=$cor?>">
<td><?=$array['id']?></td>
<td><?=$array['nome']?></td>
<td><?=$array['telefone']?></td>
<td><?=$array['email']?></td>
</tr>
<?
if($cor=="#EEEEEE"){
$cor="#E0E0E0";
}else{
$cor="#EEEEEE";
}
}
?>
</table>

Primeiro defino a variável $cor e atribuo uma cor com valor hexadecimal à ela;
depois vem um while que percorre cada item do aray que recebe(mysql_fetch_array()) um resultado da função mysql_query(); a linha da tabela usa como cor de fundo a cor definida na variável $cor definida antes do while, ou seja, a primeira linha terá a cor definida na variável fora do while; depois mostra os dados da array: em cada célula um item do array; depois verifico qual a cor foi usada na volta atual, se for a cor #EEEEEE, ele altera a cor para #E0E0E0 para ser usada na próxima volta do while, fazendo assim a alternação de cores.
Qualquer dúvida, comentem.

quinta-feira, 19 de fevereiro de 2009

Empresas que desenvolvem sites em Maringá

Essa lista é para você que está procurando um emprego na área de internet, ou quer desenvolver um site para sua empresa, e que é de Maringá:
Ápice Internet
BS2
BuscaTech
dOdiE
Flex Inernet
Hozt Internet
Imaginei
Maringaense
Media Systems
Monte Web
Odara Internet
Oliver Media
Premium Art
Recapsula.com
Rodrigo Moraes
SG Sistemas
Só Empresas
Studio 37
Sub100
Tiago A.
Vivaweb
WNet

Esqueci de alguma? Comente.

terça-feira, 2 de dezembro de 2008

Efeito link ativo

Sabe aquele efeito de link ativo? Tipo esse: http://patriciafigueira.com.br/ . Então é fácil.
Suponha que seu site tenha 4 sessões. Em cada sessão na tag body você cria uma classe. Depois você formata com CSS.

body.home #menu a{
background: url(img/ativo.gif);

font: bolder 0.8em sans-serf;
}
body.clientes #menu a{
background: url(img/ativo.gif);

font: bolder 0.8em sans-serf;
}
body.empresa #menu a{
background: url(img/ativo.gif);

font: bolder 0.8em sans-serf;
}
body.contato #menu a{
background: url(img/ativo.gif);

font: bolder 0.8em sans-serf;
}
Esse #menu pode ser um ul ou um div.

sexta-feira, 20 de junho de 2008

Marcadores de lista personalizados

Para se ter um marcador de lista personalizado no CSS, é só usar: list-style-image. Mas daí vem a incompatibilidade do Internet Explorer, que deixa seu marcador no topo. Usando a propriedade background, temos total controle sobre o marcador.
Muito simples: é só por a background no li e um padding-left.
li{
background: url(pasta/imagem.gif) no-repeat left center;
padding-left: 15px;
}
E pronto.

sábado, 14 de junho de 2008

Novo portfolio

Está aqui meu novo portfolio. Mais limpo e organizado. Agora só falta por uns trabalhos labs.

sábado, 17 de maio de 2008

Enriqueça seu portfolio

A ABPK(Associação Brasileira de Parkour), está precisando de um novo layout. Acho que não terá uma remuneração. Eles pedem no site que os interessados enviem um layout em uma imagem. Isso não é nada ético. Mas para os iniciantes da área, está de bom tamanho. Fazer um layout para esse site, irá dar uma melhorada no seu portfolio. É como ajudar uma ONG. Ajude você também.

sábado, 3 de maio de 2008

Como fazer um efeito rollover com uma só imagem

CSS Sprite, consiste em fazer um efeito rollover com uma só imagem.
Uma técnica que eu acho boa. Ela é muito usada para fazer efeitos de roll-over, nos links. Boa, porque só usa uma imagem para fazer esse efeito. Imagine só: você tem duas imagens para fazer o efeito roll-over nos seus links, e a imagem que seria da
pseudo-classe :hover, está faltando, com o mapeamento, só irá usar uma imagem. Boa também pois, economiza tempo para a
conclusão do carregamento.
A imagem:

Imagens usadas no CSS Sprite

O código:

a{
background: url(tabs.gif) no-repeat;
color: #FFF;
font: 0.8em sans-serif;
height: 25px;
text-align: center;
width: 110px;
}
a:hover{
background: url(tabs.gif) no-repeat -110 0;
}

Note que no código do :hover tem dois números. O primeiro é a posição da imagem na esquerda, ou seja, onde ela começará a ser exibida. O segundo, é a posição do topo da imagem. Qualquer coisa, comentem! Até a próxima.