Re: [Ovillo] Centrar verticalmente input type radio
No XD eso no, pero haber si entiendo: tu quieres esto? __ | | | | | X X | | | |_| asi que he hecho de este modo sin complicaciones ten encuenta que el LI engloba todo por eso creo que la medida mejor darsela al LI que al LABEL style * {margin:0; padding:0;} form{ line-height:100%;/*optativo*/ } ul{ list-style: none; width: 220px;line-height:220px;/*centra lista V*/ } li{ width: 70px;line-height:50px;height: 50px;/*centraLI v*/ display: block; float: left; border: 1px solid green; text-aling:center;/* si los quieres en el centro, optativo*/ } img{ vertical-align:middle;}/*importante centra el texto con respecto a la imagen*/ label{ /* label, según el height de la imagen contenida *//*yo los usaria solo para adornos*/ border: 1px solid blue; } label * { border: 1px solid red; } imput{ }/style Bueno, a ver si asi lo arreglas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias por tu ayuda, Jaume! He trabajado un poco a partir de tu código. Va bastante bien y, de hecho, puedo una única lista para toda la tabla, así que no haría falta una lista para cada fila, ya que los li tienen el float: left. Con tu código consigo centrar verticalmente el contenido de cada li por separado: el input type=radio y su img correspondiente (ambos dentro de un label) aparecen centrados verticalmente. De todas formas, no se centra verticalmente el conjunto de la lista. Supongo que habría que hacerlo elemento a elemento, según el tamaño que vaya a tener cada uno. Como me explico bastante mal, pongo el ejemplo (los tamaños son lo de menos y los bordes son para verlo más claro). Sólo hace falta una imagen que se llame r.gif para el ejemplo: CSS: * {margin:0; padding:0;} ul{ list-style: none; width: 220px; } li{ width: 70px; height: 50px; display: block; float: left; border: 1px solid green; } label{ position: relative; top: 25px; /* esto tendría que ser diferente para cada */ margin-top: -25px; /* label, según el height de la imagen contenida */ display:block; border: 1px solid blue; } label * { vertical-align: middle; border: 1px solid red; } HTML: form fieldset legendLorem ipsum/legend ul lilabel for=a1input type=radio id=a1 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a2input type=radio id=a2 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a3input type=radio id=a3 /img src=r.gif width=15 height=25 alt=... //label/li lilabel for=a4input type=radio id=a4 /img src=r.gif width=15 height=20 alt=... //label/li lilabel for=a5input type=radio id=a5 /img src=r.gif width=35 height=15 alt=... //label/li lilabel for=a6input type=radio id=a6 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a7input type=radio id=a7 /img src=r.gif width=20 height=20 alt=... //label/li lilabel for=a8input type=radio id=a8 /img src=r.gif width=15 height=15 alt=... //label/li /ul /fieldset /form Visto lo visto, si nadie sabe de una solución mágica (o de una forma diferente de marcar el conjunto de radiobuttons horizontal), me veré obligado a maquetarlo con tablas ;-) Un saludo! Gael jaume op escribió: Deberias dar medidas pero mira asi: style * {margin:0; padding:0;} ul{ /*creo la tabla*/ display:block; width:600px; list-style:none; } li{/*medidas para las celdas*/ width:150px; height:50px; display:blok; float:left; line-height:100%; } img{ vertical-align:middle; } /style /***/ ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul Pon tantas Ul como filas y los LI como columnas (por ejemplo 4ul y 5 li), para hacer una tabla de 4 columnas y cinco filas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias a ambos por vuestras respuestas. Funcionan, pero no me sirven , porque olvidé deciros que tengo que darles un ancho y un alto a todos los li para que queden cuadriculados. Es decir, tengo una cuadrícula con n input type=radio, que se van colocando, haya los que haya, de izquierda a derecha y de arriba a abajo en una lista horizontal en que caben cuatro inputs por fila (quedan dispuestos como si fuera una tabla, pero no son datos tabulares, son una lista de opciones para escoger una). Por eso quiero que me queden centrados verticalmente el input y el img dentro del label. Gracias de nuevo Un saludo Gael jaume op escribió: Se me ocurre una cosa asi
Re: [Ovillo] Centrar verticalmente input type radio
Estoy intentando salir de mi asombro. Cuando lo consiga, trataré de entender cómo lo has conseguido. De momento te doy las gracias por adelantado :). Es broma, todo perfecto y entendido. Muchas gracias por tu ayuda, Jaume! Un abrazo. Gael jaume op escribió: No XD eso no, pero haber si entiendo: tu quieres esto? __ | | | | | X X | | | |_| asi que he hecho de este modo sin complicaciones ten encuenta que el LI engloba todo por eso creo que la medida mejor darsela al LI que al LABEL style * {margin:0; padding:0;} form{ line-height:100%;/*optativo*/ } ul{ list-style: none; width: 220px;line-height:220px;/*centra lista V*/ } li{ width: 70px;line-height:50px;height: 50px;/*centraLI v*/ display: block; float: left; border: 1px solid green; text-aling:center;/* si los quieres en el centro, optativo*/ } img{ vertical-align:middle;}/*importante centra el texto con respecto a la imagen*/ label{ /* label, según el height de la imagen contenida *//*yo los usaria solo para adornos*/ border: 1px solid blue; } label * { border: 1px solid red; } imput{ }/style Bueno, a ver si asi lo arreglas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias por tu ayuda, Jaume! He trabajado un poco a partir de tu código. Va bastante bien y, de hecho, puedo una única lista para toda la tabla, así que no haría falta una lista para cada fila, ya que los li tienen el float: left. Con tu código consigo centrar verticalmente el contenido de cada li por separado: el input type=radio y su img correspondiente (ambos dentro de un label) aparecen centrados verticalmente. De todas formas, no se centra verticalmente el conjunto de la lista. Supongo que habría que hacerlo elemento a elemento, según el tamaño que vaya a tener cada uno. Como me explico bastante mal, pongo el ejemplo (los tamaños son lo de menos y los bordes son para verlo más claro). Sólo hace falta una imagen que se llame r.gif para el ejemplo: CSS: * {margin:0; padding:0;} ul{ list-style: none; width: 220px; } li{ width: 70px; height: 50px; display: block; float: left; border: 1px solid green; } label{ position: relative; top: 25px; /* esto tendría que ser diferente para cada */ margin-top: -25px; /* label, según el height de la imagen contenida */ display:block; border: 1px solid blue; } label * { vertical-align: middle; border: 1px solid red; } HTML: form fieldset legendLorem ipsum/legend ul lilabel for=a1input type=radio id=a1 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a2input type=radio id=a2 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a3input type=radio id=a3 /img src=r.gif width=15 height=25 alt=... //label/li lilabel for=a4input type=radio id=a4 /img src=r.gif width=15 height=20 alt=... //label/li lilabel for=a5input type=radio id=a5 /img src=r.gif width=35 height=15 alt=... //label/li lilabel for=a6input type=radio id=a6 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a7input type=radio id=a7 /img src=r.gif width=20 height=20 alt=... //label/li lilabel for=a8input type=radio id=a8 /img src=r.gif width=15 height=15 alt=... //label/li /ul /fieldset /form Visto lo visto, si nadie sabe de una solución mágica (o de una forma diferente de marcar el conjunto de radiobuttons horizontal), me veré obligado a maquetarlo con tablas ;-) Un saludo! Gael jaume op escribió: Deberias dar medidas pero mira asi: style * {margin:0; padding:0;} ul{ /*creo la tabla*/ display:block; width:600px; list-style:none; } li{/*medidas para las celdas*/ width:150px; height:50px; display:blok; float:left; line-height:100%; } img{ vertical-align:middle; } /style /***/ ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul Pon tantas Ul como filas y los LI como columnas (por ejemplo 4ul y 5 li), para hacer una tabla de 4 columnas y cinco filas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias a ambos por vuestras respuestas. Funcionan, pero no me sirven , porque olvidé deciros que tengo que darles un ancho y un alto a todos los li para que queden cuadriculados. Es decir, tengo una cuadrícula con n input type=radio, que se van colocando, haya los que haya, de izquierda a derecha y de arriba a abajo en una lista horizontal en que caben cuatro inputs por fila (quedan dispuestos como si fuera una tabla,
[Ovillo] Centrar verticalmente input type radio
Hola! Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). Lo he intentado de mil maneras, pero no lo consigo. El HTML vendría a ser éste: fieldset legend.../legend ul lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li [...] /ul /fieldset Así que se todo reduce a centrar verticalmente el input y el img dentro del label. Debería ser posible, no? Gracias y un saludo! Gael ___ 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] Centrar verticalmente input type radio
Hola, Gael Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). ¿No te funciona esto? li {display: inline;} label * { vertical-align: middle; } ___ 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] Centrar verticalmente input type radio
Se me ocurre una cosa asi rápida, dale esto a la imagen: img{ vertical-aling:middle; } ; a mi me funciona Saludos para ajustarlo mejor juega con los padding del input. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Hola! Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). Lo he intentado de mil maneras, pero no lo consigo. El HTML vendría a ser éste: fieldset legend.../legend ul lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li [...] /ul /fieldset Así que se todo reduce a centrar verticalmente el input y el img dentro del label. Debería ser posible, no? Gracias y un saludo! Gael ___ 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] Centrar verticalmente input type radio
Gracias a ambos por vuestras respuestas. Funcionan, pero no me sirven , porque olvidé deciros que tengo que darles un ancho y un alto a todos los li para que queden cuadriculados. Es decir, tengo una cuadrícula con n input type=radio, que se van colocando, haya los que haya, de izquierda a derecha y de arriba a abajo en una lista horizontal en que caben cuatro inputs por fila (quedan dispuestos como si fuera una tabla, pero no son datos tabulares, son una lista de opciones para escoger una). Por eso quiero que me queden centrados verticalmente el input y el img dentro del label. Gracias de nuevo Un saludo Gael jaume op escribió: Se me ocurre una cosa asi rápida, dale esto a la imagen: img{ vertical-aling:middle; } ; a mi me funciona Saludos para ajustarlo mejor juega con los padding del input. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Hola! Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). Lo he intentado de mil maneras, pero no lo consigo. El HTML vendría a ser éste: fieldset legend.../legend ul lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li [...] /ul /fieldset Así que se todo reduce a centrar verticalmente el input y el img dentro del label. Debería ser posible, no? Gracias y un saludo! Gael ___ 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] Centrar verticalmente input type radio
Deberias dar medidas pero mira asi: style * {margin:0; padding:0;} ul{ /*creo la tabla*/ display:block; width:600px; list-style:none; } li{/*medidas para las celdas*/ width:150px; height:50px; display:blok; float:left; line-height:100%; } img{ vertical-align:middle; } /style /***/ ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul Pon tantas Ul como filas y los LI como columnas (por ejemplo 4ul y 5 li), para hacer una tabla de 4 columnas y cinco filas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias a ambos por vuestras respuestas. Funcionan, pero no me sirven , porque olvidé deciros que tengo que darles un ancho y un alto a todos los li para que queden cuadriculados. Es decir, tengo una cuadrícula con n input type=radio, que se van colocando, haya los que haya, de izquierda a derecha y de arriba a abajo en una lista horizontal en que caben cuatro inputs por fila (quedan dispuestos como si fuera una tabla, pero no son datos tabulares, son una lista de opciones para escoger una). Por eso quiero que me queden centrados verticalmente el input y el img dentro del label. Gracias de nuevo Un saludo Gael jaume op escribió: Se me ocurre una cosa asi rápida, dale esto a la imagen: img{ vertical-aling:middle; } ; a mi me funciona Saludos para ajustarlo mejor juega con los padding del input. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Hola! Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). Lo he intentado de mil maneras, pero no lo consigo. El HTML vendría a ser éste: fieldset legend.../legend ul lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li [...] /ul /fieldset Así que se todo reduce a centrar verticalmente el input y el img dentro del label. Debería ser posible, no? Gracias y un saludo! Gael ___ 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] Centrar verticalmente input type radio
Gracias por tu ayuda, Jaume! He trabajado un poco a partir de tu código. Va bastante bien y, de hecho, puedo una única lista para toda la tabla, así que no haría falta una lista para cada fila, ya que los li tienen el float: left. Con tu código consigo centrar verticalmente el contenido de cada li por separado: el input type=radio y su img correspondiente (ambos dentro de un label) aparecen centrados verticalmente. De todas formas, no se centra verticalmente el conjunto de la lista. Supongo que habría que hacerlo elemento a elemento, según el tamaño que vaya a tener cada uno. Como me explico bastante mal, pongo el ejemplo (los tamaños son lo de menos y los bordes son para verlo más claro). Sólo hace falta una imagen que se llame r.gif para el ejemplo: CSS: * {margin:0; padding:0;} ul{ list-style: none; width: 220px; } li{ width: 70px; height: 50px; display: block; float: left; border: 1px solid green; } label{ position: relative; top: 25px; /* esto tendría que ser diferente para cada */ margin-top: -25px; /* label, según el height de la imagen contenida */ display:block; border: 1px solid blue; } label * { vertical-align: middle; border: 1px solid red; } HTML: form fieldset legendLorem ipsum/legend ul lilabel for=a1input type=radio id=a1 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a2input type=radio id=a2 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a3input type=radio id=a3 /img src=r.gif width=15 height=25 alt=... //label/li lilabel for=a4input type=radio id=a4 /img src=r.gif width=15 height=20 alt=... //label/li lilabel for=a5input type=radio id=a5 /img src=r.gif width=35 height=15 alt=... //label/li lilabel for=a6input type=radio id=a6 /img src=r.gif width=15 height=15 alt=... //label/li lilabel for=a7input type=radio id=a7 /img src=r.gif width=20 height=20 alt=... //label/li lilabel for=a8input type=radio id=a8 /img src=r.gif width=15 height=15 alt=... //label/li /ul /fieldset /form Visto lo visto, si nadie sabe de una solución mágica (o de una forma diferente de marcar el conjunto de radiobuttons horizontal), me veré obligado a maquetarlo con tablas ;-) Un saludo! Gael jaume op escribió: Deberias dar medidas pero mira asi: style * {margin:0; padding:0;} ul{ /*creo la tabla*/ display:block; width:600px; list-style:none; } li{/*medidas para las celdas*/ width:150px; height:50px; display:blok; float:left; line-height:100%; } img{ vertical-align:middle; } /style /***/ ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul ul lilabel for=...input type=radio id=input name... / bonito bonitoimg src=Mis imágenes/mail.jpgalt=... //label /li /ul Pon tantas Ul como filas y los LI como columnas (por ejemplo 4ul y 5 li), para hacer una tabla de 4 columnas y cinco filas. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Gracias a ambos por vuestras respuestas. Funcionan, pero no me sirven , porque olvidé deciros que tengo que darles un ancho y un alto a todos los li para que queden cuadriculados. Es decir, tengo una cuadrícula con n input type=radio, que se van colocando, haya los que haya, de izquierda a derecha y de arriba a abajo en una lista horizontal en que caben cuatro inputs por fila (quedan dispuestos como si fuera una tabla, pero no son datos tabulares, son una lista de opciones para escoger una). Por eso quiero que me queden centrados verticalmente el input y el img dentro del label. Gracias de nuevo Un saludo Gael jaume op escribió: Se me ocurre una cosa asi rápida, dale esto a la imagen: img{ vertical-aling:middle; } ; a mi me funciona Saludos para ajustarlo mejor juega con los padding del input. El 27/08/07, Gael [EMAIL PROTECTED] escribió: Hola! Estoy maquetando un formulario que, entre otras cosas contiene una lista horizontal de radiobuttons. El contenido de éstos no siempre tiene la misma altura (son imágenes, con distintos heights). Lo he intentado de mil maneras, pero no lo consigo. El HTML vendría a ser éste: fieldset legend.../legend ul lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li lilabel for=...input type=radio id=... name... /img src=... alt=... //label/li [...] /ul /fieldset Así que se todo reduce a centrar verticalmente el input y el img dentro del label. Debería ser posible, no? Gracias y un saludo! Gael ___ 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: