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 [email protected]
> 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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
