Campos um abaixo do outro
Oi tudo bem? Estou fazendo um projeto e aprendendo CSS ao mesmo tempo. Vi um formulário na web que achei legal, baixei e comecei as alterações, tentando entender cada passo. Meu problema é que eu quero colocar alguns campos de input lado a lado e não consigo. Já tentei de tudo. Pesquisei muito antes. Eu até consigo colocar os campos, mas as labels ficam todas de um lado. Outra coisa que tenho dúvida é se é preciso colocar name e id para uma tag, ou se basta apenas colocar um dos dois. Me pareceu meio redundante. O meu código é o seguinte:
estilo.css
* { margin: 0; padding: 0; }
body {font-family: Verdana, Arial; font-size: 12px; line-height: 18px; }
a { text-decoration: none; }
.container{margin: 20px auto; width: 900px; background: #fff;}
h3 { margin-bottom: 15px; font-size: 22px; text-shadow: 2px 2px 2px #ccc; }
#contactform {
width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}.field{margin-bottom:7px;}
label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}
.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}.input:focus{
background-color:#E7E8E7;
}
.textarea {
height:150px;
}
.hint{
display:none;
}.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.button{
float: right;
margin:10px 55px 10px 0;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
cursor:pointer;
color: #fff;
text-align: center;
text-shadow: 0 -1px 1px #64799e;/ Background gradient /
background: #a5b8da;
background: -moz-linear-gradient(top, #a5b8da 0%, #7089b3 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a5b8da), to(#7089b3));/ Border style /
border: 2px solid #5c6f91;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;/ Box shadow /
-moz-box-shadow: inset 0 1px 0 0 #aec3e5;
-webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
box-shadow: inset 0 1px 0 0 #aec3e5;
}.button:hover {
background: #848FB2;
cursor: pointer;
}form_termos_cooperacao.html
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<LINK REL=StyleSheet HREF="estilo.css" TYPE="text/css">
<title>PrestaContas</title>
</head>
<body>
<div class="container">
<form id="contactform" class="rounded" method="post" action="" name="">
<h3>Cadastro de Termos de Cooperação</h3>
<div class="field">
<label for="tc_ano">Ano</label>
<input name="tc_ano" class="input" id="tc_ano" type="text" size="4" maxlength="4" />
<p class="hint">Ano do Termo de Cooperação</p>
<span><img border="0" src="obrig.gif" alt="*" />
</div>
<div class="field">
<label for="tc_numero">Número:</label>
<input name="tc_numero" class="input" id="tc_numero" type="text" size="3" maxlength="3" />
<p class="hint">Número do Termo de Cooperação</p>
<span><img border="0" src="check_p.gif" alt="*" />
</div>
<div class="field">
<label for="tc_inicio">Data Início:</label>
<input name="tc_inicio" class="input" id="tc_inicio" type="text" size="10" maxlength="10" />
<p class="hint">Data do Início do Termo de Cooperação</p>
</div>
<div class="field">
<label for="tc_fim">Data Fim:</label>
<input name="tc_fim" class="input" id="tc_fim" type="text" size="10" maxlength="10" />
<p class="hint">Data do Fim do Termo de Cooperação</p>
</div>
<div class="field">
<label for="tc_secreta">Secretário de Educação:</label>
<input name="tc_secreta" class="input" id="tc_secreta" type="text" size="40" maxlength="40" />
<p class="hint">Nome do Secretário da Educação</p>
</div>
<br />
<div class="but">
<input type="submit" name="cadastrar" class="button" value="cadastrar" />
</div>
<div class="but">
<input type="submit" name="alterar" class="button" value="alterar" />
</div>
<div class="but">
<input type="submit" name="excluir" class="button" value="excluir" />
</div>
</body>
</html>Discussão (6)
Carregando comentários...