Capa con dos imágenes de fondo
5 seguidores
Pues como indica el título, tengo un div que tiene que llevar dos imágenes de fondo, ya que lleva un marco por arriba y otro por abajo (son background images). El tema es que no se muy bien como sería la manera más correcta semánticamente, ya que para hacer esto debería anidar dos divs simplemente por una tema de presentación, manchando de esta forma el marcado.
No se me ocurre otra manera de hacerlo...
Un saludo y gracias.
Diego
txuma
Semánticamente no creo que haya nada 'muy correcto', es decir, que para que te funcione bien vas a tener que hacer algo de 'marcado extra'. En muchos casos yo tiro por un [span] y dentro, si procede, un [hr] que oculto y sustituyo por la imagen de fondo.
zigotica
lo que dice txuma, a veces puedes aprovechar ciertos elementos del bloque, por ejemplo, poner un fondo al div y otro a una lista de enlaces, al ultimo parrafo, etc.
demssite
Mmmm pero si el div contenedor tiene padding que es mi caso para separar el contenido del contenedor al poner como background image del último elemento del contenedor no me cuadra...
¿Me entendéis?
txuma
Sí, te entiendo. Me hago una idea de lo que necesitas, y no se me ocurre ninguna posibilidad que no sea utilizando marcado extra. Y cuando ya vamos a ese tipo de soluciones, la que mas te guste, o la que sea más inocua :)
demssite
Gracias Txuma, además he estado mirando por sitios que se suponen accesibles y coincide que en la fundación CTIC, que son los del validador de accesibilidad TAW utiliozan una solución de añadiendo marcado extra para presentación. Si te fijas en el código para el marco exterior utilizan 3 div's.
pseudo
En estos casos siempre me he preguntado por qué se rehuye tanto de las imágenes en el html con alt vacío, ¿no es semánticamente lo menos incorrecto, una imagen diciendo que carece de contenido?
txuma
pseudo
En estos casos siempre me he preguntado por qué se rehuye tanto de las imágenes en el html con alt vacío, ¿no es semánticamente lo menos incorrecto, una imagen diciendo que carece de contenido?
Si la imagen es contenido, debe ir en el HTML, pero si es algo 'decorativo' debe meterse a través de la hoja de estilos.
pseudo
Ya, ya. Pero hemos convenido que estamos en un caso en el que de todas formas vamos a usar marcado extra
txuma
incluso en ese caso yo no metería como 'extra' una imagen en el contenido. Ya que hay que usar una 'ñapa', que sea lo más inocua posible, y se me ocurren muchas antes que meter la imagen :) Insisto en que un HR que después ocultemos puede ser una buena posibilidad, incluso con cierta semántica
orange
txuma
incluso en ese caso yo no metería como 'extra' una imagen en el contenido. Ya que hay que usar una 'ñapa', que sea lo más inocua posible, y se me ocurren muchas antes que meter la imagen :) Insisto en que un HR que después ocultemos puede ser una buena posibilidad, incluso con cierta semántica
Ya pero una imagen en el HTML puede tener un efecto muy interesante... como ser elástica, cosa que no pasa si la metemos por CSS.
Últimamente me estoy tirando un poco a la piscina con ese tema, sobre todo cuando deben ser diseños elásticos, y en revisiones de accesibildiad no ponen más peros a una imagen con alt vacío que a un span extra.
txuma
Uyyyy, que te veo volviendo a la época del spacer.gif !!! xD
zigotica
demssite, ¿por que no explicas un poco mas qué informacion tiene esa capa? ¿y que otros elementos extra? (parrafos, titulos, listas ...)
demssite
Básicamente es algo como el borde de la web de fundación ctic, sólo que en el mío no es elástico es decir tiene un ancho fijo, con lo que al contenedor principal le pongo de fondo el borde superior y el inferior era de lo que hablábamos.
Lo del borde he de colocarlo en un par de bloques y por ejemplo la estructura de uno de ellos es algo así:
<code><div>
<div>
<h3>Lorem ipsum</h3>
<p>
<a href="#">Lorem ipsum</a><br>
<a href="#">Lorem ipsum</a>
</p>
<div>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum</p>
</div>
</div>
</div></code>
zigotica
yo ahi veo un div anidado, puedes poner un fondo en uno y el otro en el interior
txuma
esa es una solución, aunque adolece un pelín de 'divitis'.... pero como de algo vas a tener que adolecer, pues es otra posibilidad :)
demssite
Sí si al final opté por añadir un div más dentro y ponerle a uno la el borde superior y al otro el inferior.
Gracias muchachos.... toy molo de divitissss......
txuma
Tranquilo, es una enfermedad que se va curando con el tiempo :)
demssite
Tú que optarías por la opción del hr (sobreentiendo)
txuma
Pues tal vez sí, porque el HR al menos aporta algo de contenido en el documento, indica una separación. De hecho yo lo utilizo mucho en mis proyectos, no sólo con fines 'decorativos'.
De todos modos, es cierto que para ocultarlo y poner una imagen de fondo a tu gusto necesitas guarrear el código, así que desde ese punto de vista cada uno tienes su 'guarradas' preferidas :)
zigotica
si hay un fondo general y uno en el "footer", yo optaria por cargerme un div y hacer lo siguiente:
<code><div>
<h3>Lorem ipsum</h3>
<p>
<a href="#">Lorem ipsum</a><br>
<a href="#">Lorem ipsum</a>
</p>
<div>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum</p>
</div>
</div></code>
fondo 1 en la capa madre
fondo 2 en el ultimo div (el del h4 y p).
si estamos hablando de una cabecera ya es otro tema, pero como ves puedes ir combinando segu nel caso
txuma
Esa sería la mejor solución, pero creo que unos cuantos post más arriba decía que no podía por 'norecuerdoqué'....
demssite
zigotica
fondo 2 en el ultimo div (el del h4 y p).
No puedo porque ese div lleva a su vez otra imagen de fondo. XDD