Re: Reemplazo de texto con imágenes (era: Re: [Ovillo] Correcto uso de H1)
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Ramon Pravia wrote: sólo en el caso de que las hayamos insertado con la etiqueta img. Si la hemos puesto como imagen de fondo con css, no hay ningún texto alternativo. :) Hey, es verdad!!! Tienes razón. Creo que tendremos que recuperar tu modus operandi :-) - -- /* Daniel Torres Burriel - www.torresburriel.com /* Web design - Usability consulting - IT Press /* More info bio: www.torresburriel.com/perfil/ /* GPG key: 0x43DB2AB7 -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.3-cvs (MingW32) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iD8DBQFD0fxRLelthkPbKrcRAgEaAKCjxwVRYgMQVek4OFbssenSs6rIawCgtLi2 T5VC4npedvSI2IvE0ZJb4Lo= =15Ey -END PGP SIGNATURE- ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes ( era: Re: [Ovillo] Correcto uso de H1)
Carlos Revillo escribió:
el :after en IE si le das un ancho al alemento en cuestión... no se si te
servirá para lo que pretendes hacer, pero cuando yo he querido aplicar
:alter he hecho algo como
#capa {... ; width:{ancho}}
#capa:after{bla bla}
Ese ancho lo especificas bien en px o en %. Incluso en em. No me acuerdo si
también funciona si pones width:auto.
Eso sí, por más q lo intenté, jamás lo hice funcionar en ie5 para mac...
Carlos, IE no soporta el uso del pseudoelemento :after. Si me dices que lo
has usado en algún sitio y has conseguido que IE lo interprete
correctamente, da más datos, porque sería la primera noticia que tengo de
tal cosa.
Lo que dices de que funciona dándole ancho al elemento en cuestión, creo que
puede que te estés confundiendo por una cosa. A veces se usa :after para que
un elemento contenga a sus flotantes, metiendo un contenido en after y
dándole clear:both. Este sistema no funciona en IE porque, como te digo, no
soporta el pseudoelemento :after. El caso es que en explorer, si un elemento
tiene unas dimensiones definidas, por ejemplo un width, entonces
automáticamente contiene a sus elementos hijos flotantes. Puede que alguna
vez te pasara eso y pensaras que lo que hacía entonces era interpretarte el
:after.
Saludos
--
Ramón
demasiado viejo para ser una joven promesa,
demasiado joven para ser una vieja gloria,
pero aún así trabajando duro para Simplelógica: apariencia, experiencia y
comunicación en la web
http://simplelogica.net # (+34) 98 522 12 65
http://simplelogica.net/caoticoneutral/
___
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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes (era: Re: [Ovillo] Correcto uso de H1)
Hola Ramón. Muchas gracias por tus explicaciones.
Ramon Pravia escribió:
Meter el texto del encabezado en un elemento (normalmente span) que
ocultamos con visibility:hidden, como se hace en la web que dice Dani.
Problema: la css oculta siempre el texto. Si deshabilitamos las imágenes por
cualquier motivo no tenemos ni texto ni imágenes.
Es cierto.
Utilizamos un text-indent negativo de un valor muy alto para mover el texto
fuera del elemento. Tenemos el mismo problema de antes, con CSS + imágenes
deshabilitadas, no vemos nada.
Tb es cierto.
Añadir al encabezado en cuestión otro elemento o pseudo-elemento que
colocamos encima de éste con css (márgenes negativos, position absolute...
lo que sea), y en el que colocamos como imagen de fondo el rótulo que
queremos mostrar, de forma que al estar por encima del texto lo oculta. De
esta manera el texto está presente siempre. Si hay css con imágenes
deshabilitadas, al no haber imagen, se ve el texto. Para mi, esta es la
mejor solución, ya sea poniendo el elemento extra en el código, que queda no
muy elegante:
h1Texto de encabezadospan/span/h1
Esta opción me gusta más. Una variante, que también funciona en IE,
podría ser esta:
h1Título/h1
div id=zonacabecera/div
Donde zonacabecera incluye la imagen de fondo. El CSS:
h1 {
position : absolute;
z-index : 0; /* será inferior al z-index de zonacabecera */
}
S2
--
==#==
José Montes Cuadrado
___
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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes (era: Re: [Ovillo] Correcto uso de H1)
Ramón escribió: Añadir al encabezado en cuestión otro elemento o pseudo-elemento que colocamos encima de éste con css (márgenes negativos, position absolute... lo que sea), y en el que colocamos como imagen de fondo el rótulo que queremos mostrar, de forma que al estar por encima del texto lo oculta. De esta manera el texto está presente siempre. Si hay css con imágenes deshabilitadas, al no haber imagen, se ve el texto. Para mi, esta es la mejor solución, ya sea poniendo el elemento extra en el código, que queda no muy elegante: h1Texto de encabezadospan/span/h1 O utilizando h1:after, que es infinitamente más elegante. Claro que IE no lo soporta, y hay que hacer un hack bastante antiestético [1] Pero esto me genera una duda, Cómo estamos seguros del ancho del texto dentro del h1 como para darle margin-left negativo al span? eh? -- Martin Szyszlican www.y.net.ar ___ 1GB gratis, Antivirus y Antispam Correo Yahoo!, el mejor correo web del mundo http://correo.yahoo.com.ar ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes ( era: Re: [Ovillo] Correcto uso de H1)
Martin Szyszlican escribió: Ramón escribió: h1Texto de encabezadospan/span/h1 O utilizando h1:after, que es infinitamente más elegante. Claro que IE no lo soporta, y hay que hacer un hack bastante antiestético [1] Pero esto me genera una duda, Cómo estamos seguros del ancho del texto dentro del h1 como para darle margin-left negativo al span? eh? En el caso del span, lo normal sería trabajar con posicionamiento absoluto. Convertiríamos el h1 en el bloque de contención del span dándole un position:relative, luego al span le daríamos un display:block, y fijaríamos su posición con respecto al h1 (top:0; left:0). Básicamente sería eso. Disculpa que no te facilite una url en donde se explique más detenidamente el tema, pero ahora mismo no tengo tiempo :( saludos -- Ramón demasiado viejo para ser una joven promesa, demasiado joven para ser una vieja gloria, pero aún así trabajando duro para Simplelógica: apariencia, experiencia y comunicación en la web http://simplelogica.net # (+34) 98 522 12 65 http://simplelogica.net/caoticoneutral/ ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes (era: Re: [Ovillo] Correcto uso de H1)
Lo que dices de que funciona dándole ancho al elemento en cuestión, creo que puede que te estés confundiendo por una cosa. A veces se usa :after para que un elemento contenga a sus flotantes, metiendo un contenido en after y dándole clear:both. Este sistema no funciona en IE porque, como te digo, no soporta el pseudoelemento :after. El caso es que en explorer, si un elemento tiene unas dimensiones definidas, por ejemplo un width, entonces automáticamente contiene a sus elementos hijos flotantes. Puede que alguna vez te pasara eso y pensaras que lo que hacía entonces era interpretarte el :after. pues sí va a ser q el equivocado en eso era yo. gracias por aclararlo... es exactamente ese el caso. ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes (era: Re: [Ovillo] Correcto uso de H1)
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Ramon Pravia wrote: Meter el texto del encabezado en un elemento (normalmente span) que ocultamos con visibility:hidden, como se hace en la web que dice Dani. Problema: la css oculta siempre el texto. Si deshabilitamos las imágenes por cualquier motivo no tenemos ni texto ni imágenes. Pero cuidado. Si navegamos sin imágenes siempre tendremos el valor del texto alternativo. - -- /* Daniel Torres Burriel - www.torresburriel.com /* Web design - Usability consulting - IT Press /* More info bio: www.torresburriel.com/perfil/ /* GPG key: 0x43DB2AB7 -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.3-cvs (MingW32) Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org iD8DBQFD0SHMLelthkPbKrcRAp0zAKDroLuKroSIwgJa0b1SUdJ2GMY7OwCfS76y BC1tK78rTYqRacuZ4YEAf7c= =ZOBA -END PGP SIGNATURE- ___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Reemplazo de texto con imágenes ( era: Re: [Ovillo] Correcto uso de H1)
Daniel Torres Burriel escribió (Fri, 20 Jan 2006 18:45:48 +0100): Ramon Pravia wrote: Meter el texto del encabezado en un elemento (normalmente span) que ocultamos con visibility:hidden, como se hace en la web que dice Dani. Problema: la css oculta siempre el texto. Si deshabilitamos las imágenes por cualquier motivo no tenemos ni texto ni imágenes. Pero cuidado. Si navegamos sin imágenes siempre tendremos el valor del texto alternativo. sólo en el caso de que las hayamos insertado con la etiqueta img. Si la hemos puesto como imagen de fondo con css, no hay ningún texto alternativo. :) -- Ramón demasiado viejo para ser una joven promesa, demasiado joven para ser una vieja gloria, pero aún así trabajando duro para Simplelógica: apariencia, experiencia y comunicación en la web http://simplelogica.net # (+34) 98 522 12 65 http://simplelogica.net/caoticoneutral/ ___ 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://ovillo.org/mailman/listinfo/ovillo
