Caja CSS para meter contenido

Realizar con imgenes y hojas de estilo un diseo para una caja donde meter contenidos.

Vamos a hacer un artculo prctico de CSS para mostrar una manera de hacer una caja con CSS para meter contenidos. La caja tendr un diseo especial que enmarque los contenidos que metamos dentro. Lo mejor para entender lo que pretendemos hacer es ver el ejemplo en marcha. El ejemplo que hemos escogido se podra hacer de varias maneras, cada una con sus ventajas e inconvenientes. No obstante, nosotros vamos a explicar la forma de hacerlo que nos ha parecido ms til. Tendra estas ventajas e inconvenientes: Ventajas: La caja puede crecer hacia abajo todo lo que se desee. Por lo que no ser problema que hubiera que colocar ms o menos texto, porque la caja se ajustar al tamao que tengamos. Inconvenientes: La caja tiene un ancho fijo, que est marcado por el tamao de las imgenes que hayamos realizado. Si anidamos muchas capas dentro de esta caja, puede dar problemas de maquetacin, aunque no hemos experimentado este problema en nuestros ejemplos. Las imgenes Para realizar esta caja hemos utilizado un par de imgenes. Una para la parte de arriba del marco y otra para la parte de abajo del marco. Estas imgenes las podemos hacer con cualquier programa de edicin de imgenes, ajustando colores y formas al aspecto de nuestra propia pgina. Las imgenes que hemos utilizado son estas:

El cdigo HTML El ejercicio lo hemos realizado utilizando dos capas (etiqueta <DIV>), una dentro

de otra. Una capa se llama "cajaarriba", que tendr el estilo de la parte de arriba de la caja, y otra "cajaabajo", donde pondremos los estilos necesarios para el cuerpo de la caja y la parte de abajo. La capa principal es "cajaarriba" y dentro estar la capa "cajaabajo". En "cajaabajo" es donde meteremos el texto a colocar dentro de la caja. la metemos dentro de "cajaarriba" y El cdigo es el siguiente:
<div class="cajaarriba"> <div class="cajaabajo"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit . </div> </div>

El cdigo CSS Para definir el aspecto de "cajaarriba" y "cajaabajo" se ha utilizado CSS. Como comentbamos, en "cajaarriba" se definen los aspectos de la parte de arriba de la caja y en "cajaabajo" los de la parte de abajo. Adems, como "cajaarriba" contiene a "cajaabajo", todos los estilos que hayamos definido en "cajaarriba", tambin se heredarn en "cajaabajo". Este es el cdigo de Hojas de estilo para este ejemplo:
.cajaarriba{ width: 600px; background-image: url("arriba.gif"); background-position: top center; background-repeat: no-repeat; } .cajaabajo { background-image: url("abajo.gif"); background-position: bottom left; background-repeat: no-repeat; padding: 58px 75px 58px 69px; }

El ejercicio es sumamente simple, pero bastante til. Podemos verlo en marcha en una pgina aparte. Hemos publicado en el taller de css otros artculos de inters para mostrar cmo se pueden realizar cajas maquetadas con CSS con otros formatos.