Ir ao conteúdo

Alinhar campos de cadastro - CSS e HTML


Luiz Felipe VNN

Posts recomendados

Postado

Bom, tava refazendo uma pagina de cadastro, só que agora usando table... Só que quando tem dois ou mais td em um tr fica tudo desalinhado.... Vou deixar uma imagem de como eu queria que ficasse a página, e o código que eu to usando que esta desalinhando os campos...

11t4hh0.jpg

<html>
<head>
<meta charset=UTF-8">
<title>Cadastrando...</title>
<style type="text/css">

#topo {

background-color:black;
color:white;
width:1023px;
height:30px;
margin-left:-7px;
margin-top:-8px;
font-size: medium;

}

#topo a {

color:#cccccc;
text-decoration:none;
}

#caixa {

border:1px solid #c5c5c5;
width:650px;
height:400px;
margin-top:100px;
border-radius:5px;
color:black;
box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
-moz-box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
-webwit-box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
margin-left:320px


}

#caixa a {

color:black;

}

#caixa a:hover {

color:blue;

}

.usuario {

border:1px solid #878787;
height:30px;
border-radius:4px;

}


</style>
</head>
<body>
<div id="topo">
<img src="images/logo.png" align="left">
<a href="#">Fórum</a>   <a href="#">Blog</a>
</div>

<div id="caixa" align="left">
<form action="enviarcadastro.php" method="post" id="cadastro">
<table align="left">
<tr>
<td><input class="usuario" type="text" name="nome" placeholder="Nome" size="25" maxlength="30"></td>
<td><input class="usuario" type="text" name="sobrenome" placeholder="Sobrenone" size="25" maxlenght="30"></td>
</tr>
<tr>
<td><input class="usuario" type="text" name="email" placeholder="E-mail" size="35" maxlength="100"></td>
</tr>
<tr>
<td>
<select class="usuario">
<option>Gênero</option>
<option value="H" name="homem">Homem</option>
<option value="M" name="mulher">Mulher</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="dia" class="usuario" maxlenght="2" placeholder="dia"></td>
<td><select class="usuario">
<option>---</option>
<option name="janeiro" value="janeiro">Jan</option>
<option name="fevereiro" value="fevereiro">Fev</option>
<option name="marco" value="marco">Mar</option>
<option name="abril" value="abril">Abr</option>
<option name="maio" value="maio">Mai</option>
<option name="junho" value="junho">Jun</option>
<option name="julho" value="julho">Jul</option>
<option name="agosto" value="agosto">Ago</option>
<option name="setembro" value="setembro">Set</option>
<option name="outubro" value="outubro">Out</option>
<option name="novembro" value="novembro">Nov</option>
<option name="dezembro" value="dezembro">Dez</option>
</select></td>
<td><input type="text" name="ano" class="usuario" maxlenght="4" placeholder="ano"></td>
</tr>
<tr>
<td><input class="usuario" type="password" name="senha" placeholder="Senha" size="25" maxlength="16"></td>
<td><input class="usuario" type="password" name="senha2" placeholder="Confirmar senha" size="25" maxlength="16"></td>
</tr>
<tr>
<td><input class="usuario" type="text" name="pergunta" placeholder="Faça uma pergunta para recuperação de senha" size="45px" maxlength="30"></td>
</tr>
<tr>
<td><input class="usuario" type="text" name="resposta" placeholder="Resposta" size="35" maxlength="50"></td>
</tr>
<tr>
<td><input type="submit" value="Enviar"></td>
<td><input type="reset" value="Limpar forumulário"></td>
</tr>
<tr>
<td><a>Já é cadastrado? Clique </a><a href="index.php">aqui</a><a> para fazer login</a></td>
</tr>
</table>
</form>
</div>


</body>
</html>

Falta apenas alinhar, fazer aquele "é gratis" mais pequeno que o "cadastre-se"

e a parte que esta na esquerda dos campos de cadastro..

:D espero uma resposta

  • Moderador
Postado

Olá,

recomendo que não use tabela. deixe ela só para dados tabulares.

Minha sugestão é que você crie uma DIV, dentro dela, crie +- 8 fieldsets, dentro de cada fieldset crie um <p> ou uma div(se preferir) para separar os dois campos e deixar lado a lado... ( estilizando com CSS), no caso por exemplo no primeiro fieldset você colocaria dois <p> ou duas divs uma para cada campo de input.

Agora, porque usar fieldset? simples, o elemento fieldset trabalha com elementos a nível de bloco, em outras palavras, o fieldset é o elemento de separação de " seções" dentro de um formulário( em conjunto pode-se usar o elemento legend para adicionar uma legenda para aquele fieldset.

Se ainda você nao quiser usar o<p> ou divs dentro de cada fieldset, você pode usar a lista não ordenada( <ul>)

Tudo isso faz parte da semântica e padrões da web standard.

dica: Utilizar a semântica correta, influencia no pageranking do google.

Att,

Dif

Postado

Deu certo a parte de alinhar os campos...

Agora queria colocar campos por fora da div , com um traço dividindo os campos, como está na imagem... Não consegui alinhar os campos fora da div, tentei usando fieldset, e br, e não deu certo...

Na parte de colocar o traço, eu coloquei um border-bottom no css, mais a borda ficava apenas no ultimo campo, e queria que ficasse em todos, como exceção do ultimo..


<head>
<meta charset=UTF-8">
<title>Cadastrando...</title>
<style type="text/css">

#background {

background-color:#e3e3e3;

}

#topo {

background-color:black;
color:white;
width:1023px;
height:30px;
margin-left:-7px;
margin-top:-8px;
font-size: medium;

}

#topo a {

color:#cccccc;
text-decoration:none;
}

#caixa {

border:1px solid #c5c5c5;
width:640px;
height:415px;
margin-top:100px;
border-radius:5px;
color:black;
box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
-moz-box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
-webwit-box-shadow:inset #cccccc 0.1em 0.1em 0.2em 0.3em;
margin-left:320px;
background-color:white;


}

#caixa a {

color:black;

}

#caixa a:hover {

color:blue;

}

.usuario {

border:1px solid #878787;
height:30px;
border-radius:4px;

}

.field {

border:none;
height:auto;


}

#coisas {

color:black;
margin-top:-400px;
margin-right:680px;
height:415px;
font-size: larger;

}
</style>
</head>
<body id="background">
<div id="topo">
<img src="images/logo.png" align="left">
<a href="#">Fórum</a>   <a href="#">Blog</a>
</div>
<div id="caixa" align="left">
<form action="" method="post" id="cadastro">
<fieldset class="field">
<p></p>
<input class="usuario" type="text" name="nome" placeholder="Nome" size="25" maxlength="30">
<input class="usuario" type="text" name="sobrenome" placeholder="Sobrenone" size="25" maxlenght="30">
</fieldset>
<fieldset class="field">
<input class="usuario" type="text" name="email" placeholder="E-mail" size="35" maxlength="100">
</fieldset>
<fieldset class="field">
<select class="usuario">
<option>Gênero</option>
<option value="H" name="homem">Homem</option>
<option value="M" name="mulher">Mulher</option>
</select>
</fieldset>
<fieldset class="field">
<input type="text" name="dia" class="usuario" maxlenght="2" placeholder="dia" size="1">
<select class="usuario">
<option>---</option>
<option name="janeiro" value="janeiro">Jan</option>
<option name="fevereiro" value="fevereiro">Fev</option>
<option name="marco" value="marco">Mar</option>
<option name="abril" value="abril">Abr</option>
<option name="maio" value="maio">Mai</option>
<option name="junho" value="junho">Jun</option>
<option name="julho" value="julho">Jul</option>
<option name="agosto" value="agosto">Ago</option>
<option name="setembro" value="setembro">Set</option>
<option name="outubro" value="outubro">Out</option>
<option name="novembro" value="novembro">Nov</option>
<option name="dezembro" value="dezembro">Dez</option>
</select>
<input type="text" name="ano" class="usuario" maxlenght="4" placeholder="ano" size="2">
</fieldset>
<fieldset class="field">
<input class="usuario" type="password" name="senha" placeholder="Senha" size="25" maxlength="16">
<input class="usuario" type="password" name="senha2" placeholder="Confirmar senha" size="25" maxlength="16">
</fieldset>
<fieldset class="field">
<input class="usuario" type="text" name="pergunta" placeholder="Faça uma pergunta para recuperação de senha" size="45px" maxlength="30">
</fieldset>
<fieldset class="field">
<input class="usuario" type="text" name="resposta" placeholder="Resposta" size="35" maxlength="50">
</fieldset>
<fieldset class="field">
<input type="submit" value="Enviar">
<input type="reset" value="Limpar forumulário">
</fieldset>
<fieldset class="field">
<a>Já é cadastrado? Clique </a><a href="index.php">aqui</a><a> para fazer login</a>
</fieldset>
</form>
</div>
<div id="coisas" align="right">
<fieldset class="field">
<a>Meu nome</a>
</fieldset>
<fieldset class="field">
<a>Meu e-mail</a>
</fieldset>
<fieldset class="field">
<a>Eu sou</a>
</fieldset>
<fieldset class="field">
<a>Data de nascimento</a>
</fieldset>
<fieldset class="field">
<a>Nova senha</a>
</fieldset>
<fieldset class="field">
<a>Pergunta de recuperação</a>
</fieldset>
<fieldset class="field">
<a>Resposta</a>
</fieldset>
</div>
</html>
<html>

Arquivado

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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

GRÁTIS: Aprenda a Ler Resistores e Capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!