Alinhamento de formulário responsivo.

[Rafael Bazanella 0]

Bom dia.

 

Estou trabalhando em uma página que será visualizada em 3 dispositivos: pc, tablet e smartphone.

Ja criei os CSS's para cada resolução e implementei numa boa.
Meu problema começou quando fui trabalhar no alinhamento de um formulário :upset:

 

Em resoluções maiores, por se tratar de poucos campos (3), estes devem ficar lado a lado, Exemplo:
label........campo <um certo espaço> label........campo <um certo espaço> label........campo

 

Já nas telas menores devem ocorrer quebras de linha, deixando-os assim:

label........campo

label........campo

label........campo

 

A, seria interessante também que no caso dos campos lado a lado (1º exemplo), eles ocupassem sempre todo o fieldset.

 

Fiz várias pesquisas, mas sem resultados satisfatórios.

 

Meu forte é programação, por isso tenho bastante dificuldade dessa área do design. Pra ser bastante franco, não curto a parte do web design <_<

 

Grato desde já.

[William Bruno 1501]

Ok, e qual a dúvida ? e dificuldade ?

 

Como está o seu código ? poste um link para vermos.

[Rafael Bazanella 0]

Meu form:

<form>
					
    <fieldset>
        <legend>Cadastro de Amostras:</legend>
	<br />

	<p>
	    <label for="cod_amostra">Cód. Amostra:</label>
	    <input type="text" id="cod_amostra" name="cod_amostra" class="small-size" />							
	    
            <label for="leitura_1" style="margin-left: 15px;">Leitura 1:</label>
	    <input type="text" id="leitura_1" name="leitura_1" class="small-size" />
	
	    <label for="leitura_2" style="margin-left: 15px;">Leitura 2:</label>
	    <input type="text" id="leitura_2" name="leitura_2" class="small-size" />
        </p>
	<br /><br />
						
	<div id="add_row" style="border: solid 1px #363636;
		                                 border-radius: 5px;
						 width: 60px;
						 height: 20px;
						 float:right;
						 padding-left: 16px;
						 margin-right: 5px;
						 cursor: pointer;">Salvar</div>
						
    </fieldset>
					
</form>

Minha dúvida é, como devo proceder para conseguir tal alinhamento?

[Rafael Bazanella 0]

Depois de algumas horas ( :dormindo: ) buscando soluções "nas interwebs", volto a ressaltar que sou um zero à esquerda em WebD, finalmente encontrei uma solução. Me pareceu bastante conveniente e ao mesmo tempo dentro dos padrões atuais. (se eu estiver errado, favor corrigir-me)

 

Por sinal, a solução veio daqui do IM's mesmo: http://forum.imasters.com.br/topic/132304-tableless-alinhamento-vertical-o-mito/

 

Coloquei meu form dentro de algumas div's, como no exemplo acima.

Segue o 'paranauê' HTML:

<form>
					
	<fieldset>
		<legend>Cadastro de Análise:</legend>					
		<br />
				
		<div id="main">
			<div id="row">
				<div id="cel1">
					<label for="cod_analise">Cód. Análise:</label>
					<input type="text" name="cod_analise" id="cod_analise" class="small-size" />
				</div>
				<div id="cel2">
					<label for="n_proveta">Nº Proveta:</label>
					<input type="text" id="n_proveta" name="n_proveta" class="small-size" />
				</div>
				<div id="cel3">
					<label for="temperatura">Temperatura:</label>
					<input type="text" id="temperatura" name="temperatura" class="xx-small-size" /> <span>  ºC</span>
				</div>
			</div>
		</div>
						
						
	</fieldset>
					
</form>

CSS (acima de 960px de tela):

#main {
	display: table;
	width: 100%;
}

#row {
	display: table-row;
}

#main > div > div {
	display: table-cell;
	vertical-align: middle;
	padding-left: 5px;
}

label, input {
	display: block;
	float: left;
}

label {	
	text-align: left;
	height: 23px;
	width: 60%;
	padding-bottom: 3px;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
        font-weight: normal;
        line-height: 30px;
}

input {
	border-radius: 5px;
	background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        color: #555555;
        font-size: 14px;
        height: 20px;
        padding: 4px 6px;
}

fieldset {
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}

CSS (entre 481px e 960px):

#main {
	display: table;
	width: 100%;
}

#row {
	display: table-row;
}

#cel2 , #cel3 {
	padding-left: 10px;
	border-left: 1px solid #CCCCCC;
}

#main > div > div {
	height: 40px;
	display: table-cell;
	vertical-align: middle;
}
	
label, input {
	display: block;
	float: left;
}

label {	
	text-align: left;
	height: 15px;
	width: 100%;
	font-size: 14px;
        font-weight: normal;
}

input {
	border-radius: 5px;
	background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        color: #555555;
        font-size: 14px;
        height: 20px;
        padding: 4px 6px;
}

fieldset {
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}

CSS (máximo 480px):

#main {
	width: 100%;
}

#row {
	width: 100%;
}

#main > div > div {
	vertical-align: middle;
	padding-left: 5px;
	height: 40px;
}
	
label, input {
	display: block;
	float: left;
}

label {	
	text-align: left;
	height: 23px;
	width: 40%;
	padding-bottom: 3px;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
        font-weight: normal;
        line-height: 30px;
}

input {
	border-radius: 5px;
	background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        color: #555555;
        font-size: 14px;
        height: 20px;
        padding: 4px 6px;
}

fieldset {
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}