Laura García Munárriz Departamento de Diseño GRUPO ARAGÓN DIGITAL www.grupoaragondigital.es Teléfono 902 104 191
-----Mensaje original----- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de ovillo-requ...@lists.ovillo.org Enviado el: viernes, 15 de julio de 2011 14:01 Para: ovillo@lists.ovillo.org Asunto: Resumen de Ovillo, Vol 89, Envío 24 Envíe los mensajes para la lista Ovillo a ovillo@lists.ovillo.org Para subscribirse o anular su subscripción a través de la WEB http://lists.ovillo.org/mailman/listinfo/ovillo O por correo electrónico, enviando un mensaje con el texto "help" en el asunto (subject) o en el cuerpo a: ovillo-requ...@lists.ovillo.org Puede contactar con el responsable de la lista escribiendo a: ovillo-ow...@lists.ovillo.org Si responde a algún contenido de este mensaje, por favor, edite la linea del asunto (subject) para que el texto sea mas especifico que: "Re: Contents of Ovillo digest...". Además, por favor, incluya en la respuesta sólo aquellas partes del mensaje a las que está respondiendo. Asuntos del día: 1. Re: centra img dentro de <a> de menos tamaño (Leonel Silva) 2. Re: Problemas atributo color e IE en CSS (Leonel Silva) 3. Re: Problemas atributo color e IE en CSS (Elena Ballesteros Molinero) 4. Re: Problemas atributo color e IE en CSS (Neftalí Guerrero (Nesta)) 5. Re: centra img dentro de <a> de menos tamaño (David Merino) 6. Re: centra img dentro de <a> de menos tamaño (Cagatay Gurturk) 7. Re: centra img dentro de <a> de menos tamaño (Martin Etxauri) 8. ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? (Marina Gallardo) 9. Re: ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? (Martín Szyszlican) 10. Re: ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? (Marina Gallardo) 11. Re: centra img dentro de <a> de menos tamaño (jaume op) 12. Re: centra img dentro de <a> de menos tamaño (Martin Etxauri) 13. Re: centra img dentro de <a> de menos tamaño (Martin Etxauri) 14. tr:hover no funciona en Firefox 5 (Marina Gallardo) 15. Re: centra img dentro de <a> de menos tamaño (Martin Etxauri) 16. Re: centra img dentro de <a> de menos tamaño (cmik22) 17. Re: tr:hover no funciona en Firefox 5 (Gerardo Oscar Jimenez Tornos) 18. Re: tr:hover no funciona en Firefox 5 (Marina Gallardo) 19. Re: tr:hover no funciona en Firefox 5 (Marina Gallardo) 20. Re: centra img dentro de <a> de menos tamaño (Martin Etxauri) 21. Re: tr:hover no funciona en Firefox 5 (Gerardo Oscar Jimenez Tornos) 22. Re: tr:hover no funciona en Firefox 5 (Marina Gallardo) ---------------------------------------------------------------------- Message: 1 Date: Thu, 14 Jul 2011 08:06:40 -0400 From: Leonel Silva <lsi...@gmail.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAGfFm2q-OsG08nz_=ZFND+m32=cmuqokfnusvq+p9qesunl...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Existe una propiedad clip (o existía) dentro del css qu ete permitía recortar cosas tal como necesitas (aunque no estoy seguro que permita del centro hacia afuera) no sé si está deprecada, igual t emando los enlaces directo al w3c. http://www.w3.org/wiki/CSS/Properties/clip http://www.w3.org/TR/CSS2/visufx.html http://www.google.com/search?q=site:w3.org&q=clip&search-submit= 2011/7/14 Martin Etxauri <t...@eragin.com> > Hola a todos > > Vengo a ver si alguien conoce una algo que creo que no existe :) > > El tema es para unas miniaturas de una galería, tenemos un img dentro de un > <a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de > alto y 200 de ancho de manera que la imagen queda recortada dentro del <a>. > La cuestión es centrar esa imagen dentro del a para que en el recorte se vea > el centro. El verdadero problema es que las imágenes no tendrán todas la > misma proporción y por ende serán de ancho variable, no tendrán todas 200px. > > Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he > encontrado en internet, cla) > > A) Meter el img dentro de un span de mayor tamaño: > > <a ... ><span><img ... /></span></a> > > a{ > display:block: > width: 100px; > height: 100px; > overflow:hidden; > ... > } > span{ > display:block: > height:100px; > width:300px; /*en cualquier caso una medida mayor que cualquiera de > las fotos que entrarán*/ > margin-left:-100px;/*o lo que haga falta para que el span quede > centrado en el <a> según el width del span*/ > text-align:center; > } > > en vez del margin-left también podemos usar un position:relative; y > left:-100px; que igual es mejor. > pero claro, aquí no me mola que ese span no pinta nada ahí. > > > B) Hacer lo mismo que hacemos con el span con la img y calcular el > margin-left en base a la anchura de la imagen mediante programación. > > Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del > trabajo extra de programación le va a costar mas cargar todo, además de que > tendrías que meter el margin-left inline... y bueno, que molaría poder > hacerlo solo con css. > > ¿alguien conoce alguna solución milagrosa? > > gracias a todos. > > saludos > > Martin > _______________________________________________ > 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 > -- ---------------------------------- Caracas - Venezuela www.leonelsilva.com ------------------------------ Message: 2 Date: Thu, 14 Jul 2011 08:09:54 -0400 From: Leonel Silva <lsi...@gmail.com> Subject: Re: [Ovillo] Problemas atributo color e IE en CSS To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <cagffm2o-4cbue8uaoacxmptsy165djedygp5kqajcweuz+c...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Lo probé en IE8 (ya no pruebo en IE6) y veo la fuente gris, en que parte específica la ves blanca? 2011/7/14 Elena Ballesteros Molinero <elena.balleste...@bj-adaptaciones.com> > Hola a todos, > > soy novata y voy aprendiendo poco a poco sobre CSS y HTML. > > Estoy llevando el mantenimiento de una web en Joomla! y de repente me he > encontrado con que en el Internet Explorer los textos no toman el atributo > color definido en el body (deberían ser grisáceos #666666 y se muestran en > blanco), sin embargo sí que lo hacen en Firefox y Chrome, la web es: > bj-adaptaciones.com > > Llevo un rato dándole vueltas pero no consigo resolver el problema, > ¿alguien > sabe si es un problema directamente con el controlador o hay algún defecto > en el CSS? Antes se visualizaban correctamente, no sé desde cuándo no se > muestran los textos porque desafortunadamente yo suelo trabajar con Firefox > y sólo recurro al IE para validar un cambio. > > Saludos y muchísimas gracias por adelantado!! > _______________________________________________ > 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 > -- ---------------------------------- Caracas - Venezuela www.leonelsilva.com ------------------------------ Message: 3 Date: Thu, 14 Jul 2011 14:11:46 +0200 From: Elena Ballesteros Molinero <elena.balleste...@bj-adaptaciones.com> Subject: Re: [Ovillo] Problemas atributo color e IE en CSS To: ovillo@lists.ovillo.org Message-ID: <cae3p9ddtsyedk2vvsovfsf4kpi2x0ake30avh71opga8bga...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Muchísimas gracias Neftalí, al hilo de tu comentario he localizado que tenía la etiqueta del texto de un módulo abierta y esta era la que ponía el color blanco en el resto de la tabla. Que tengáis un buen día! ------------------------------ Message: 4 Date: Thu, 14 Jul 2011 14:13:41 +0200 From: Neftalí Guerrero (Nesta) <nguerr...@emergya.es> Subject: Re: [Ovillo] Problemas atributo color e IE en CSS To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAFo03BTGw=seklr3hdyfv7vi8s1rp-myhke2kgdjcks-mdk...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Me alegro que resulte! xD, un saludo e igualmente!! Leonel era en el contenido, parece ser que ya está resuelto. Saludos! El 14 de julio de 2011 14:11, Elena Ballesteros Molinero < elena.balleste...@bj-adaptaciones.com> escribió: > Muchísimas gracias Neftalí, > > al hilo de tu comentario he localizado que tenía la etiqueta del texto de > un > módulo abierta y esta era la que ponía el color blanco en el resto de la > tabla. > > Que tengáis un buen día! > _______________________________________________ > 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 > -- Neftalí Guerrero Pancorbo (Nesta) Área de Proyectos Emergya Consultoría Tfno: +34 954 51 75 77 Fax: +34 954 51 64 73 www.emergya.es ------------------------------ Message: 5 Date: Thu, 14 Jul 2011 14:28:21 +0200 From: David Merino <jube...@gmail.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAMrQeqZgEO=-i5xudc5tp2gdfhcfy7sw-z7aaxcvfi83dvf...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Hola Martin 2011/7/14 Martin Etxauri <t...@eragin.com>: > Hola a todos > > Vengo a ver si alguien conoce una algo que creo que no existe :) > > El tema es para unas miniaturas de una galería, tenemos un img dentro de un <a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de alto y 200 de ancho de manera que la imagen queda recortada dentro del <a>. La cuestión es centrar esa imagen dentro del a para que en el recorte se vea el centro. El verdadero problema es que las imágenes no tendrán todas la misma proporción y por ende serán de ancho variable, no tendrán todas 200px. > ¿alguien conoce alguna solución milagrosa? > los estilos del 'a' tal y como tú los tienes. img { margin: -50% } > gracias a todos. > > saludos > > Martin Un saludo, David ------------------------------ Message: 6 Date: Thu, 14 Jul 2011 15:45:42 +0300 From: Cagatay Gurturk <caga...@itusozluk.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <caa7hyme4+vkv5gtnmg6rn+sjnnt2dof1kdxhg0n2zjdqszk...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 debes usar display:block en <a>. si no, no respecta a los dimensiones. te dejo el codigo completo: <a href="#" style="width: 100px;height: 100px;overflow:hidden;display: block;"> <img src="http://ispartakule.biz/haberresim/test1.jpg"; alt="" style="margin: -50%" /> </a> El 14 de julio de 2011 15:28, David Merino <jube...@gmail.com> escribió: > Hola Martin > > 2011/7/14 Martin Etxauri <t...@eragin.com>: > > Hola a todos > > > > Vengo a ver si alguien conoce una algo que creo que no existe :) > > > > El tema es para unas miniaturas de una galería, tenemos un img dentro de > un <a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de > alto y 200 de ancho de manera que la imagen queda recortada dentro del <a>. > La cuestión es centrar esa imagen dentro del a para que en el recorte se vea > el centro. El verdadero problema es que las imágenes no tendrán todas la > misma proporción y por ende serán de ancho variable, no tendrán todas 200px. > > ¿alguien conoce alguna solución milagrosa? > > > > los estilos del 'a' tal y como tú los tienes. > > img { margin: -50% } > > > gracias a todos. > > > > saludos > > > > Martin > > Un saludo, > David > _______________________________________________ > 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 > -- Ça?atay Gürtürk itusozluk.com - Kovan Yaz?l?m Reklam Org. Tic. Ltd. ?ti. Emektar Sk. No: 1 D: 6 Gümü?suyu/?stanbul +90 530 204 96 03 +90 212 245 85 65 ------------------------------ Message: 7 Date: Fri, 15 Jul 2011 09:24:01 +0200 From: Martin Etxauri <t...@eragin.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <82004e55-f37e-4d85-9c89-75418de0d...@eragin.com> Content-Type: text/plain; charset=utf-8 Aupa Gracias a los dos, pero esta solución ya la había probado y no resulta, el margin-left:-50% no resulta en el 50% del width del img, si no en el 50% del widht del <a> con lo que resulta como si ponemos -50px y no se adapta según la anchura de las diferentes imágenes. saludos El 14/07/2011, a las 14:45, Cagatay Gurturk escribió: > debes usar display:block en <a>. si no, no respecta a los dimensiones. te > dejo el codigo completo: > > <a href="#" style="width: 100px;height: 100px;overflow:hidden;display: > block;"> > > <img src="http://ispartakule.biz/haberresim/test1.jpg"; alt="" style="margin: > -50%" /> > > </a> > > El 14 de julio de 2011 15:28, David Merino <jube...@gmail.com> escribió: > >> Hola Martin >> >> 2011/7/14 Martin Etxauri <t...@eragin.com>: >>> Hola a todos >>> >>> Vengo a ver si alguien conoce una algo que creo que no existe :) >>> >>> El tema es para unas miniaturas de una galería, tenemos un img dentro de >> un <a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de >> alto y 200 de ancho de manera que la imagen queda recortada dentro del <a>. >> La cuestión es centrar esa imagen dentro del a para que en el recorte se vea >> el centro. El verdadero problema es que las imágenes no tendrán todas la >> misma proporción y por ende serán de ancho variable, no tendrán todas 200px. >>> ¿alguien conoce alguna solución milagrosa? >>> >> >> los estilos del 'a' tal y como tú los tienes. >> >> img { margin: -50% } >> >>> gracias a todos. >>> >>> saludos >>> >>> Martin >> >> Un saludo, >> David >> _______________________________________________ >> 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 >> > > > > -- > Ça?atay Gürtürk > > itusozluk.com - Kovan Yaz?l?m Reklam Org. Tic. Ltd. ?ti. > > Emektar Sk. No: 1 D: 6 Gümü?suyu/?stanbul > > +90 530 204 96 03 > > +90 212 245 85 65 > _______________________________________________ > 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 ------------------------------ Message: 8 Date: Fri, 15 Jul 2011 09:35:16 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: [Ovillo] ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? To: "Ovillo, la lista de CSS en castellano" <Ovillo@lists.ovillo.org> Message-ID: <CAOxkm=cruzrdsufaei7v1jp4qs-uv6tdbj3lgrbsaza5o8o...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Buenos días. Hoy me he encontrado con un problemilla. Tengo una tabla cuyas celdas están contenidas por párrafos. La cosa es que aunque la celda tenga un ancho fijo, el párrafo usa el mismo espacio de la celda e ignora el width: auto. No me interesa poner un ancho fijo al párrafo porque el contenido es dinámico. Se me ocurrió poner un min-width pero ni caso... ¿Se os ocurre algo? Gracias! ------------------------------ Message: 9 Date: Fri, 15 Jul 2011 04:38:59 -0300 From: Martín Szyszlican <marti...@gmail.com> Subject: Re: [Ovillo] ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAKTxXVVa=QCe=iyd8tf0pmg9rqd2gqjmfcp6mqxbwhfoamp...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Hola Marina: Los elementos de bloque, como el p, por defecto ocupan todo el ancho que pueden, para evitar ese compartamiento podrías probar convertirlo en un inline-block o flotarlo. Martín. El 15 de julio de 2011 04:35, Marina Gallardo <marinagalla...@gmail.com>escribió: > Buenos días. Hoy me he encontrado con un problemilla. Tengo una tabla cuyas > celdas están contenidas por párrafos. La cosa es que aunque la celda tenga > un ancho fijo, el párrafo usa el mismo espacio de la celda e ignora el > width: auto. No me interesa poner un ancho fijo al párrafo porque el > contenido es dinámico. Se me ocurrió poner un min-width pero ni caso... ¿Se > os ocurre algo? 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 > ------------------------------ Message: 10 Date: Fri, 15 Jul 2011 09:43:34 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: Re: [Ovillo] ¿Por qué el ancho de un <p> dentro de un <td> se adapta automáticamente a la celda? To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAOxkm=fg2ybrfakbkanje_rfmlovg405snkfsmi05yy-bzm...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Genial, Martín. Ha funcionado perfectamente con el display: inline-block. ¡Eternamente agradecida! 2011/7/15 Martín Szyszlican <marti...@gmail.com> > Hola Marina: > Los elementos de bloque, como el p, por defecto ocupan todo el ancho que > pueden, para evitar ese compartamiento podrías probar convertirlo en un > inline-block o flotarlo. > Martín. > > El 15 de julio de 2011 04:35, Marina Gallardo > <marinagalla...@gmail.com>escribió: > > > Buenos días. Hoy me he encontrado con un problemilla. Tengo una tabla > cuyas > > celdas están contenidas por párrafos. La cosa es que aunque la celda > tenga > > un ancho fijo, el párrafo usa el mismo espacio de la celda e ignora el > > width: auto. No me interesa poner un ancho fijo al párrafo porque el > > contenido es dinámico. Se me ocurrió poner un min-width pero ni caso... > ¿Se > > os ocurre algo? 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 > > > _______________________________________________ > 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 > ------------------------------ Message: 11 Date: Fri, 15 Jul 2011 09:54:38 +0200 From: jaume op <jaum...@gmail.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CACVAxVpMWB3X5s9B2jmrBmJ7bmaMxiqu2fvPD4Ombx=etkk...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Aunque no entiendo muy bien lo que quieres hacer. Veamos. 1. Tienes un <a> de 100px 2. Dentro metes un <span> de , no se, 200px 3. Dentro del <span> va una <img /> Quiza pueda funcionar: a { display:block; text.align:center} > span {display:block; margin:0 auto;} y quizas > img {text.align:center;margin:0 auto;} //display block, o quiza inline? Es jugar un poco con el centrado de elementos y que estos se centren entre ellos Saludos Jaume ------------------------------ Message: 12 Date: Fri, 15 Jul 2011 10:12:27 +0200 From: Martin Etxauri <t...@eragin.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <caf879ea-357e-4153-a950-845015cbe...@eragin.com> Content-Type: text/plain; charset=iso-8859-1 > Aunque no entiendo muy bien lo que quieres hacer. Veamos. > > > 1. Tienes un <a> de 100px > 2. Dentro metes un <span> de , no se, 200px > 3. Dentro del <span> va una <img /> > > Quiza pueda funcionar: > > a { display:block; text.align:center} >> span {display:block; margin:0 auto;} y quizas >> img {text.align:center;margin:0 auto;} //display block, o quiza inline? > > > Es jugar un poco con el centrado de elementos y que estos se centren entre > ellos > > Saludos > Jaume Hola Jaume Si entiendo bien lo que me propones esta es la solución A) que daba yo en el primer mail ¿no? (la pego debajo) Y efectivamente funciona, de hecho es mi opción actual, pero prefería ahorrarme el span si es que alguien tenía la solución :) la pego aquí: > A) Meter el img dentro de un span de mayor tamaño: > > <a ... ><span><img ... /></span></a> > > a{ > display:block: > width: 100px; > height: 100px; > overflow:hidden; > ... > } > span{ > display:block: > height:100px; > width:300px; /*en cualquier caso una medida mayor que cualquiera de las fotos que entrarán*/ > margin-left:-100px;/*o lo que haga falta para que el span quede centrado en el <a> según el width del span*/ > text-align:center; > } > > en vez del margin-left también podemos usar un position:relative; y left:-100px; que igual es mejor. > pero claro, aquí no me mola que ese span no pinta nada ahí. ------------------------------ Message: 13 Date: Fri, 15 Jul 2011 10:27:47 +0200 From: Martin Etxauri <t...@eragin.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <cedfb5a0-e40d-40be-afaa-675b2210a...@eragin.com> Content-Type: text/plain; charset=iso-8859-1 Aupa Efectivamente la propiedad clip no permite el centrado automático, ya que solo admin medidas en píxeles o ems pero no en porcentaje. Eso si, me ha parecido interesante el comportamiento de clip con las medidas de arriba e izquierda, que marcan el punto de origen del clip, puestas en píxeles y las medida de derecha y abajo, que marcan la altura y anchura del recorte en em, te da un punto de partida fijo pero un alto y ancho variables según el tamaño de texto, no se, me da que alguna utilidad curiosa puede tener :) Y bueno, he estado mirando y no está obsoleta si no que es parte de CSS3, que también trae background-clip Saludos y gracias. El 14/07/2011, a las 14:06, Leonel Silva escribió: > Existe una propiedad clip (o existía) dentro del css qu ete permitía > recortar cosas tal como necesitas (aunque no estoy seguro que permita del > centro hacia afuera) no sé si está deprecada, igual t emando los enlaces > directo al w3c. > > http://www.w3.org/wiki/CSS/Properties/clip > http://www.w3.org/TR/CSS2/visufx.html > http://www.google.com/search?q=site:w3.org&q=clip&search-submit= > > 2011/7/14 Martin Etxauri <t...@eragin.com> > >> Hola a todos >> >> Vengo a ver si alguien conoce una algo que creo que no existe :) >> >> El tema es para unas miniaturas de una galería, tenemos un img dentro de un >> <a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de >> alto y 200 de ancho de manera que la imagen queda recortada dentro del <a>. >> La cuestión es centrar esa imagen dentro del a para que en el recorte se vea >> el centro. El verdadero problema es que las imágenes no tendrán todas la >> misma proporción y por ende serán de ancho variable, no tendrán todas 200px. >> >> Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he >> encontrado en internet, cla) >> >> A) Meter el img dentro de un span de mayor tamaño: >> >> <a ... ><span><img ... /></span></a> >> >> a{ >> display:block: >> width: 100px; >> height: 100px; >> overflow:hidden; >> ... >> } >> span{ >> display:block: >> height:100px; >> width:300px; /*en cualquier caso una medida mayor que cualquiera de >> las fotos que entrarán*/ >> margin-left:-100px;/*o lo que haga falta para que el span quede >> centrado en el <a> según el width del span*/ >> text-align:center; >> } >> >> en vez del margin-left también podemos usar un position:relative; y >> left:-100px; que igual es mejor. >> pero claro, aquí no me mola que ese span no pinta nada ahí. >> >> >> B) Hacer lo mismo que hacemos con el span con la img y calcular el >> margin-left en base a la anchura de la imagen mediante programación. >> >> Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del >> trabajo extra de programación le va a costar mas cargar todo, además de que >> tendrías que meter el margin-left inline... y bueno, que molaría poder >> hacerlo solo con css. >> >> ¿alguien conoce alguna solución milagrosa? >> >> gracias a todos. >> >> saludos >> >> Martin >> _______________________________________________ >> 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 >> > > > > -- > ---------------------------------- > Caracas - Venezuela > www.leonelsilva.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 > ------------------------------ Message: 14 Date: Fri, 15 Jul 2011 10:30:25 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <Ovillo@lists.ovillo.org> Message-ID: <CAOxkm=da5jrgnx9qkrguurcfdunedps-puuwhczjwdpwwwf...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Buenos días. He estado probando una tabla que tengo maquetada en Chrome y funciona perfectamente, pero en Firefox 5 nada, el tr no hace :hover. He cogido el ejemplo aislado y lo he probado en Firefox con JSFiddle para hacer la prueba de forma concreta. ¿Alguien sabe por qué ocurre esto? Muchas gracias. <table> <tr> <td>Prueba</td> <td>Prueba</td> </tr> <tr> <td>Prueba</td> <td>Prueba</td> </tr> <table> tr { border: 1px solid #ccc; } td { border-right: 1px solid #ccc; padding: 5px; } tr:hover { background-color #ccc; cursor: pointer; } ------------------------------ Message: 15 Date: Fri, 15 Jul 2011 10:30:28 +0200 From: Martin Etxauri <t...@eragin.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <36dcc761-6b40-4158-83f7-392e29dcd...@eragin.com> Content-Type: text/plain; charset=iso-8859-1 > Efectivamente la propiedad clip no permite el centrado automático, ya que solo admin medidas en píxeles o ems pero no en porcentaje. perdón, donde pone "admin" debería ser "admite", cla, en que estarían mis manos pensando ;) demasiadas veces entrando en paneles de administración en pruebas :P ------------------------------ Message: 16 Date: Fri, 15 Jul 2011 10:56:00 +0200 From: cmik22 <cmi...@gmail.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <cahywysajlcykdy2lm3xdtwnmxaqdnwh4pszj6bkkoflvcxp...@mail.gmail.com> Content-Type: text/plain; charset=ISO-8859-1 Si puedes poner la imagen como background del <A> podrías centrarla con background-position:center ------------------------------ Message: 17 Date: Fri, 15 Jul 2011 10:57:50 +0200 From: Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> Subject: Re: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <cahzcwltuc00owxbsfleyqwmhj7-ebyv6paz48j7ixam65cs...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Y no será que te faltan los dos puntos detrás de 'background-color' ??? http://www.treeweb.es/ShareCode/3181c20bde3cfc31f8f2b39dca510836/css El 15 de julio de 2011 10:30, Marina Gallardo <marinagalla...@gmail.com>escribió: > <table> > <tr> > <td>Prueba</td> > <td>Prueba</td> > </tr> > <tr> > <td>Prueba</td> > <td>Prueba</td> > </tr> > <table> > > tr { > border: 1px solid #ccc; > } > > td { > border-right: 1px solid #ccc; > padding: 5px; > } > > tr:hover { > background-color #ccc; > cursor: pointer; > } > ------------------------------ Message: 18 Date: Fri, 15 Jul 2011 11:00:51 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: Re: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAOxkm=dZVvpWOJPRh8m-_qYcXB=+2Nq0auGKJyhFPjM59=2...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Perdona, sí, efectivamente faltaban dos puntos, pero no consigo lo que quiero. No me aplica el hover a la fila entera. 2011/7/15 Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> > Y no será que te faltan los dos puntos detrás de 'background-color' ??? > > http://www.treeweb.es/ShareCode/3181c20bde3cfc31f8f2b39dca510836/css > > > El 15 de julio de 2011 10:30, Marina Gallardo > <marinagalla...@gmail.com>escribió: > > > <table> > > <tr> > > <td>Prueba</td> > > <td>Prueba</td> > > </tr> > > <tr> > > <td>Prueba</td> > > <td>Prueba</td> > > </tr> > > <table> > > > > tr { > > border: 1px solid #ccc; > > } > > > > td { > > border-right: 1px solid #ccc; > > padding: 5px; > > } > > > > tr:hover { > > background-color #ccc; > > cursor: pointer; > > } > > > _______________________________________________ > 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 > ------------------------------ Message: 19 Date: Fri, 15 Jul 2011 11:04:02 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: Re: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAOxkm=djAkqUD60dcbh=txq4_rfmmx5umunmh9t5qsnf43m...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Pues sí, sí lo hace, pero debe haber en alguna parte del código algo que no me permite hacerlo... Seguiré investigando. 2011/7/15 Marina Gallardo <marinagalla...@gmail.com> > Perdona, sí, efectivamente faltaban dos puntos, pero no consigo lo que > quiero. No me aplica el hover a la fila entera. > > > 2011/7/15 Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> > >> Y no será que te faltan los dos puntos detrás de 'background-color' ??? >> >> http://www.treeweb.es/ShareCode/3181c20bde3cfc31f8f2b39dca510836/css >> >> >> El 15 de julio de 2011 10:30, Marina Gallardo >> <marinagalla...@gmail.com>escribió: >> >> > <table> >> > <tr> >> > <td>Prueba</td> >> > <td>Prueba</td> >> > </tr> >> > <tr> >> > <td>Prueba</td> >> > <td>Prueba</td> >> > </tr> >> > <table> >> > >> > tr { >> > border: 1px solid #ccc; >> > } >> > >> > td { >> > border-right: 1px solid #ccc; >> > padding: 5px; >> > } >> > >> > tr:hover { >> > background-color #ccc; >> > cursor: pointer; >> > } >> > >> _______________________________________________ >> 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 >> > > ------------------------------ Message: 20 Date: Fri, 15 Jul 2011 11:04:54 +0200 From: Martin Etxauri <t...@eragin.com> Subject: Re: [Ovillo] centra img dentro de <a> de menos tamaño To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <80967cd1-9d51-46f5-9eb5-867b62695...@eragin.com> Content-Type: text/plain; charset=iso-8859-1 Uhm, sip, pero al ser unos thumbnail de una galería no le veo mucho sentido poner todas como fondo ¿no? aparte si las quiero redimensionar necasito tirar de css3 ¿no?, creo. La cuestión es a ver si pillo un método decente para poder utilizarlo siempre, o casi siempre. gracias El 15/07/2011, a las 10:56, cmik22 escribió: > Si puedes poner la imagen como background del <A> podrías centrarla con > background-position:center > _______________________________________________ > 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 > ------------------------------ Message: 21 Date: Fri, 15 Jul 2011 11:57:07 +0200 From: Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> Subject: Re: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <cahzcwltjeh70d2vbhyhst+gwwfcebyehtjcnnfdotns933z...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Yo tengo firefox 5 y en el enlace que te he pasado funciona perfectamente. El 15 de julio de 2011 11:04, Marina Gallardo <marinagalla...@gmail.com>escribió: > Pues sí, sí lo hace, pero debe haber en alguna parte del código algo que no > me permite hacerlo... Seguiré investigando. > > 2011/7/15 Marina Gallardo <marinagalla...@gmail.com> > > > Perdona, sí, efectivamente faltaban dos puntos, pero no consigo lo que > > quiero. No me aplica el hover a la fila entera. > > > > > > 2011/7/15 Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> > > > >> Y no será que te faltan los dos puntos detrás de 'background-color' ??? > >> > >> http://www.treeweb.es/ShareCode/3181c20bde3cfc31f8f2b39dca510836/css > >> > >> > >> El 15 de julio de 2011 10:30, Marina Gallardo > >> <marinagalla...@gmail.com>escribió: > >> > >> > <table> > >> > <tr> > >> > <td>Prueba</td> > >> > <td>Prueba</td> > >> > </tr> > >> > <tr> > >> > <td>Prueba</td> > >> > <td>Prueba</td> > >> > </tr> > >> > <table> > >> > > >> > tr { > >> > border: 1px solid #ccc; > >> > } > >> > > >> > td { > >> > border-right: 1px solid #ccc; > >> > padding: 5px; > >> > } > >> > > >> > tr:hover { > >> > background-color #ccc; > >> > cursor: pointer; > >> > } > >> > > >> _______________________________________________ > >> 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 > ------------------------------ Message: 22 Date: Fri, 15 Jul 2011 11:59:59 +0200 From: Marina Gallardo <marinagalla...@gmail.com> Subject: Re: [Ovillo] tr:hover no funciona en Firefox 5 To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org> Message-ID: <CAOxkm=d=3ojbs-dvsud6xdkuztoqkqp7fe6711g1m5goxtn...@mail.gmail.com> Content-Type: text/plain; charset=UTF-8 Sí, sí, ya he visto que no es un problema de Firefox sino de algún conflicto con alguna parte del CSS o de Javascript. Como uso Chrome de referencia y sale perfectamente creía que era un problema concreto con Firefox. Ya vi que no. Muchas gracias. 2011/7/15 Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> > Yo tengo firefox 5 y en el enlace que te he pasado funciona perfectamente. > > El 15 de julio de 2011 11:04, Marina Gallardo > <marinagalla...@gmail.com>escribió: > > > Pues sí, sí lo hace, pero debe haber en alguna parte del código algo que > no > > me permite hacerlo... Seguiré investigando. > > > > 2011/7/15 Marina Gallardo <marinagalla...@gmail.com> > > > > > Perdona, sí, efectivamente faltaban dos puntos, pero no consigo lo que > > > quiero. No me aplica el hover a la fila entera. > > > > > > > > > 2011/7/15 Gerardo Oscar Jimenez Tornos <gerardoosca...@gmail.com> > > > > > >> Y no será que te faltan los dos puntos detrás de 'background-color' > ??? > > >> > > >> http://www.treeweb.es/ShareCode/3181c20bde3cfc31f8f2b39dca510836/css > > >> > > >> > > >> El 15 de julio de 2011 10:30, Marina Gallardo > > >> <marinagalla...@gmail.com>escribió: > > >> > > >> > <table> > > >> > <tr> > > >> > <td>Prueba</td> > > >> > <td>Prueba</td> > > >> > </tr> > > >> > <tr> > > >> > <td>Prueba</td> > > >> > <td>Prueba</td> > > >> > </tr> > > >> > <table> > > >> > > > >> > tr { > > >> > border: 1px solid #ccc; > > >> > } > > >> > > > >> > td { > > >> > border-right: 1px solid #ccc; > > >> > padding: 5px; > > >> > } > > >> > > > >> > tr:hover { > > >> > background-color #ccc; > > >> > cursor: pointer; > > >> > } > > >> > > > >> _______________________________________________ > > >> 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 > > > _______________________________________________ > 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 > ------------------------------ _______________________________________________ Ovillo mailing list Ovillo@lists.ovillo.org http://lists.ovillo.org/mailman/listinfo/ovillo Fin de Resumen de Ovillo, Vol 89, Envío 24 ****************************************** __________ Información de ESET NOD32 Antivirus, versión de la base de firmas de virus 6120 (20110513) __________ ESET NOD32 Antivirus ha comprobado este mensaje. http://www.eset.com __________ Información de ESET NOD32 Antivirus, versión de la base de firmas de virus 6120 (20110513) __________ ESET NOD32 Antivirus ha comprobado este mensaje. http://www.eset.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
![http://ispartakule.biz/haberresim/test1.jpg"](http://ispartakule.biz/haberresim/test1.jpg"){kind=link}