On dj, 2004-11-04 at 21:36, Milton Mazzarri wrote:
> 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>
Lo que preguntas es un interesante problema. Partiendo del hecho que
comentas que no puedes modificar el XHTML, he estado probando distintas
posibilidades que ofrece el CSS.
Para empezar está la solución elegante que, sin embargo, la implementa
CSS3 y aún no aparece en ningún (que yo sepa) navegador:
h2:nth-child(1) { color: blue; }
h2:nth-child(2) { color: green; }
Con esto seleccionarías que 'hijo' quieres.
Otra alternativa (que tampoco creo que funciona aún) es:
h2:contains("Subtitulo 1") { color: blue; }
h2:contains("Subtitulo 2") { color: green; }
Con lo que puedes 'capturar' el contenido de un elemento.
En CSS2.1 tienes una opción que debería funcionar, pero que, sin
embargo, no he conseguido que lo haga:
h1 { counter-reset: subtitulos }
h2
{
visibility: hidden;
counter-increment: subtitulos;
}
h2:before { content: "<img src=\""counter(subtitulos)".png\" ...."; }
Con esto creas un contador para los elementos 'h2' que se resetea a cada
'h1'. Una vez encuentra un 'h2' no lo muestra y lo que hace es agregar
en su código un elemento imagen apuntando al número-de-contador.png con
lo que podrías enlazar imágenes para cada subtítulo... Lo he probado en
Firefox y parece no funcionar, tampoco me estraña pues es una solución
un tanto chapuzera.
Aunque para chapuza aunténtica, la única que he encontrado que te puede
servir:
div > h1 + p + h2 { color: red; }
div > h2 + p + h2 { color: green; }
Esta solución dice que, dado un hijo de 'div', si es un 'h2' precedido
por un 'p' precedido, a su vez, por un 'h1' lo coloree de rojo. En el
caso que sea un 'h2' precedido por un 'p' y un 'h2' lo colorea de verde.
Esto tampoco es nada elegante pero, dada tu situación, es la única
solución que veo viable.
Claro está que no creo que la página que deseas maquetar se parezca
demasiado al código que has dado de ejemplo y, si quieres usar esta
solución, deberás encontrar secuencias diferenciales para cada
subtítulo. Vamos, que según como sea la página tienes trabajo...
saludos!
--
Dani Armengol Garreta
JID: [EMAIL PROTECTED]
WWW: http://parap.melindro.com
_______________________________________________
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
