Txto e descrição...

[Jackpot 1]

Fico até meio assim de afirmar que é um formulário semântico, mas vi no Tableless.com esse exemplo então fica sendo, hehe.

 

Código CSS:

input{				border-top: 1px solid #333;				border-left: 1px solid #333;				border-bottom: 1px solid #ccc;				border-right: 1px solid #ccc;				font-size: 13px;				margin-bottom: 10px;				color: #0E0659;			}						select{				border: 1px solid #333;				font-size: 13px;				margin-bottom: 10px;				color: #0E0659;			}						label {				width: 38%;				float: left;				color: #000;				text-align: right;				padding-right: 20px;				font-weight: bold;			}

Trecho HTML do formulário:

<form id="form1" method="post" action="">									<label for="nome">Nome</label>					<input type="text" name="nome" id="nome" size="40" />										<br />										<label for="cidade">Cidade</label>					<input type="text" name="cidade" id="cidade" size="25" />										<br />										<label for="estado">Estado</label>					<select name="estado" id="estado">						<option selected="selected">Selecione</option>						<option value="AC">AC</option>						<option value="AL">AL</option>						<option value="AP">AP</option>						<option value="AM">AM</option>						<option value="BA">BA</option>						<option value="CE">CE</option>						<option value="DF">DF</option>						<option value="ES">ES</option>						<option value="GO">GO</option>						<option value="MA">MA</option>						<option value="MT">MT</option>						<option value="MS">MS</option>						<option value="MG">MG</option>						<option value="PA">PA</option>						<option value="PB">PB</option>						<option value="PR">PR</option>						<option value="PE">PE</option>						<option value="PI">PI</option>						<option value="RJ">RJ</option>						<option value="RN">RN</option>						<option value="RO">RO</option>						<option value="RR">RR</option>						<option value="RS">RS</option>						<option value="SC">SC</option>						<option value="SP">SP</option>						<option value="SE">SE</option>						<option value="TO">TO</option>									</select>														<br />										<label for="email">E-mail</label>					<input type="text" name="email" id="email" size="40" />										<br />										<label for="senha">Senha</label>					<input type="password" name="senha" id="senha" size="15" maxlength="12" />															</form>

Pois bem, é um típico formulário de login, mas não vou usá-lo dessa maneira. Apenas copiei o exemplo para estudar o CSS, usar o <label> que nunca usei e montar um esqurma "esquerdo-direito" sem recorrer ao amontoamento de DIV's.

 

Entretanto parece ser muito eficiente, mas como minha aplicação não será essa (login) eu preciso atribuir uma linha de descrição logo abaixo do <label>. Algo como, pode-se ver no fórum mesmo, por exemplo, num novo post, o texto descritivo "Opcional", logo abaixo de Ícone do Post.

 

Mas qualquer coisa que tento, desalinha o <label> seguinte.

 

Como proceder?

 

[]'s

[Guilherme Rambo 4]

Você pode colocar a tag "<em>" após o input que você quer colocar descrição, exemplo:

<label for="email">E-mail</label>
<input type="text" name="email" id="email" size="40" /><em>Descrição do campo</em>

 

E no css:

em {font:10px Tahoma, sans-serif; /* exemplo */color:#09C; /* exemplo */display:block; /* se quiser que fique do lado do campo, em vez de embaixo, tire esta linha */}

[]'s

[Jackpot 1]

Hum...

 

Só que daí o texto fica embaixo certinho, porém fica no começo da linha.

Se ponho text-align: right; fica do outro lado da mesma linha.

 

A idéia é ficar bem embaixo do <label>, tal qual uma descrição mesmo.

 

Eu fiz uma mescla de <br />'s, adicionando a "descrição" dentro do próprio <label> e meio que deu certo, mas como a altura da linha ficou maior (por ter mais conteúdo), ficou desalinhado com os elementos do formulário, quando antes era alinhadinho.

 

Dá uma olhada

 

[]'s

[Guilherme Rambo 4]

Esta bom do jeito que você fez, mas tem uns detalhes:- Não precisa utilizar "strong" ali, basta por no css do label "font-weight:bold"- Pra mostrar a descrição, utilize a tag <em> ali dentro mesmoO resto eh soh ajuste de margin, padding, etc[]'s

[Jackpot 1]

Bem, os margin's e padding's são outro problema, pois não consigo ajeitar no IEca.E sobre eu colocar font-weight no css label afetaria também a descrição, afinal como estou fazendo, a mesma fica dentro do <label>tem outra forma de fazer o que quero? Seja mudando a estrutura ou apenas ajustando pequenas partes.A página tá online, mesmo estando em desenvolvimento. E o fonte tá liberado, tem como dar uma olhada?[]'s

[Guilherme Rambo 4]

Jackpot, recomendo uma estudada da sua parte nos topicos fixos aqui da seção, tão faltando alguns conhecimentos básicos pra você ;)Da uma lida, naum custa nada[]'s

[Jackpot 1]

Dei uma lida sim, valeu. Daí dei uma procurada no Google e achei algumas coisinhas que me permitiu montar algo legal.

 

O modelo está atualizado no link.

 

A descrição não está embaixo do <label> como queria inicialmente, mas como está ficou muito bom também.

 

Porém, para cada campo do formulário eu preciso adiciona um link bem em frente (essa posição é indiscutível, hehe).

 

Esse link terá como texto: [ ? ] ou uma imagem, não sei ainda.

 

Daí ao clicar nele/nela, dispara um JavaScript com um tooltip explicativo.

 

Poderia usar CSS para fazer o tooltip, porém não sei será possível uma apresentação "decente" do mesmo, em resoluções menores (640x480, por exemplo).

 

Muita informação desnecessária só pra dizer que não consegui fazer o elemento de link (seja texto ou imagem) ficar ao lado do elemento de formulário. O que tentei ele caiu pra baixo.

 

Daí queria ver como proceder, pois tá quase bom, hehe.

 

[]'s