Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: NathanD en 22 Septiembre 2014, 20:52 pm



Título: ¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS
Publicado por: NathanD en 22 Septiembre 2014, 20:52 pm
Buenas, llevo bastante tiempo dándole vueltas a cómo hacer lo de la siguiente imagen, y la verdad es que no tengo ni idea.

(http://i.imgur.com/otEunvB.png)

No pongo el código porque básicamente es inútil, mi problema es el concepto.

Estaría muy agradecido si me ayudarais aunque fuera a plantearlo.


Título: Re: ¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS
Publicado por: DaNuK en 22 Septiembre 2014, 21:05 pm
no te entiendo a que te refieres con concepto, lo que intentas hacer ya es cuestion de diseño y para lograrlo necesitas usar css


Título: Re: ¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS
Publicado por: NathanD en 22 Septiembre 2014, 21:24 pm
Pues a si tengo que agrupar los elementos con divs, párrafos, qué grupos hacer, cómo hacer la alineación...

Gracias por responder.


Título: Re: ¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS
Publicado por: DaNuK en 22 Septiembre 2014, 22:15 pm
tan facil como hacer esto
Código
  1. <form action="" id="frm">
  2. <legend>Mi formulario</legend>
  3. <div class="controles">
  4. <label for="">etiqueta 01</label>
  5. <input type="text">
  6.  
  7. </div>
  8. <div class="controles">
  9. <label for="">etiqueta 02</label>
  10. <input type="text">
  11.  
  12. </div>
  13. <div class="controles">
  14. <label for="">etiqueta 03</label>
  15. <input type="text">
  16.  
  17. </div>
  18. </form>
  19.  
  20.  

css
Código
  1. .controles label, .controles input
  2. {
  3. display:inline-block;
  4. vertical-align:top;
  5. }
  6. .controles input
  7. {
  8. margin-left:30px;
  9. width:250px;
  10. }
  11. .controles label
  12. {
  13. font-family:monospace;
  14. }
  15. legend
  16. {
  17. font-weight:bold;
  18. font-family: monospace;
  19. }
  20.  

Saludos


Título: Re:
Publicado por: onStrike en 23 Septiembre 2014, 20:12 pm
Crack ^