Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DaniloTec

Alinhamento de formulário

Recommended Posts

Boa Noite a Todos.Quero alinhar um formulário (sem tabela) da seguinte forma:Nome Campo1.........Nome Campo2........Nome Campo3|__________|.........|__________|.......|___________|Nome Campo 4|_____________________________________________|Nome Campo5..........Nome Campo6..........Nome Campo7|__________|..........|__________|..........|__________|E criei uma folha separada para o alinhamento das "colunas":HTML#coluna1 {margin-left: 0px;}#coluna2 {margin-left: 100px;}#coluna3 {margin-left: 100px;}E o formulário ficou da seguinte forma:HTML<div class="padrao"><label id="coluna1">Nº Micro:</label><label id="coluna2">Status:</label></div><div class="box"><label id="coluna1"><input name="Num_Micro" type="text" size=3 maxlength="3" /></label><label id="coluna2"><select name="Status" size="1"><option value="" Selected>...</option><option value="Aberto">Aberto</option><option value="Fechado">Fechado</option></select></label></div><div class="padrao"><label id="coluna1">Empresa:</label><label id="coluna2">Equipamento:</label><label id="coluna3">Conserto:</label></div><div class="box"><label id="coluna1"><select name="Empresa"><option value="" Selected>...</option><option value="Astec">Astec</option><option value="Bantec">BanTec</option><option value="Interative">Interative</option><option value="Poli System">Poli System</option><option value="Materquip">Materquip</option></select></label><label id="coluna2"><select name="Equipamento"><option value="">...</option><option value="CD Rom">CD Rom</option><option value="Coletor">Coletor</option><option value="Impressora">Impressora</option><option value="Micro">Micro</option><option value="Monitor">Monitor</option><option value="Nobreak">Nobreak</option><option value="Projetor">Projetor</option><option value="Note">Note</option><option value="Scanner">Scanner</option><option value="Outros">Outros</option></select></label><label id="coluna3"><select name="Conserto"><option value="" Selected>...</option><option value="Manutenção">Manutenção</option><option value="Garantia">Garantia</option></select></label></div>Pelo que analisei ,o que está acontecendo?A coluna2 faz a contagem dos pixels a partir do termino da coluna1 e não da margem principal. Sendo assim, como os campos são de tamanhos diferentes a contagem de pixels fica desalinhada.O mesmo acontece com o campo3. Ele faz a contagem dos pixels a partir do termino da coluna2, ficando tudo desalinhado.Como faço pra ele fazer a contagem dos pixels a partir da margem principal?Acredito que só assim vou conseguir alinhá-los como quero.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tentei, tentei, tentei. E nada.Consegui chegar muito perto do que eu queria, mas alguns select's do formulário ficada milímetros desalinhado.Acho que nesses casos o melhor é a amiga <table> mesmo.Mas mesmo assim obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pesquisei sim. Já conhecia esse site e sempre busco coisas nele.Como havia dito, consegui praticamente 98% do que eu queria. Mas tem um probleminha, sou perfeccionista demais. rsrs.Alguns select's, não me pergunte o "porquê", ficavam milimetricamente desalinhados, mas todo resto ficou show.Estou tentando fazer isso com o formulário pra adquirir o conceito tableless nos meus projetos.O código ficou assim:CSS:#coluna1 { width: 200px; position: static; }#coluna2 { width: 200px; position: static; }#coluna3 { width: 200px; position: static; }HTML:<div class="padrao"> <label id="coluna1">Nº Micro:</label> <label id="coluna2">Status:</label></div> <div class="box"> <label id="coluna1"><input name="Num_Micro" type="text" size="3" maxlength="3" /></label> <label id="coluna2"> <select name="Status" size="1"> <option value="" Selected>...</option> <option value="Aberto">Aberto</option> <option value="Fechado">Fechado</option> </select> </label></div><div class="padrao"> <label id="coluna1">Empresa:</label> <label id="coluna2">Equipamento:</label> <label id="coluna3">Conserto:</label></div> <div class="box"> <label id="coluna1"> <select name="Empresa"> <option value="" Selected>...</option> <option value="Astec">Astec</option> <option value="Bantec">BanTec</option> <option value="Interative">Interative</option> <option value="Poli System">Poli System</option> <option value="Materquip">Materquip</option> </select> </label> <label id="coluna2"> <select name="Equipamento"> <option value="">...</option> <option value="CD Rom">CD Rom</option> <option value="Coletor">Coletor</option> <option value="Impressora">Impressora</option> <option value="Micro">Micro</option> <option value="Monitor">Monitor</option> <option value="Nobreak">Nobreak</option> <option value="Projetor">Projetor</option> <option value="Note">Note</option> <option value="Scanner">Scanner</option> <option value="Outros">Outros</option> </select> </label> <label id="coluna3"> <select name="Conserto"> <option value="" Selected>...</option> <option value="Manutenção">Manutenção</option> <option value="Garantia">Garantia</option> </select> </label></div><div class="padrao"> <label id="coluna1">Marca:</label> <label id="coluna2">Modelo:</label> <label id="coluna3">Nº Série:</label></div><div class="box"> <label id="coluna1"><input name="Marca" type="text" size="23" maxlength="20" /></label> <label id="coluna2"><input name="Modelo" type="text" size="23" maxlength="20" /></label> <label id="coluna3"><input name="Nserie" type="text" size="23" maxlength="20" /></label></div>Se você reparar, tudo o que é texto fica alinhado, porém o formulário, não.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.