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,
Re: [Ovillo] Restricciones en internet USA ??
Lo puedo revizar mas tarde con una amiga de USA. En Mexico y Belice si se ven. L.D.I. Daniela Niembro M. Mercadoténcia y Diseño [EMAIL PROTECTED] Belice, Centro America From: JORRETO LLOVES, CARLOS [EMAIL PROTECTED] Reply-To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org To: ovillo@lists.ovillo.org Subject: [Ovillo] Restricciones en internet USA ?? Date: Thu, 23 Aug 2007 09:07:13 +0200 Hola amigos. Me gustaría si hay alguien que pueda visitar esta página desde EE.UU. http://www.martinagardens.com/Links.htm http://www.martinagardens.com/Links.htm y pinchar en el link último (natur-atlas.com) porque me dice la dueña de la página que el link no funciona desde América . Desde España funciona bien y me consta que desde Africa también. La página está alojada en un server Español, aunque el contenido es sobre Marruecos. Sabéis si hay en USA algún tipo de restricciones sobre todo lo que sea árabe? me podéis confirmar alguno si funciona desde Estados Unidos? Gracias. ___ 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 _ Express yourself instantly with MSN Messenger! Download today it's FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ ___ 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] OT - Planificando proyectos web
Muy interesante! Servira para MAC? L.D.I. Daniela Niembro M. Mercadoténcia y Diseño [EMAIL PROTECTED] Belice, Centro America From: AraDaen [EMAIL PROTECTED] Reply-To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Subject: Re: [Ovillo] OT - Planificando proyectos web Date: Mon, 27 Aug 2007 14:20:40 +0200 yo he utilizado alguna vez active collab, está orientado al trabajo en equipo de proyectos, permitiendo la supervisión por parte del cliente etc.. y muchas otras funciones como la creación de hitos y demás. te pongo el enlace http://www.activecollab.com/ --- AraDaen, diseño y programación web con estándares www.aradaen.com ___ 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 _ Don't just search. Find. Check out the new MSN Search! http://search.msn.com/ ___ 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] OT - Planificando proyectos web
Bueno, lo accesas a traves de tu navegador, asi que no creo que haya problema... o tal ves te refieres a que si es posible instalarlo en un servidor web mac... pues supongo tambien que si.. :) On 8/28/07, daniela niembro maldonado [EMAIL PROTECTED] wrote: Muy interesante! Servira para MAC? L.D.I. Daniela Niembro M. Mercadoténcia y Diseño [EMAIL PROTECTED] Belice, Centro America From: AraDaen [EMAIL PROTECTED] Reply-To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Subject: Re: [Ovillo] OT - Planificando proyectos web Date: Mon, 27 Aug 2007 14:20:40 +0200 yo he utilizado alguna vez active collab, está orientado al trabajo en equipo de proyectos, permitiendo la supervisión por parte del cliente etc.. y muchas otras funciones como la creación de hitos y demás. te pongo el enlace http://www.activecollab.com/ --- AraDaen, diseño y programación web con estándares www.aradaen.com ___ 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 _ Don't just search. Find. Check out the new MSN Search! http://search.msn.com/ ___ 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
