Hola,
Depende, voy a presuponer que quieres una solución compatible con IE6 y sin
usar javascript (en caso contrario podrías evitarte marcado no semántico).
También entiendo que te basta con un ancho de caja fijo.
Puedes usar la técnica de las puertas correderas para usar sólo dos
imágenes, no tres. Además, es conveniente que uses algún elemento que sí sea
semántico, como un título hx, por ejemplo.
HTML
<div id="caja">
<h2>
Título de la caja
</h2>
Algo más
</div>
Prepara dos imágenes, una con los bordes superiores y otra con los
inferiores, pero esta última sobredimensionada, esto es, lo suficientemente
alta para ajustarse a las diferentes alturas de caja que pudieras tener.
A h2 le asignas la imagen con los bordes superiores y a #caja la imagen
sobredimensionada que contiene los bordes inferiores y cuya parte superior
quedará oculta por la de h2.
Sería algo así:
#caja {
width: 200px;
background: url(abajo.png) no-repeat left bottom;
}
h2 {
background: url(arrib.png) no-repeat left top;
}
Detrás del h2, pero dentro de #caja, tendrás otros elementos como párrafos.
También tendrás que hacer algunos ajustes como añadir padding para separar
el texto de los bordes.
Saludos
El 6 de marzo de 2009 20:31, Daniel González <ikar...@gmail.com> escribió:
> Hola a todos.
>
> Quiero poner los 4 bordes a una capa con sendas imagenes.
>
> Se me ocurre que puedo poner una imagen de fondo que contenga los bordes
> laterales y una capa superior e inferior que contenga las imagenes de
> arriba
> y de abajo
> algo asi como:
>
> <div id="caja">
> <div id="borde-arriba"></div>
> Aqui el contenido de la caja
> <div id="borde-abajo"></div>
> </div>
>
> Pero entiendo que esto no es correcto ya que estoy utilizando dos capas sin
> contenido lógico. ¿Cual es la solución correcta?
> Saludos y gracias.
>
>
>
>
> Daniel González Cerviño
> tel 653965048
> ikar...@gmail.com
> _______________________________________________
> 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
