Webpoint

Problema

Você quer incluir campos de formulários e nomes nas linhas sem usar tabela HTML, com isso assegurando um puro layout CSS usando somente as marcações de formulário

Solução

Primeiro use rótulos em conjunção com campos de formulários na marcação (veja Figura 5-10):

 
<form action="login.php" method="post">
<label for="uname">Username</label>
<input name="uname" id="uname" type="text" />
<label for="pname">Password</label>
<input name="uname" id="uname" type="text" />
 
<label for="pname">Remember you?</label>
<input name="recall" id="recall" type="checkbox"
class="checkbox"  />
<input name="Submit" value="Submit" type="submit"
class="buttonSubmit" />
</form>
 

Figura 5-10. O formulário sem estilo aplicado:

Então escolha as propriedades display e label para block, flutue os elementos do rótulo para a esquerda, e justifique o texto à direita (veja Figura 5-11):

input {display: block;width: 175px;
 
float: left;
 
margin-bottom: 10px;
 
}
 
label {
 
display: block;
 
text-align: right;
 
float: left;
 
width: 75px;
 
padding-right: 20px;
 
}
 
.checkbox {
 
width: 1em;
 
}
 
br {
 
clear: left;
 
}
 
.buttonSubmit {
 
width: 75px;
 
margin-left: 95px;
 
}

Figura 5-11. O design do formulário organizado com estilo

Discussão

Os elementos input e label foram escolhidos para display:block, que os exibe como elementos block-level. Isto torna possível escolher a largura para o texto no rótulo. Ao invés de permanecer no topo do elemento de entrada, os rótulos são deslocados (ou flutuados) para a esquerda. E pelo fato de todos os rótulos terem a mesma largura, a aparência é uniforme através do formulário.

A tab br cria uma quebra de linha entre os elementos label e form escolhidos, e limpa o deslocamento do elemento anterior. Isto previne outros elementos (aqueles que aparecem depois do campo de entrada combinado com o nome) de deslocar também.

Veja também

As especificações HTML 4.1 para o elemento label em http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL; As especificações CSS 2.1 para a propriedade float em http://www.w3.org/TR/CSS21/visuren.html#propdef-float; As especificações CSS 2.1 para a propriedade clear em http://www.w3.org/TR/CSS21/visuren.html#propdef-clear.

Fonte: CSS Cookbook

Estava vasculhando os acessos mais remotos do mapa mundi deste digníssimo HD e eis que encontrei um projeto que não saiu da primeira fase. Quando comecei a me aventurar no CSS, haviam poucos sites brasileiros que pudessem abordar o assunto. Dizendo em palavras cruas: era falta de material de pesquisa! Então encontrei um grande refúgio nos livros do O'Reilly. Pensei então em traduzi-lo e aprender com ele, pois traduzindo eu iria estar aprofundando nos textos, além de executar todos os exercícios, pois para mim não basta o cara mostrar e falar que é aquilo, pois Browsers são browsers, você nunca pode esperar nada deles. Já passei tanta vergonha com o bendito IE6, quantos sites estavam funcionando perfeitamente, mas para mostrar ao cliente já era outra história?

O fato é que o livro me ensinou 90% do que eu sei de CSS hoje, pois ele é prático e esta linguagem de programação para design, se é que posso dizer assim, vive em torno da prática. Neste livro ele mostra um problema real e discute de maneira bastante sucinta sobre o assunto. Mostra código, fala dos browsers, apresenta soluções e mostra o que há por trás disto. E no fim onde existe a documentação oficial sobre o assunto e os melhores sites para quem quiser aprofundar.

Hoje há muitas pessoas competentes para abordar CSS no Brasil, sem deixar de citar o Maujor que um dos repercursores e eu presenciei tudo isto acontecendo.

Tinha um projeto de fazer um site só de receitas CSS e o tempo passou, hoje estou escrevendo neste Blog que expandiu o assunto além do CSS, que apesar de gostar muito, eu também me apaixonei pela parte de programação. Não me perguntem o que sou, quero ser um programador designer sim, não, não faço os layouts no photoshop, eu executo idéias. É uma loucura, mas não consigo me agarrar somente ao CSS, e venho achando muitos aliados para continuar assim como o jQuery, que aproxima cada vez mais nas duas. Há e o PHP com uma pitada de Cake também :-D.

Resolvi então deixar este material disponível ao longo do tempo até terminar o livro. É muita coisa. Ele poderá ser útil não só para quem está iniciando, mas ele vai aos pontos que interessa. Espero que gostem e um grande abraços a todos. Abordei um assunto para início de conversa que já me indignou muito, já se perguntaram que se existe o hover para usar em todos os elementos, por que ele só é aceito em links no IE6?

Problema

Você quer criar um simples efeito rollover sem usar Javascript para trocar imagens.

Solução

Use as pseudo-classes :hover e :active para criar o rollover:

a:link {color: #777;text-decoration: none;}a:visited {
 
color: #333;
 
text-decoration: none;
 
}
 
a:link:hover, a:visited:hover {
 
color: #777;
 
background-color: #ccc;
 
}
 
a:link:active, a:visited:active {
 
color: #ccc;
 
background-color: #ccc;
 
}

A pseudo classe :hover se parece com o evento comum do JavaScript onmouseover . Ao invés de executar uma função no JavaScript, quando o usuário passa o mouse sobre um link com :hover, uma diferente escolha de estilo é aplicada para o link.

Com o seletor tendo a mesma especificidade, seletores escritos fora de ordem podem parar um dos estilos de aparecerem. Eviste este problema comum listando os seletores na ordem: link, visited, hove, active . O dispositivo de memória comumente usado para lembrar a ordem é "Love/Hate"(amor/ódio).

Ainda que :hover e :active poderem ser aplicados para qualquer elemento, eles são mais usados em links. Note que o suporte do browser para :hover e :active no Netscape Navigator 4 é inexistente. Também, o Opera 4 não suporta :hover.

Nesta solução, as duas pseudo classes certificam que o efeito rollover ocorra somente em links ancorados. Sem :hover e :active, browsers modernos poderiam legalmente aplicar os efeitos rollover em qualquer elemento ancorado, como mostrado neste código e na Figura 3-4:

E depois?

O problema é que o hover para poder simular o Javascript de maneira correta, teria que oferecer suporte a todos elementos, até mesmo uma div, mas na verdade no IE 6 fica devendo. O único suporte é para o elemento a, que simboliza o link. Assim ainda será necessário usar script para este fim, como já mostrei e você pode ver com seus próprios olhos em todo o site.

Veja também

As especificações CSS 2.1 para :active e :hover em http://www.w3.org/TR/CSS21/selector.html#x36; uma explicação sobre links e especificidade em em http://www.meyerweb.com/eric/css/link-specificity.html.

Fonte: CSS Cookbook