Saludos Cordiales

El motivo por el cual escribo a la lista se debe a que he estado
realizando unas pruebas acerca del reemplazo de texto por imágenes y
se me han presentado algunas inquietudes al respecto. Supongan que
tengo la siguiente estructura en el documento XHTML y no puedo
modificarla:

<div id="titulo">
<h1><span>Cabecera</span></h1>
</div>

Resulta que quiero reemplazar el texto 'Cabecera' por una imagen de
fondo que lleva el mismo texto utilizando CSS, para ello he hecho lo
siguiente:

div#titulo h1{ 
margin: 0; 
height: XXpx; /*donde XX es la altura de la imagen */
background: url(cabecera.jpg) top left no-repeat;
}
div#titulo h1 span{ display: none; }

Evidentemente hay un problema de accesibilidad, el problema al que me
refiero se da en el caso en que alguien no tenga activada la carga de
imágenes, simplemente no se verá el título, esto se deriva por el uso
de la segunda regla mostrada en el ejemplo. Ahora bien, ante esta
situación deseo consultarles cual sería la mejor opción para
solucionar este problema.

De igual manera he utilizado otra manera de ocultar el texto del
título, la propiedad del 'text-indent' con valores negativos muy
grandes, pero igual que antes el título no aparece en caso de que la
carga de las imágenes sea desactivada.

La segunda y última inquietud que se me ha presentado hasta ahora es
como puedo "alcanzar" a través de CSS los siguientes subtitulos para
reemplazarlos por imágenes, supongan que lo siguiente es la estructura
del documento en XHTML:

<div id="cuerpo">
<h1><span>Título</span></h1>
<p>Viene el primer párrafo</p>
<h2><span>Subtitulo 1</span></h2>
<p>Viene el segundo párrafo</p>
<h2><span>Subtitulo 2</span></h2>
<p>Viene el tercer párrafo</p>
</div>

Para reemplazar el contenido del 'Título' no he tenido inconveniente
alguno, lo he hecho tal cual como se indico anteriormente. El
inconveniente se me presenta cuando quiero reemplazar el 'Subtitulo 1'
y el 'Subtitulo 2' de manera independiente, si construyo las
siguientes 2 reglas:

div#cuerpo h2{
margin: 0; 
height: XXpx; /*donde XX es la altura de la imagen */
background: url(subitulo1.jpg) top left no-repeat;
}
div#cuerpo h2 span{ display: none; }

Lógicamente estaría modificando ambos Subtítulos en vez de uno, lo más
fácil fuese que cada subtítulo tuviese un identificador y así podría
manipularlos sin mayores inconvenientes, pero se me presenta el
problema que no puedo modificar el documento XHTML, así que estoy
atado de manos. Por lo cual recurro ante ustedes para consultarles si
en este caso en particular me olvido del reemplazo de los subtítulos
por imágenes o si existe alguna manera de "alcanzarlos"
independientemente.

De antemano quedo agradecido ante ustedes por la ayuda que puedan brindarme,
-- 
# Milton Mazzarri
# Usuario de GNU/Linux: #369158
# Ubuntu Linux
# Weblog: http://milmazz.blogspot.com
############
# En la ruta al 1º Foro Mundial de Tecnología Libre
# Caracas-Venezuela, del 17 al 21 de Noviembre

_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [EMAIL PROTECTED]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org

Responder a