Buenas,
Estoy intentando hacer una plantilla para mostrar mensajes, o contenidos, dentro de una capa contenedora, con forma de marco.
La idea, es dandole la medida de la capa contenedora "desde fuera", que se construya la caja.
He diseñado una matriz de 3x3, una capa contenedora, con tres capas a modo de fila, y cada fila con tres capas más a modo de columnas.
<div id="ppal">
<div id="top">
<div id="topl"></div>
<div id="topr"></div>
</div>
<div id="contenido">
<div id="contenidol"></div>
<div id="contenidoc"></div>
<div id="contenidor"></div>
</div>
<div id="bottom">
<div id="bottoml"></div>
<div id="bottomr"></div>
</div>
</div>
Las capas 1:1,1:3,3:1 y 3:3, son de tamaño fijo, con imagen de fondo.
La capa 2:2, es donde irá el contenido.
html,body {
background-color:#fff;
text-align:center;
}
div {
background-color:#FFFFFF;
text-align:center;
}
#ppal {
width:400px;
height:550px;
position:relative;
margin:auto;
}
#top {
height:49px;
background:url(images/top.png);
background-repeat:repeat-x;
}
#topl {
width:65px;
height:49px;
background:url(images/top_l.png);
background-color:#FFFFFF;
float:left;
}
#topc {
height:49px;
}
#topr {
width:59px;
height:49px;
background:url(images/top_r.png);
background-repeat:repeat-y;
background-color:#FFFFFF;
float:right;
}
#contenido {
overflow:hidden;
}
#contenidol {
width:65px;
background:url(images/left.png);
background-repeat:repeat-y;
float:left;
}
#contenidoc {
}
#contenidor {
width:59px;
background:url(images/right.png);
background-repeat:repeat-y;
float:right;
}
#bottom {
height:46px;
background:url(images/bottom.png);
background-repeat:repeat-x;
}
#bottoml {
width:65px;
height:46px;
background:url(images/bottom_l.png);
background-color:#FFFFFF;
float:left;
}
#bottomc {
height:46px;
}
#bottomr {
width:59px;
height:46px;
background:url(images/bottom_r.png);
background-color:#FFFFFF;
float:right;
}
Mientras no ponga contenido en la capa 2:2, se "dibuja correctamente", al poner contenido, los bordes laterales de la caja no crecen.
Saludos, y gracias por leer.