[Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Julian Reyes
estoy realizando una pagina con un formulario bastante extenso y he
seguido seguido el consejo que me dieron en la lista (perdón no me
acuerdo el nombre), ahora mismo voy bien pero me asalta la siguiente
duda
estoy agrupando algunas opciones en fieldsets anidados y se ve bastante
bien pero por ejemplo me encuentro con que son bastantes opciones y
estan numeradas asi que uso una lista que se ve de la siguiente forma

fieldsetlegendPersonas/legend
ol type=a
lilabelPadre/labelINPUT type=text /li
lilabelMadre/labelINPUT type=text /li
lilabelEsposo/labelINPUT type=text /li
lilabelEsposa/labelINPUT type=text /li
lilabelHermanos/as/labelINPUT type=text /li
lilabelHijos/as/labelINPUT type=text /li
lilabelAbuelos/as/labelINPUT type=text /li
lilabelTios/as/labelINPUT type=text /li
lilabelNinguno/labelINPUT type=text /li 
lilabelOtros/labelINPUT type=text /li   
lilabelCuales/labelINPUT type=text /li  
/ol
/fieldset

la pregunta es como hago para que queden cada uno de los input alineados
de manera que se alinien a partir del label mas largo y tamiben
cambiarles el tamaño para que acepten un par de numeros. y de paso que
se vean bonitos no se como esos input que le ponen imagenes de fondo y
una a cada lado como se hace eso?

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Tei
2009/9/29 Julian Reyes julian.reyes.escri...@gmail.com:
...
 lilabelNinguno/labelINPUT type=text /li
 lilabelOtros/labelINPUT type=text /li
 lilabelCuales/labelINPUT type=text /li
 /ol
 /fieldset

 la pregunta es como hago para que queden cada uno de los input alineados
 de manera que se alinien a partir del label mas largo y tamiben
 cambiarles el tamaño para que acepten un par de numeros. y de paso que
 se vean bonitos no se como esos input que le ponen imagenes de fondo y
 una a cada lado como se hace eso?


Tienes bastantes recursos para estilar un formulario con ese codigo
que nos pones (o parecido) mediante CSS.
Solo tienes que usar un poco google.  Lo mas facil que puedes hacer es
dar a label un tamaño mas grande que la etiqueta mas grande. Asi todos
los input empezaran a la misma altura.
Que cada input tenga longitud diferente se pude tratar mediante CSS,
aunque no se si es el mejor lugar,  pero para eso tendrias que
etiquetar con clases... algo como esto:

 lilabelNombre/labelINPUT type=text class=telefono name=movil/li
 lilabelFax/labelINPUT type=text  class=telefono name=fax/li

.telefono {
  width: 12em;
}

Pero esto no es lo que yo te aconsejo (de hecho, quizas no es
recomendable hacerlo asi, que funciona no quiere decir que este bien),
lo que te aconsejo es que te busques un buen tutorial que centre y
explique todo, al respecto de estilar formularios basados en label,
fieldset  y demas. Un tutorial te respondera las siguientes 100 dudas
que vas a tener. Si las vas enviando una a una a la lista, vas a
avanzar muy despacio, (no se.. a duda diaria, en 100 dias lo pillas
todo).


-- 
--
ℱin del ℳensaje.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Miguel Beltran R.
El 29 de septiembre de 2009 15:11, Julian Reyes 
julian.reyes.escri...@gmail.com escribió:

 estoy realizando una pagina con un formulario bastante extenso y he
 seguido seguido el consejo que me dieron en la lista (perdón no me
 acuerdo el nombre), ahora mismo voy bien pero me asalta la siguiente
 duda
 estoy agrupando algunas opciones en fieldsets anidados y se ve bastante
 bien pero por ejemplo me encuentro con que son bastantes opciones y
 estan numeradas asi que uso una lista que se ve de la siguiente forma

 fieldsetlegendPersonas/legend
 ol type=a
 lilabelPadre/labelINPUT type=text /li
 lilabelMadre/labelINPUT type=text /li
 lilabelEsposo/labelINPUT type=text /li
 lilabelEsposa/labelINPUT type=text /li
 lilabelHermanos/as/labelINPUT type=text /li
 lilabelHijos/as/labelINPUT type=text /li
 lilabelAbuelos/as/labelINPUT type=text /li
 lilabelTios/as/labelINPUT type=text /li
 lilabelNinguno/labelINPUT type=text /li
 lilabelOtros/labelINPUT type=text /li
 lilabelCuales/labelINPUT type=text /li
 /ol
 /fieldset

 la pregunta es como hago para que queden cada uno de los input alineados
 de manera que se alinien a partir del label mas largo y tamiben
 cambiarles el tamaño para que acepten un par de numeros. y de paso que
 se vean bonitos no se como esos input que le ponen imagenes de fondo y
 una a cada lado como se hace eso?


Con esto se alinea al label mas largo.
[CSS]
ol {display: table}
ol  li {display: table-row}
ol  li label {display: table-cell}
ol  li input {display: table-cell}

Las otras preguntas no te entendi que quieres al final.


 --


Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Julian Reyes
muchas gracias Miguel la pregunta es que como hago para que se vean
digamos tipo wordpress cuando uno va a iniciar sesion

El mar, 29-09-2009 a las 18:21 -0500, Miguel Beltran R. escribió:
 El 29 de septiembre de 2009 15:11, Julian Reyes 
 julian.reyes.escri...@gmail.com escribió:
 
  estoy realizando una pagina con un formulario bastante extenso y he
  seguido seguido el consejo que me dieron en la lista (perdón no me
  acuerdo el nombre), ahora mismo voy bien pero me asalta la siguiente
  duda
  estoy agrupando algunas opciones en fieldsets anidados y se ve bastante
  bien pero por ejemplo me encuentro con que son bastantes opciones y
  estan numeradas asi que uso una lista que se ve de la siguiente forma
 
  fieldsetlegendPersonas/legend
  ol type=a
  lilabelPadre/labelINPUT type=text /li
  lilabelMadre/labelINPUT type=text /li
  lilabelEsposo/labelINPUT type=text /li
  lilabelEsposa/labelINPUT type=text /li
  lilabelHermanos/as/labelINPUT type=text /li
  lilabelHijos/as/labelINPUT type=text /li
  lilabelAbuelos/as/labelINPUT type=text /li
  lilabelTios/as/labelINPUT type=text /li
  lilabelNinguno/labelINPUT type=text /li
  lilabelOtros/labelINPUT type=text /li
  lilabelCuales/labelINPUT type=text /li
  /ol
  /fieldset
 
  la pregunta es como hago para que queden cada uno de los input alineados
  de manera que se alinien a partir del label mas largo y tamiben
  cambiarles el tamaño para que acepten un par de numeros. y de paso que
  se vean bonitos no se como esos input que le ponen imagenes de fondo y
  una a cada lado como se hace eso?
 
 
 Con esto se alinea al label mas largo.
 [CSS]
 ol {display: table}
 ol  li {display: table-row}
 ol  li label {display: table-cell}
 ol  li input {display: table-cell}
 
 Las otras preguntas no te entendi que quieres al final.
 
 
  --
 
 
 Lo bueno de vivir un dia mas
 es saber que nos queda un dia menos de vida
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
 http://lists.ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Julian Reyes
 Con esto se alinea al label mas largo.
 [CSS]
 ol {display: table}
 ol  li {display: table-row}
 ol  li label {display: table-cell}
 ol  li input {display: table-cell}
 

gracias al consejo de miguel hice lo siguiente no se si es correcto pero
se ve bien
[CSS]
input[type=checkbox]{vertical-align:middle;height:1em;width:1em;}
ol {display: table; float:left;}  
ol  li {display:table-row;}
ol  li label {display:
table-cell;padding-right:10px;padding-left:10px;}
ol  li input {display: table-cell;}
.numero {width:2.5em;}
.texto {width:20em;}
.texto_largo{width:30em;}

[HTML]
fieldsetlegendPersonas/legend
ol type=a   
lilabelPadre/labelINPUT type=text  class=numero/li
lilabelMadre/labelINPUT type=text  class=numero/li
lilabelEsposo/labelINPUT type=text class=numero/li
lilabelEsposa/labelINPUT type=textclass=numero/li 
/olol type=a
lilabelHermanos/as/labelINPUT type=text class=numero/li
lilabelHijos/as/labelINPUT type=text class=numero/li
lilabelAbuelos/as/labelINPUT type=text class=numero/li
lilabelTios/as/labelINPUT type=text class=numero/li
/olol type=a  
lilabelOtros/labelINPUT type=text
class=numerolabelCuales/labelINPUT type=text
class=texto_largo/li   
lilabelNinguno/labelINPUT type=checkbox /li 
/ol
/fieldset

de esa manera conseguí que se vieran en bloques parejos

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Miguel Beltran R.
El 29 de septiembre de 2009 19:06, Julian Reyes 
julian.reyes.escri...@gmail.com escribió:

 muchas gracias Miguel la pregunta es que como hago para que se vean
 digamos tipo wordpress cuando uno va a iniciar sesion


no uso wordpress y los sitios que veo no piden contraseña
tienes algun enlace para ver lo que quieres?
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] Maquetar formularios con CSS sin tablas

2009-09-29 Por tema Mario Álvarez
Instalate Firebug, es un complemento para Firefox, en el únicamente le das
click secundario a algun elemento, luego a inspeccionar y te abre una
consola donde ves el código (x)html con el que se hizo, y no solo eso,
también te muestra tdos los estilos que tiene aplicados, vengan de
cualquier archivo css, incluso hasta la línea en la que estan asentados.
Pienso que te sería muy útil.
Saludos.

2009/9/29 Miguel Beltran R. yourpa...@gmail.com

 El 29 de septiembre de 2009 19:06, Julian Reyes 
 julian.reyes.escri...@gmail.com escribió:

  muchas gracias Miguel la pregunta es que como hago para que se vean
  digamos tipo wordpress cuando uno va a iniciar sesion
 
 
 no uso wordpress y los sitios que veo no piden contraseña
 tienes algun enlace para ver lo que quieres?
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo




-- 
Mario Álvarez
twitter: @magrio
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo