[Ovillo] Como ubicar imagen en los costados del DIV contenedor
Hola nuevamente, ahora tengo una nueva problemática y no tengo la menor idea de por dónde entrarle. Resulta que a cada costado de un DIV (#column_left) contenedor deben ir dos imágenes (derecha: http://img255.imageshack.us/img255/9488/menuvbarraderpg.jpg, izquierda: http://img210.imageshack.us/img210/5518/menuvbarraizqjpg.jpg) diferentes las cuales no tienen un contorno parejo como para ponerlas a base de la propiedad border sino que es parte del diseño y tengo que ubicarlas allí a como sea. Tienen alguna idea de cómo lograr este comportamiento? Saludos y 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
Re: [Ovillo] Poner vínculo encima de imagen
> Prueba a hacer estos cambios reutilizando tu código:
>
> Primero, una clase idéntica para todos
>
> li.categoria {
> width: 175px;
> height: 57px;
> display: block;
> }
>
Excelente Jairo, los cambios han funcionado perfectamente ...
> añade la clase del enlace, se te olvió (o no la he visto)
>
> li.categoria a {
> width: 175px;
> height: 57px;
> display: block;
> text-indent:-999em;
> }
>
>
[ReynierPM]
La había olvidado ya la añadí y ahora funciona, eso me faltaba por eso no me
ponía el enlace correspondiente ;)
> Por ciero, sobra el que aparece en cada
[ReynierPM]
Este sobraba ... fueron unas pruebas que estuve haciendo y no me había
percatado :D
Saludos
___
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] Poner vínculo encima de imagen
No lo sabrás hasta que lo intentes ;) En mi caso, siempre uso @font-face cuando se necesita, hasta donde se pueda y siempre que puedo. Cuando tengo problemas de compatibilidad me resigno a las imágenes, pero como sé que el texto plano tiene mejores resultados de SEO y a veces también eso es lo que estoy vendiendo (prometiendo), insisto con el cliente o los diseñadores para cambiar de fuente antes que usar imágenes, je. Cuando no hay de otra, ni modo, imágenes (al final hay que ser práctico). Mira, acá hay otras opciones un tanto alternas a @font-face que seguro te ahorrarán tiempo pensando en la compatibilidad. Pero es debatible porque, aunque no conozco bien esta api de google, creo que las dos usan javascript para funcionar, lo cual nos lleva a la discusión de siempre ¿javascriptear o no javascriptear? ésa es la cuestión. Lo que siempre se dice: mientras menos javascript uses, mejor (según algunos). http://code.google.com/webfonts http://webfonts.fonts.com/ De todas formas chécalas y si te acomodan, úsalas. Y nomás por no dejar, para mostrarte que el problema de compatibilidad puede ser resuelto satisfactoriamente te paso este link de un maquetado que hice recién: http://salonendesarrollo.com/esmas-moda/ Inténtalo.. -- Jorge Noricumbo - Original Message > From: Reynier Pérez Mira > To: "Ovillo, la lista de CSS en castellano" > Sent: Sat, September 18, 2010 8:43:07 PM > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > > Me parece buena la solución de Jorge Noricumbo, si trabajas con imágenes > > para cada enlace el tema se va a hacer más pesado, sumado a esto las > > imágenes de hover, avtive consumirán espacio y posiblemente más > > peticiones al servidor. Sin embargo al usar @fontface debes tener fuentes > > compatibles para todos los navegadores igualmente habrá más peso en el > > tema, en mi opinión usaría una sola imagen con las tres acciones y las > movería > > dentro del -x -y más @fontface e igualmente tendrías solucionado lo > de > > SEO. > > Hmmm estuve leyendo detenidamente el artículo de Maestros del Web y creo que > tiene bastante contras como para ser usada en ambientes de producción o me > estoy equivocando? Hasta el momento solo he visto la ventaja del SEO pero > fuera de ello todo es problemas: soporte y compatibilidad en navegadores > diferentes pues no todo el mundo usa Firefox, Chrome, Opera o cualquier otro > navegador que respete estándares sino que aún mantienen un inmenso amor por > el IE, inconsistencias en el rendereo de las fuentes, el peso de las fuentes > que a veces una sola pesa más que 10 imágenes y por último los derechos o > copyright. En este caso ustedes que harían? Seguir adelante y usar > @font-face o mantenerse a la antigua con las imágenes como he estado > haciendo hasta el momento? > > Saludos > > > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
> También buena la recomendación de Xavier (: > Esos se llaman "sprites", alguna vez leí que los adoptamos de su uso en los > videojuegos de 8-bits(1). Se trata de una sola imagen que contiene > diferentes estados para el mismo elemento. En web se usa mucho para los > botones y como bien decía Xavier, al juntar todos los estados en una sola > imagen, reduces las peticiones al servidor y quizá el peso de las tres > imágenes separadas. Además, obviamente, del tiempo de carga del > documento completo. Bueno eso no aplica en mi caso porque no tengo 3 imágenes pues el cliente solo pidió un solo estado así que es sola esa imagen que ven ahí no obstante gracias por el dato lo tendré en cuenta cuando lo necesite. Saludos ___ 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] Poner vínculo encima de imagen
> Me parece buena la solución de Jorge Noricumbo, si trabajas con imágenes > para cada enlace el tema se va a hacer más pesado, sumado a esto las > imágenes de hover, avtive consumirán espacio y posiblemente más > peticiones al servidor. Sin embargo al usar @fontface debes tener fuentes > compatibles para todos los navegadores igualmente habrá más peso en el > tema, en mi opinión usaría una sola imagen con las tres acciones y las movería > dentro del -x -y más @fontface e igualmente tendrías solucionado lo de > SEO. Hmmm estuve leyendo detenidamente el artículo de Maestros del Web y creo que tiene bastante contras como para ser usada en ambientes de producción o me estoy equivocando? Hasta el momento solo he visto la ventaja del SEO pero fuera de ello todo es problemas: soporte y compatibilidad en navegadores diferentes pues no todo el mundo usa Firefox, Chrome, Opera o cualquier otro navegador que respete estándares sino que aún mantienen un inmenso amor por el IE, inconsistencias en el rendereo de las fuentes, el peso de las fuentes que a veces una sola pesa más que 10 imágenes y por último los derechos o copyright. En este caso ustedes que harían? Seguir adelante y usar @font-face o mantenerse a la antigua con las imágenes como he estado haciendo hasta el momento? Saludos ___ 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] Poner vínculo encima de imagen
También buena la recomendación de Xavier (: Esos se llaman "sprites", alguna vez leí que los adoptamos de su uso en los videojuegos de 8-bits(1). Se trata de una sola imagen que contiene diferentes estados para el mismo elemento. En web se usa mucho para los botones y como bien decía Xavier, al juntar todos los estados en una sola imagen, reduces las peticiones al servidor y quizá el peso de las tres imágenes separadas. Además, obviamente, del tiempo de carga del documento completo. Acá una lista de cosas que puedes leer: http://www.google.com.mx/search?q=css+sprites Acá un turorial en español, aunque en inglés hay muchos más: http://www.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/ A veces lo que necesitas es el nombre de las cosas. Con eso google se convierte en tu mejor amigo ;) (1) Acá lo de los videojuegos y un tutorial en inglés: http://www.alistapart.com/articles/sprites -- Jorge Noricumbo - Original Message > From: Xavier Araque A.|Rendergraf > To: "Ovillo, la lista de CSS en castellano" > Sent: Sat, September 18, 2010 7:33:33 PM > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > Me parece buena la solución de Jorge Noricumbo, si trabajas con > imágenes para cada enlace el tema se va a hacer más pesado, sumado a > esto las imágenes de hover, avtive consumirán espacio y posiblemente > más peticiones al servidor. Sin embargo al usar @fontface debes tener > fuentes compatibles para todos los navegadores igualmente habrá más > peso en el tema, en mi opinión usaría una sola imagen con las tres > acciones y las movería dentro del -x -y más @fontface e > igualmente tendrías solucionado lo de SEO. > > Suerte > > -- > -Xavier- > > La paciencia es una virtud, La constancia nos lleva al éxito - > Patience is a Virtue, Perseverance leads to success. > > Las cosas más importantes no son la mayoría de las cosas. > > 3D Character Development, Graphic Designer and Web Engineer > > http://linuxtachira.org > http://rendergraf.wordpress.com > Telf.: +58 416 1027262 > Linux counter: 292510 > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
Me parece buena la solución de Jorge Noricumbo, si trabajas con imágenes para cada enlace el tema se va a hacer más pesado, sumado a esto las imágenes de hover, avtive consumirán espacio y posiblemente más peticiones al servidor. Sin embargo al usar @fontface debes tener fuentes compatibles para todos los navegadores igualmente habrá más peso en el tema, en mi opinión usaría una sola imagen con las tres acciones y las movería dentro del -x -y más @fontface e igualmente tendrías solucionado lo de SEO. Suerte -- -Xavier- La paciencia es una virtud, La constancia nos lleva al éxito - Patience is a Virtue, Perseverance leads to success. Las cosas más importantes no son la mayoría de las cosas. 3D Character Development, Graphic Designer and Web Engineer http://linuxtachira.org http://rendergraf.wordpress.com Telf.: +58 416 1027262 Linux counter: 292510 ___ 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] Poner vínculo encima de imagen
Prueba a hacer estos cambios reutilizando tu código:
Primero, una clase idéntica para todos
li.categoria {
width: 175px;
height: 57px;
display: block;
}
añade la clase del enlace, se te olvió (o no la he visto)
li.categoria a {
width: 175px;
height: 57px;
display: block;
text-indent:-999em;
}
añade a cada elemento su estilo su correspondiente imagen
o bien crear estilos con esa imágenes y los aplicas así
Por ciero, sobra el que aparece en cada
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 19 de septiembre de 2010 01:29, Reynier Pérez Mira escribió:
> La web está colgada aquí: http://www.tanoshi.com.ar/opc/ para que vean a
> lo
> q me refiero ;)
>
> > -Original Message-
> > From: ovillo-boun...@lists.ovillo.org
> [mailto:ovillo-boun...@lists.ovillo.org]
> > On Behalf Of Sordotone
> > Sent: Saturday, September 18, 2010 3:35 PM
> > To: Ovillo, la lista de CSS en castellano
> > Subject: Re: [Ovillo] Poner vínculo encima de imagen
> >
> > El 18 de septiembre de 2010 22:02, Reynier Pérez Mira
> > > > escribió:
> >
> > > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver
> > > si lo logro encuadrar todo
> >
> >
> > Me alegro ;P
> >
> > --
> > Usuario Linux Nº #395787
> > ___
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a ovi...@lists.ovillo.orgpuedes
> > 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
Re: [Ovillo] Poner vínculo encima de imagen
venía siguiendo el hilo y no entendía bien qué estabas intentando hacer.. ahora viendo el diseño y tu código creo que quieres "poner un enlace encima de una imagen" por cuestiones de SEO, cierto? si es así, te recomiendo más usar @font-face para agregar la fuente al diseño y sólo poner los bordes dibujados como imagen de fondo en cada li o todo el ul si querías que la imagen fuera una liga, sólo debías hacer esto: claro, con sus respectivos "title" y "alt".. aunque no hubiera sido por SEO que iniciaste el hilo, te recomiendo que uses @font-face justamente por eso: Search Engine Optimization.. aquí una lista de cosas que puedes leer para familiarizarte con @font-face: http://www.google.com.mx/search?q=css+%40font-face y acá un post que parece bueno: http://www.maestrosdelweb.com/editorial/que-es-font-face/ saludos y suerte (: -- Jorge Noricumbo - Original Message > From: Reynier Pérez Mira > To: "Ovillo, la lista de CSS en castellano" > Sent: Sat, September 18, 2010 6:29:16 PM > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > La web está colgada aquí: http://www.tanoshi.com.ar/opc/ para que vean a lo > q me refiero ;) > > > -Original Message- > > From: ovillo-boun...@lists.ovillo.org > [mailto:ovillo-boun...@lists.ovillo.org] > > On Behalf Of Sordotone > > Sent: Saturday, September 18, 2010 3:35 PM > > To: Ovillo, la lista de CSS en castellano > > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > > > El 18 de septiembre de 2010 22:02, Reynier Pérez Mira > > > > escribió: > > > > > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver > > > si lo logro encuadrar todo > > > > > > Me alegro ;P > > > > -- > > Usuario Linux Nº #395787 > > ___ > > 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
Re: [Ovillo] Poner vínculo encima de imagen
Sordotone, pérdoname por no haberlo hecho como tú. -- Jairo Ochoa Dropbox - Almacenamiento gratis / Free online backup https://www.dropbox.com/referrals/NTg2Njc1MTg5 El 19 de septiembre de 2010 00:14, Sordotone escribió: > El 19 de septiembre de 2010 00:03, Jairo Ochoa >escribió: > > > tienes razón, > > Si > > > también se podría hacer con text-indent > > No, también, no, es la óptima, al menos, mucho más óptima que envolver el > enlace de divs y spans para hacer exactamente lo mismo. > > > pero así es como se me > > ocurrió a mi > > > Sin comentarios. > > -- > Usuario Linux Nº #395787 > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
La web está colgada aquí: http://www.tanoshi.com.ar/opc/ para que vean a lo q me refiero ;) > -Original Message- > From: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] > On Behalf Of Sordotone > Sent: Saturday, September 18, 2010 3:35 PM > To: Ovillo, la lista de CSS en castellano > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > El 18 de septiembre de 2010 22:02, Reynier Pérez Mira > > escribió: > > > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver > > si lo logro encuadrar todo > > > Me alegro ;P > > -- > Usuario Linux Nº #395787 > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
Hmmm, intenté aplicar el mismo comportamiento a un menú vertical pero no me funciona el enlace o sea al parecer el text-indent: -999px hace demasiado efecto, alguna sugerencia? > -Original Message- > From: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] > On Behalf Of Sordotone > Sent: Saturday, September 18, 2010 3:35 PM > To: Ovillo, la lista de CSS en castellano > Subject: Re: [Ovillo] Poner vínculo encima de imagen > > El 18 de septiembre de 2010 22:02, Reynier Pérez Mira > > escribió: > > > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver > > si lo logro encuadrar todo > > > Me alegro ;P > > -- > Usuario Linux Nº #395787 > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
El 19 de septiembre de 2010 00:03, Jairo Ochoa escribió: > tienes razón, Si > también se podría hacer con text-indent No, también, no, es la óptima, al menos, mucho más óptima que envolver el enlace de divs y spans para hacer exactamente lo mismo. > pero así es como se me > ocurrió a mi > Sin comentarios. -- Usuario Linux Nº #395787 ___ 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] Poner vínculo encima de imagen
tienes razón, también se podría hacer con text-indent pero así es como se me
ocurrió a mi
la estructura de la imagen es una lista y cada cuadro un
http://cl.ly/0c2d06c2e7b147657466
http://cl.ly/88a17824fd7579bf347d
--
Jairo Ochoa
Dropbox - Almacenamiento gratis / Free online backup
https://www.dropbox.com/referrals/NTg2Njc1MTg5
El 18 de septiembre de 2010 22:58, Sordotone escribió:
> El 18 de septiembre de 2010 22:49, Sordotone
> escribió:
>
> >
> >
> > El 18 de septiembre de 2010 22:19, Jairo Ochoa >escribió:
> >
> > Es el el que se oculta, de manera que está el texto pero no se
> ve.
> >> El debe ser visible.
> >>
> >> Fijaos en estas dos capturas de pantalla:
> >> http://cl.ly/0c2d06c2e7b147657466
> >> http://cl.ly/88a17824fd7579bf347d
> >>
> >> El primer caso es el estado normal y el segundo cuando paso el ratón por
> >> encima del cuadro.
> >> Simplemente hago un display:block al cuando hover.
> >> (en el cuadro de provincias de España)
> >
> >
> > Pero qué sentido tiene ahí el span?, sobra, usando el css de antes solo
> > necesitas que en el a:hover el text indent sea 0 ó positivo, y con esto,
> > solo necesitas el enlace y nada más, o no?
> >
> > Osea
> a.loquesea
> {
> display: block;
> text-indent: -em;
> width: XXXpx;
> height: XXXpx;
> background: url('img.jpg');
> }
> a.loquesea:hover
> {
> text-indent: 0;
> }
> Enlace
>
> Creo que hay una diferencia considerable de código, no?
>
>
>
> --
> Usuario Linux Nº #395787
> ___
> 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
Re: [Ovillo] Poner vínculo encima de imagen
El 18 de septiembre de 2010 22:49, Sordotone escribió:
>
>
> El 18 de septiembre de 2010 22:19, Jairo Ochoa
> escribió:
>
> Es el el que se oculta, de manera que está el texto pero no se ve.
>> El debe ser visible.
>>
>> Fijaos en estas dos capturas de pantalla:
>> http://cl.ly/0c2d06c2e7b147657466
>> http://cl.ly/88a17824fd7579bf347d
>>
>> El primer caso es el estado normal y el segundo cuando paso el ratón por
>> encima del cuadro.
>> Simplemente hago un display:block al cuando hover.
>> (en el cuadro de provincias de España)
>
>
> Pero qué sentido tiene ahí el span?, sobra, usando el css de antes solo
> necesitas que en el a:hover el text indent sea 0 ó positivo, y con esto,
> solo necesitas el enlace y nada más, o no?
>
> Osea
a.loquesea
{
display: block;
text-indent: -em;
width: XXXpx;
height: XXXpx;
background: url('img.jpg');
}
a.loquesea:hover
{
text-indent: 0;
}
Enlace
Creo que hay una diferencia considerable de código, no?
--
Usuario Linux Nº #395787
___
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] Poner vínculo encima de imagen
El 18 de septiembre de 2010 22:19, Jairo Ochoa escribió: > Es el el que se oculta, de manera que está el texto pero no se ve. > El debe ser visible. > > Fijaos en estas dos capturas de pantalla: > http://cl.ly/0c2d06c2e7b147657466 > http://cl.ly/88a17824fd7579bf347d > > El primer caso es el estado normal y el segundo cuando paso el ratón por > encima del cuadro. > Simplemente hago un display:block al cuando hover. > (en el cuadro de provincias de España) Pero qué sentido tiene ahí el span?, sobra, usando el css de antes solo necesitas que en el a:hover el text indent sea 0 ó positivo, y con esto, solo necesitas el enlace y nada más, o no? -- Usuario Linux Nº #395787 ___ 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] Poner vínculo encima de imagen
Es el el que se oculta, de manera que está el texto pero no se ve. El debe ser visible. Fijaos en estas dos capturas de pantalla: http://cl.ly/0c2d06c2e7b147657466 http://cl.ly/88a17824fd7579bf347d El primer caso es el estado normal y el segundo cuando paso el ratón por encima del cuadro. Simplemente hago un display:block al cuando hover. (en el cuadro de provincias de España) -- Jairo Ochoa Dropbox - Almacenamiento gratis / Free online backup https://www.dropbox.com/referrals/NTg2Njc1MTg5 El 18 de septiembre de 2010 22:05, Sordotone escribió: > El 18 de septiembre de 2010 22:02, Reynier Pérez Mira < > reynie...@hotmail.com > > escribió: > > > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver si > lo > > logro encuadrar todo > > > Me alegro ;P > > -- > Usuario Linux Nº #395787 > ___ > 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
Re: [Ovillo] Poner vínculo encima de imagen
El 18 de septiembre de 2010 22:02, Reynier Pérez Mira escribió: > Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver si lo > logro encuadrar todo Me alegro ;P -- Usuario Linux Nº #395787 ___ 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] Poner vínculo encima de imagen
Sos mi héroe Sordonte, esta opción me ha funcionado mejor vamos a ver si lo
logro encuadrar todo
> -Original Message-
> From: ovillo-boun...@lists.ovillo.org
[mailto:ovillo-boun...@lists.ovillo.org]
> On Behalf Of Sordotone
> Sent: Saturday, September 18, 2010 3:16 PM
> To: Ovillo, la lista de CSS en castellano
> Subject: Re: [Ovillo] Poner vínculo encima de imagen
>
> El 17 de septiembre de 2010 01:08, Reynier Pérez Mira
> > escribió:
>
> > Hola a todos:
> >
> > Se puede poner un enlace encima de una imagen? Lo que quiero lograr es
> > q el fondo del enlace sea una imagen pero no sé cómo, alguna ayudita?
>
>
> No se si entendí bien, por que no parece tan complicado, luego seguro que
> me confundo pero no te vale esto?:
> a
> {
> display: block;
> text-indent: -em;
> width: XXXpx;
> height: XXXpx;
> background: url('img.jpg');
> }
> --
> Usuario Linux Nº #395787
> ___
> 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
Re: [Ovillo] Poner vínculo encima de imagen
El 17 de septiembre de 2010 01:08, Reynier Pérez Mira escribió:
> Hola a todos:
>
> Se puede poner un enlace encima de una imagen? Lo que quiero lograr es q el
> fondo del enlace sea una imagen pero no sé cómo, alguna ayudita?
No se si entendí bien, por que no parece tan complicado, luego seguro que me
confundo pero no te vale esto?:
a
{
display: block;
text-indent: -em;
width: XXXpx;
height: XXXpx;
background: url('img.jpg');
}
--
Usuario Linux Nº #395787
___
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] Poner vínculo encima de imagen
Excelente Jairo pero ahora tengo un problema, cuando oculto el texto del
enlace (es una imagen para sustituir el enlace en texto por la imagen) se me
oculta el enlace y por tanto pierdo el vínculo. Este es el código q estoy
usando:
div#hm_inicio {
background: url('../image/hmenu/botonhiniciojpg.jpg') no-repeat
transparent;
width: 101px;
height: 35px;
}
span#hidden {
visibility: hidden;
}
Enlace
Q estoy haciendo mal?
Saludos
> -Original Message-
> From: ovillo-boun...@lists.ovillo.org
[mailto:ovillo-boun...@lists.ovillo.org]
> On Behalf Of Jairo Ochoa
> Sent: Thursday, September 16, 2010 6:52 PM
> To: Ovillo, la lista de CSS en castellano
> Subject: Re: [Ovillo] Poner vínculo encima de imagen
>
> Prueba con esto.
>
> Enlace
>
> --
>
> Jairo Ochoa
>
> Dropbox - Almacenamiento gratis / Free online backup
> https://www.dropbox.com/referrals/NTg2Njc1MTg5
>
>
>
> El 17 de septiembre de 2010 01:08, Reynier Pérez Mira
> > escribió:
>
> > Hola a todos:
> >
> > Se puede poner un enlace encima de una imagen? Lo que quiero lograr es
> > q el fondo del enlace sea una imagen pero no sé cómo, alguna ayudita?
> >
> >
> >
> > Saludos y desde ya muchas 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
___
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
