Re: [Ovillo] Centrar verticalmente input type radio

2007-08-28 Por tema jaume op
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

2007-08-28 Por tema Gael
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

2007-08-27 Por tema Gael
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

2007-08-27 Por tema Rodrigo Álvarez Virgós
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

2007-08-27 Por tema jaume op
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

2007-08-27 Por tema Gael
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

2007-08-27 Por tema jaume op
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

2007-08-27 Por tema Gael
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: