School of Net

Evolua constantemente, Online

Membros SON


Alinhando campos do formulário -

CSS,Desenvolvimento,Design,Webstandards — Tags: , , , — Wesley Willians @ 13:23

Olá amigos,

Gostaria de passar uma dica rápida para você que trabalha com formulários, mas tem AQUELE trabalhão para conseguir alinhá-lo, principalmente, quando é questão de honra NÃO usar tabelas.

Normalmente para formulários, trabalhamos com labels, logo, as vezes com uma pequena ajuda da jquery, isso pode ser facilmente ajustado.

Veja o exemplo abaixo:





Perceba que set tivermos um formulário gigante, realmente as vezes com CSS o trabalho é árduo, logo, com uma pequena rotina em JQuery, tudo pode mudar, quase que magicamente.

Veja a solução encontrada quando estava navegando na Internet (perdi o site de referência, assim que achar posto aqui ok?).

var max = 0;
$("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);

Se não caiu a sua ficha ainda, essa pequena função faz o seguinte: Pega a maior label do formulário e aplica esse tamanho para todas as outras, logo, tudo ficará alinhado. Essa solução para mim foi genial, quando me deparei com diversos checkboxes em uma parte de meu formulário.


PicLens – Plugin revolucionário para slideshow em 3D -

CSS,Desenvolvimento,Design,News,Webstandards — Tags: , — Wesley Willians @ 15:34

O PicLens é um Plugin que pode ser instalado como extensão do FireFox ou do Internet Explorer que simplesmente gera um efeito fantástico!

Instalamos a aplicação do PicLens em nosso Blog e ficamos admirados com sua forma de exibição. Instale-o e confira.

Para maiores informações: www.piclens.com


Teste de compatibilidade: Seu browser é compatível? -

CSS,Webstandards — Tags: , — Wesley Willians @ 15:20

La vai uma dica para quem trabalha muito com CSS para testar a compatibilidade de seu(s) vários browsers.

Essa ferramenta possibilita, de uma forma muito simples e rápida,  você testar quais seletores são compatíveis ou não com o browser utilizado.


Quando utilizar valign, vertical-align e line-height -

CSS,Webstandards — Tags: , — Wesley Willians @ 10:53

Ontem quando fizemos o post sobre Menu vertical utilizando CSS, o Ronildo fez um comentário, mas mais importante de que seu comentário foi a referência dada.

A referência foi para o blog do Bruno que trata de uma forma mais que detalhada a utilização do valign, vertical-align e line-height, que é um grande ponto de confusão em quem quer centralizar algo em uma div, tabela, span, etc. Vale a pena conferir. Clique abaixo para acessar esse post:


Menu vertical utilizando CSS -

CSS,Design,Webstandards — Tags: , — Wesley Willians @ 12:20

Muitas vezes nos preocupamos tanto em como fazer um menu horizontal com CSS que quando vamos fazer um menu vertical temos aquele branco!

Segue abaixo um exemplo:

CSS:

#left_menu {
width: 173px;
margin-left: 5px;
}

#left_menu ul li{
height: 23px;
line-height: 23px;
background: url(/images/menu_left_item.jpg) no-repeat;
width: 163px;
font-size: 11px;
padding-left: 10px;
color: #505050;
}

#left_menu ul li a{
text-decoration: none;
color: #505050;
}

#left_menu ul li a:hover{
text-decoration: underline;
color: #505050;
}

#left_menu ul li.ativo {
background: url(/images/menu_left_item_active.jpg) no-repeat;
font-weight: bold;
text-decoration: underline;
color: #86b801;
}

XHTML:

Pontos importantes que todos sempre esquecem:

  • Sempre quando setarmos uma altura para o item temos que fazer o mesmo com a altura da linha: line-height
  • “#left_menu ul li.ativo” sempre quando formos indicar uma classe ao “li” o “.” deve ser concatenado como nesse exemplo

Qualquer dúvida, comentem!