Dúvida em HTML, Formulário

27 de setembro de 2012 3 respostas

Steam 27 de setembro de 2012

Galera,
É uma dúvida muito simples sobre HTML(eu acho).
Seguinte, n sei se pode postar print aqui, mas ai vai.
Uma das minhas páginas estão assim…

Eu queria saber como que faço para que os “boxs” fiquem assim como estão(um do lado do outro) porém que o nome fique em cima e o box logo abaixo(que nem o primeiro ‘Titulo de Publicação’). Alguém me explica? Quando eu dou simplesmente um
, a caixa vai pra baixar da do titulo de publicação, eu queria que ficasse embaixo do seu respectivo nome. Obrigado por qualquer ajuda.

Segue o código:

<html>
<head></head>
<body>

<b><h3>2) Produção Científica e Tecnológica:</h3></b>

<span>Título da publicação:</span><br>
<input type="text" name="titulo_publicacao">

<span>Extrato Qualis:</span>
<input type="text" name="extrato_qualis">

<span>Ordem Autores:</span>
<input type="text" name="ordem_autores">

<span>Tipo de Publicação:</span>
<input type="text" name="tipo_de_publicacao">

</body>
</html>

3 Respostas

wesley 27 de set. de 2012

Boa noite,

Pesquise sobre a tag html

… acho que assim irá conseguir deixar o layout como precisa…

[]s

rhuankarlus 27 de set. de 2012

Boa noite Steam,

Bem, o Wesley já havia respondido o que seria a melhor opção até para organização do que você procura. Aqui está um exemplo do que você poderia fazer. Espero ter ajudado.

<html>  
	<head></head>  
	<body>  
  
	<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

		<table>
			<tr>
				<td> <span>Título da publicação:</span>  </td>
				<td> <span>Extrato Qualis:</span>  </td>
				<td> <span>Ordem Autores:</span>  </td>
				<td> <span>Tipo de Publicação:</span>  </td>
			</tr>
			<tr>
				<td> <input type="text" name="titulo_publicacao">  </td>
				<td> <input type="text" name="extrato_qualis">  </td>
				<td> <input type="text" name="ordem_autores">  </td>
				<td> <input type="text" name="tipo_de_publicacao">  </td>
			</tr>
		</table>
	</body>
</html>

windsofhell 28 de set. de 2012

Ola,

pelo amor de Deus, estamos em 2012, nao use tables!!!

<html>  
<head></head>  

<style>
   .field { float: left; padding-right: 20px;   }
   div.field input { display: block; }
</style>

<body>  
  
<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

<div class="field">  
   Título da publicação:
   <input type="text" name="titulo_publicacao">  
</div>  
 
<div class="field">  
   Extrato Qualis:
   <input type="text" name="extrato_qualis">  
</div>
 
<div class="field">  
   Ordem Autores:
   <input type="text" name="ordem_autores">  
</div>
  
<div class="field">  
   Tipo de Publicação:
   <input type="text" name="tipo_de_publicacao">  
</div>
  
</body>  
</html>

Caso voce for ter varias linhas com campos, que eu acredito que eh o caso, entao vc pode melhorar o seu CSS, por exemplo:
Eu coloquei o exemplo online aqui : http://jsfiddle.net/3ssJp/embedded/result/

<html>  
<head></head>  

<style>
.row {
	clear:both;
}

.field {
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

div.field input {
	display: block;
}

</style>

<body>  
  
<b><h3>2) Produção Científica e Tecnológica:</h3></b>  

<div class="row">
		<div class="field">  
		Título da publicação:
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Extrato Qualis:
		<input type="text" name="extrato_qualis">  
		 </div>
		 
		 <div class="field">  
		Ordem Autores:
		<input type="text" name="ordem_autores">  
		</div>
		  
		 <div class="field">  
		Tipo de Publicação:
		<input type="text" name="tipo_de_publicacao">  
		</div>
</div>

<div class="row">
		<div class="field">  
		Field 1:
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Field 2:
		<input type="text" name="extrato_qualis">  
		 </div>
</div>

<div class="row">
		<div class="field">  
		Field 3: 
		<input type="text" name="titulo_publicacao">  
		 </div>  
		 
		<div class="field">  
		Field 4: 
		<input type="text" name="extrato_qualis">  
		 </div>
		 
		 <div class="field">  
		Field 5: 
		<input type="text" name="ordem_autores">  
		</div>
		  
		 <div class="field">  
		Field 6: 
		<input type="text" name="tipo_de_publicacao">  
		</div>
</div>
  
</body>  
</html>

//Daniel

Criado 27 de setembro de 2012

Ultima resposta 28 de set. de 2012

Respostas 3

Participantes 4

3 Respostas

Topicos relacionados