Foros del Web » Creando para Internet » CSS »

Alinear varios campos en filas y lineas

Estas en el tema de Alinear varios campos en filas y lineas en el foro de CSS en Foros del Web. Hola tengo un formulario con distintos campos de selección, lo q necesitaría sería que quedaran X campos alineados en la primera fila, X campos alineados ...
  #1 (permalink)  
Antiguo 14/10/2009, 10:24
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 10 meses
Puntos: 10
Alinear varios campos en filas y lineas

Hola

tengo un formulario con distintos campos de selección, lo q necesitaría sería que quedaran X campos alineados en la primera fila, X campos alineados en la segunda fila, y X campos alineados en la tercera fila.

este seria el css
Código CSS:
Ver original
  1. #contenedor{
  2.     width:800px;
  3.     margin:auto;
  4.     margin-top:20px;
  5.     border:2px solid #C0C0C0;
  6.     background-color:#F2F2F2;
  7.     padding-bottom:20px;
  8. }
  9.  
  10. li.inline {
  11.   display: inline;
  12.   padding-left: 3px;
  13.   padding-right: 7px;
  14.   border-right: 1px dotted #066;
  15.   }
  16.  
  17. .select_seccio{ width:125px;}

y este mi quebradero de cabeza:
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <form id="frmSqlMaquines" name="frmSqlMaquines" method="post" action="consulta.php" onsubmit="VeureMaquines(); return false">
  3.         <ul>
  4.         <li class="inline">Numero<input type="text" name="num_maq" id="num_maq" value="" size="6"/></li>
  5.         <li class="inline">N.Serie<input type="text" name="nserie" id="nserie" value="" size="6" /></li>
  6.         <li class="inline">Localidad
  7.         <select id="id_localitat" name="id_localitat" onchange="javascript:VeureSeccions(this.value)">
  8.             <?php
  9.             while($localitats = mysql_fetch_array($sql_localitats)){
  10.             ?>
  11.                 <option value="<?php echo $localitats['id_localitat'];?>" <?php if($localitats['id_localitat'] == $_SESSION['exp_user']['id_localitat']){echo "selected";}?>><?php echo $localitats['localitat'];?></option>
  12.             <?php
  13.             }
  14.             ?> 
  15.         </select>
  16.         </li>
  17.         <li class="inline">Seccion
  18.                 <div id="seccions">
  19.                 <select id="id_seccio" name="id_seccio" class="select_seccio">
  20.                     <option value="0" selected="selected">Seccion...</option>
  21.                     <?php
  22.                     while($seccions = mysql_fetch_array($sql_seccions)){
  23.                     ?>
  24.                         <option value="<?php echo $seccions['id_seccio'];?>"><?php echo $seccions['seccio'];?></option>
  25.                     <?php
  26.                     }
  27.                     ?> 
  28.                 </select>
  29.             </div>     
  30.         </li>  
  31.         <li class="inline"><input type="submit" name="submit" id="button" value="Consultar" /></li>
  32.         </ul>                  
  33.     </form>
  34.     <div id="formulario" style="display:none;"></div>
  35.     <div id="tabla" class="tabla">    </div>
  36. </div>

A tener en cuenta:
en mitad del código hay un div "seccions" este es necesario ya que se recarga mediante ajax según la localidad que escojan!

-->Resumiendo : Lo que vulgarmente seria:

Código HTML:
<table>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
<tr>
<td>aqui un campo</td>
<td>aqui otro campo</td>
<td>aqui otro campo</td>
</tr>
</table> 
me gustaría saber hacerlo con maquetacion CSS

Gracias de antemano


Saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #2 (permalink)  
Antiguo 15/10/2009, 06:01
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 10 meses
Puntos: 10
Respuesta: Alinear varios campos en filas y lineas

rebuscando encontre eso... no me acuerdo de donde pero si a alguien le sirve pues ala aqui lo dejo:

Código css:
Ver original
  1. #tabla {
  2.     width: 800px;
  3.     background-color: #ccc;
  4.     margin-left: auto;
  5.     margin-right: auto;
  6. }
  7.  
  8. .fila { display: table-row;}
  9.  
  10. .celda {   
  11.     display: table-cell;
  12.     font-size: 0.8em;
  13.     text-align: left;
  14.     padding-left: 5px;
  15.     padding-right: 5px;
  16.     padding-bottom: 5px;
  17. }
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #3 (permalink)  
Antiguo 15/10/2009, 17:05
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Alinear varios campos en filas y lineas

Hola sergi_climent:

No entiendo una cosa, ¿Porque incluyes tus campos de formulario dentro de <ul><li> en vez de hacerlo dentro de una etiqueta <div>?

Si incluyes tus campos en divs podras trabjar con las propiedades css: position, float y clear (buscalo en "san google" XD) para "ordenar en filas y columnas" tu diseño.

Puedes pasar por http://www.araudi.net/migracion/migr...sin_dolor.html. El gran aporte de Mikmoro para todos aquellos que acostumbran a usar tablas para su maqueta y de pronto la quieren hacer con divs.

Saludos!

Última edición por cristian_cena; 15/10/2009 a las 17:12
  #4 (permalink)  
Antiguo 16/10/2009, 01:56
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 12 años, 10 meses
Puntos: 10
Respuesta: Alinear varios campos en filas y lineas

Cita:
Iniciado por cristian_cena Ver Mensaje
Hola sergi_climent:

No entiendo una cosa, ¿Porque incluyes tus campos de formulario dentro de <ul><li> en vez de hacerlo dentro de una etiqueta <div>?

Si incluyes tus campos en divs podras trabjar con las propiedades css: position, float y clear (buscalo en "san google" XD) para "ordenar en filas y columnas" tu diseño.

Puedes pasar por http://www.araudi.net/migracion/migr...sin_dolor.html. El gran aporte de Mikmoro para todos aquellos que acostumbran a usar tablas para su maqueta y de pronto la quieren hacer con divs.

Saludos!
Gracias por el aporte!
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #5 (permalink)  
Antiguo 16/10/2009, 07:28
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Alinear varios campos en filas y lineas

De nada, espero te sea util, cualquier cosa estamos de este lado de la pantalla XD.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:18.