Alinhamento de Formulário

Rodrigo Azevedo Lima · Junho 1, 2010

Olá para todos,

Estou desenvolvendo um sistema em PHP onde o usuário deverá preencher um determinado formulário e enviar os dados.

Criei o form e seus elementos necessários, mas na hora de alinhar os títulos com seus respectivos campos está dando uma série de erros. Em alguns browsers aparece corretamente, em outros fica desalinhado.

Como eu quero seguir o padrão Web standards, ou seja, não usar tabelas, gostaria que alguém me desse uma ajuda para solucionar o problema.

Vou postar os código abaixo:

Formulário

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Formulário de Exame Retinopatia da Prematuridade</title>
    
    <style type="text/css"> 
      @import url("../css/estilos.css");      
    </style>
    
    
    <link href="../calendario/calendar.css" rel="stylesheet">
    <script type="text/javascript" src="../calendario/calendar_br.js"></script>
    
  </head>
  
  <body>
    <!-- Início do Formulário de Exame ROP -->
    <form name="cad_exame" id="cad_exame" method="post" action="<?php $PHP_SELF; ?>" />
      
      <div id="box-geral">
      
        <fieldset>
          <h2></h2>
          
          <div id="box-topo">
            <label for="dt_exame">Data do Exame:</label>
            <input type="text" name="dt_exame" size="10" maxlength="10" />
            <script language="JavaScript">
              new tcal ({
                //Nome do formulário
                'formname': 'cad_exame',
                //Nome do input
                'controlname': 'dt_exame'
              });
            </script>
            <font id="txt_ajuda">dd/mm/aaaa</font>
          </div>
          
          <div id="box-esquerda">
            <div id="box-desc-rotulo">CAMPOS PARA PREENCHIMENTO</div>
            <p id="rotulo"><label for="d_pupilar">Diâmetro Pupilar <font id="txt_ajuda">(mm)</font>:</label></p>
            <p id="rotulo"><label for="d_vasos_iris">Dilatação Vasos Íris:</label></p>
            <p id="rotulo"><label for="t_vitrea">Turvação Vítrea:</label></p>
            <p id="rotulo"><label for="preplus">Preplus:</label></p>
            <p id="rotulo"><label for="plus">Plus:</label></p>
            <p id="rotulo"><label for="estagio">Estágio <font id="txt_ajuda">(0 a 5)</font>:</label></p>
            <p id="rotulo"><label for="zona">Zona <font id="txt_ajuda">(0 a 3)</font>:</label></p>
            <p id="rotulo"><label for="horas">Horas <font id="txt_ajuda">(0 a 12)</font>:</label></p>
            <p id="rotulo"><label for="rop1">ROP Tipo 1:</label></p>
            <p id="rotulo"><label for="rop2">ROP Tipo 2:</label></p>
            <p id="rotulo"><label for="limiar">Limiar:</label></p>
            <p id="rotulo"><label for="regressao">Em Regressão:</label></p>
            <p id="rotulo"><label for="regredido">Regredido:</label></p>
          </div>
          
          <div id="box-centro">
            <div id="box-desc-rotulo">OLHO DIREITO</div>
            <p id="campo"><input type="text" name="d_pupilar_od" size="3" maxlength="3" /></p>
            <p id="campo">
              <select name="d_vasos_iris_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="t_vitrea_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="preplus_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="plus_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="estagio_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="zona_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="horas_od" size="3" maxlength="1" /></p>
            <p id="campo">
              <select name="rop1_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="rop2_od">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="limiar_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regressao_od" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regredido_od" size="3" maxlength="1" /></p>
          </div>
          
          <div id="box-direita">
            <div id="box-desc-rotulo">OLHO ESQUERDO</div>
            <p id="campo"><input type="text" name="d_pupilar_oe" size="3" maxlength="3" /></p>
            <p id="campo">
              <select name="d_vasos_iris_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="t_vitrea_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="preplus_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="plus_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="estagio_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="zona_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="horas_oe" size="3" maxlength="1" /></p>
            <p id="campo">
              <select name="rop1_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo">
              <select name="rop2_oe">
                <option value="0" selected="selected">
                <option value="1">Sim
                <option value="2">Não
              </select>
            </p>
            <p id="campo"><input type="text" name="limiar_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regressao_oe" size="3" maxlength="1" /></p>
            <p id="campo"><input type="text" name="regredido_oe" size="3" maxlength="1" /></p>
          </div>
          
          <div id="box-rodape">
            <button type="submit" name="enviar">Enviar Dados</button>
          </div>
          
        </fieldset>
        
      </div>
      
    </form>
    <!-- Fim do Formulário de Exame ROP -->
    
  </body>
  
</html>

CSS

#box-geral{
  width:700px;
  margin:auto;
  padding:0;
  background:#FFFFFF;
  color:#333333;
  }
form fieldset{
  border:1px solid #999999;
  background-color:#F5F5F5;  
  margin:0;
  padding:0;
  }
form fieldset h2{
  width:698px;
  height:35px;
  background:url(../imagens/f_principal.jpg) no-repeat;
  margin:0;
  padding:0;
  }
form label{
  font-weight:bold;
  color:#000066;
  margin:0;
  padding:0;
  }
#rotulo{
  margin:0;
  padding:4px 0 10px 0;
  }
#campo{
  margin:0;
  padding:4px 0 8px 0;
  }
#box-topo{
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  text-align:center;
  border-bottom:1px solid #CCCCCC;
  margin:4px 0 4px 0;
  padding:16px 0 16px 0;
  }
#box-desc-rotulo{
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:#FFFFFF;
  background:#000000;
  margin:0;
  padding:0;
  }
#box-esquerda{
  width:226px;
  font:12px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  text-align:right;
  float:left;
  margin:0 0 0 4px;
  padding:0;
  }
#box-centro{
  width:230px;
  text-align:center;
  float:left;
  margin:0;
  padding:0;
  }
#box-direita{
  width:230px;
  text-align:center;
  float:left;
  margin:0 4px 0 0;
  padding:0;
  }
#box-rodape{
  text-align:center;
  border-top:1px solid #CCCCCC;
  margin:8px 0 4px 0;
  padding:8px 0 16px 0;
  clear:both;
  }
#txt_ajuda{
  font:10px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-style:italic;
  color:red;
  }
#legenda{
  font:15px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:red;
  }
input{
  color:#781351;
  background:#fff;
  border:1px solid #ccc;
  }
input:focus{
  color:#781351;
  background:#fff;
  border:1px solid #606060;
  }
button{
  font:10px "Trebuchet MS", Arial, Verdana, Sans-Serif;
  font-weight:bold;
  color:#000000;
  background:#F9F9F9;
  border:1px solid #ccc;
  margin:10px 0 0 0;
  }

Desde já agradeço.

Rodrigo Lima

_Vinny_ · Junho 1, 2010

Qual ou quais o(s) navegador(es) que apresentaram o problema?

Rodrigo Azevedo Lima · Junho 2, 2010

Qual ou quais o(s) navegador(es) que apresentaram o problema?

Olá _Vinny_,

Olha, o Chrome, e versões antigas do IE (5.5 e 6). Usando tabelas eu não tive problema em nenhum browser, mas eu queria seguir os padrão, né?

Obrigado,

Rodrigo Lima

*FIT* · Junho 2, 2010

Rodrigo, está local ou está hospedado em algum servidor remoto?

Se estiver remoto, tem como postar o link pra gente dar uma olhada, fica mais identificar o erro e debugar na firebug ;)

Rodrigo Azevedo Lima · Junho 2, 2010

Rodrigo, está local ou está hospedado em algum servidor remoto?
Se estiver remoto, tem como postar o link pra gente dar uma olhada, fica mais identificar o erro e debugar na firebug ;)

Está local, mas vou colocar remoto.

Obrigado.

Rodrigo Azevedo Lima · Junho 2, 2010

Rodrigo, está local ou está hospedado em algum servidor remoto?
Se estiver remoto, tem como postar o link pra gente dar uma olhada, fica mais identificar o erro e debugar na firebug ;)

Aí está o link do form Formulário.

Obrigado,

Rodrigo Lima

*FIT* · Junho 2, 2010

Legal, no caso você está usando 3 por linha, até ai tudo bem, mas não seria mais fácil colocar um div em cada linha?

Sendo assim, a div se encarregaria de deixar os 3 no mesmo alinhamento, ou mesmo sem a div, limitar uma altura para o .

Rodrigo Azevedo Lima · Junho 2, 2010

Legal, no caso você está usando 3 por linha, até ai tudo bem, mas não seria mais fácil colocar um div em cada linha?
Sendo assim, a div se encarregaria de deixar os 3 no mesmo alinhamento, ou mesmo sem a div, limitar uma altura para o .

FIT, eu já tentei limitar a altura para o , mas os campos do form tem pequenas diferenças de altura dependendo do browser, e aí que está o problemas. Se você ajusta em um, no outro dá uma diferença.

Abraços,

Rodrigo

*FIT* · Junho 2, 2010

Bom, então tenta manter uma div por linha para conseguir alinhar, ou utilize <ul> e <li> em vez de .

Rodrigo Azevedo Lima · Junho 2, 2010

Bom, então tenta manter uma div por linha para conseguir alinhar, ou utilize <ul> e <li> em vez de .

Ok, vou tentar isso e depois dou uma resposta.

Obrigado!!!

Entrar

Alinhamento de Formulário

Pergunta

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

_Vinny_

Link para o comentário

Compartilhar em outros sites

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Rodrigo Azevedo Lima

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades