Ir para conteúdo

POWERED BY:

Arquivado

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

leooizepi

alinhar paragrafo

Por , em Desenvolvimento frontend

Recommended Posts

leooizepi    1

leooizepi
Postado

e ae galera.. to tentando de tudo que é jeito arrumar meu paragrafo, mais ta dificil..

 

é assim..

 

em um linha posso ter varios paragrafos.. como por exemplo, um label e um input logo embaixo dele.. e posso ter varios um do lado do outro..

soh que eu tenho q colocar varios linhas desse jeito, no firefox(3.5) ta funcionando do jeito que eu qro.

 

segue o html

<!-- 1º linha -->
<p class="linha_1">
					<label>Número</label><br />
					<input type="text" size="15" maxlength="10" />				
				</p>
				<p class="linha">	
					<label>Categoria</label><br />
					<select >
						<option value="">---- Selecione ----</option>
						<option value="aa">AA</option>
						<option value="bb">BB</option>
					</select>
				</p>
				<p class="linha">	
					<label>Baixa</label><br />
					<input type="text" size="20" maxlength="15" />				
				</p>
				
<!-- 2º linha -->
				<p class="linha_1">
					<label>CNL</label><br />
					<input type="text" size="8" />				
				</p>
				<p class="linha">	
					<label>CNL</label><br />
					<input type="text" size="20" />				
				</p>
				<p class="linha">	
					<label>AT</label><br />
					<select >
						<option value="">---- Selecione ----</option>
					</select>
				</p>
				<p class="linha">	
					<label>Região</label><br />
					<select>
						<option value="">---- Selecione AT ----</option>
					</select>
				</p>
				
<!-- 3º linha -->
				<p class="linha_1">
					<label>RE</label><br />
					<input type="text" size="15" maxlength="7" />				
				</p>
				<p class="linha">	
					<label>Nome</label><br />
					<input type="text" size="40" />				
				</p>

meu css, essas classes linha e linha_1

.linha_1{ clear:left; float:left; text-align:left;}
.linha{ float:left; text-align:left;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não entendi nada, pode ser mais específico? Pode colocar uma imagem do resultado final que deseja?

 

em um linha posso ter varios paragrafos.. como por exemplo, um label e um input logo embaixo dele.. e posso ter varios um do lado do outro..

soh que eu tenho q colocar varios linhas desse jeito, no firefox(3.5) ta funcionando do jeito que eu qro.

Pode não... A não ser que você defina display: inline, pois ele é elemento de bloco, e elementos de blocos "criam" uma linha antes e depois do mesmo.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

eh.. axo q nao fui muito claro mesmo!! hehe

 

mais vamos la..

 

o que eu quero: fazer um formulario (em css), onde por ex: eu tenho uma linha que vai ter 3 campos(input), e cada campo tem q ter uma label em cima deles que é a descrição.. certo? beleza.. ai eu tenho uma segunda linha que vai ter 4 campos(input), tb com label em cima, e assim por diante.. entendeu?

 

valeu!! t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

se possivel Thiago, disponibilize um exemplo com span!

 

valeu!! abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Leia esses tópicos, irão te ajudar:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários na web: Experiência Rica

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

certo thiago, parabens pelos topicos.. mais no exemplo de um formulario com jquery, existe apenas um input a cada linha. O que eu quero é adicionar varias "colunas" numa mesma linha, nao apenas colocar cada campo embaixo do outro!!

 

valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Bem, eu indiquei aqueles dois tópicos, pois eles apresentavam a ida à solução, mas tudo bem...

 

Veja se é isso que deseja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Thiago Retondar" />
<meta http-equiv="content-language" content="pt-br" />
<title>Formulário</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
fieldset{
margin: 0 0 15px 0;	
}
label{
width: 150px;
float: left;
}
</style>
</head>

<body>
<form action="">
<fieldset>
<legend>Campos A</legend>
<label>Campo 1<input type="text" /></label>
<label>Campo 2<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
</fieldset>
<fieldset>
<legend>Campos B</legend>
<label>Campo 1<input type="text" /></label>
<label>Campo 2<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
</fieldset>
<fieldset>
<legend>Campos C</legend>
<label>Campo 1<input type="text" /></label>
<label>Campo 2<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
<label>Campo 3<input type="text" /></label>
</fieldset>
</form>
</body>
</html>

 

Utilizei fieldset para deixar mais organizado.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

é.. tamu quse la agora!! hehe...

 

algumas duvidas ainda!!

 

- como colocar mais uma linha de campo(input) no mesmo fieldset do seu exemplo?

- os labels estao fixos, mais no meu caso eles podem variar dependendo dos input, que pode ter tamanhos diferentes, como fazer?

 

valeu!! abraço Thiago!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

[1] Uai, adicione mais uma linha: <label>Campo 3<input type="text" /></label>

 

[2] Faça por heramça, tal como form fieldset label {}, ou usa classes.

 

De uma estuda nos links que eu te passei. Sua primeira dúvida poderia ter sido respondida através deles.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

[1]-> se eu fizer como você falo pra adicionar eu estaria adicionando outra "coluna" e nao uma linha!

[2]-> vou dar uma estudada sobre isso que você falo!

 

valeu...

Compartilhar este post

Link para o post
Compartilhar em outros sites

leooizepi    1

leooizepi
Postado

entao thiago acho que você entendeu errado hehe

 

como tinha falado "como colocar mais uma linha de campo(input) no MESMO fieldset do seu exemplo?"

 

tipo.. tenho o fieldset que possi varias linhas e nao colocar cada linha num fiedset!

 

valeu.. abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito