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