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>
>> <legend>Lorem ipsum</legend>
>> <ul>
>> <li><label for="a1"><input type="radio" id="a1" /><img src="r.gif"
>> width="15" height="15" alt="..." /></label></li>
>> <li><label for="a2"><input type="radio" id="a2" /><img src="r.gif"
>> width="15" height="15" alt="..." /></label></li>
>> <li><label for="a3"><input type="radio" id="a3" /><img src="r.gif"
>> width="15" height="25" alt="..." /></label></li>
>> <li><label for="a4"><input type="radio" id="a4" /><img src="r.gif"
>> width="15" height="20" alt="..." /></label></li>
>> <li><label for="a5"><input type="radio" id="a5" /><img src="r.gif"
>> width="35" height="15" alt="..." /></label></li>
>> <li><label for="a6"><input type="radio" id="a6" /><img src="r.gif"
>> width="15" height="15" alt="..." /></label></li>
>> <li><label for="a7"><input type="radio" id="a7" /><img src="r.gif"
>> width="20" height="20" alt="..." /></label></li>
>> <li><label for="a8"><input 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>
>>> <li><label for="..."><input type="radio" id="input" name... />
>>> bonito bonito<img
>>> src="Mis imágenes/mail.jpg"alt="..." /></label>
>>> </li>
>>> </ul>
>>> <ul>
>>> <li><label for="..."><input type="radio" id="input" name... />
>>> bonito bonito<img
>>> src="Mis imágenes/mail.jpg"alt="..." /></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>
>>>>>> <li><label for="..."><input type="radio" id="..." name... /><img
>>>>>> src="..." alt="..." /></label></li>
>>>>>> <li><label 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
