Hay una frase, creo que de Bernard Shaw, que dice:
El conocimiento se parece al dinero en que mientras más se tiene más se quiere, y se diferencia del dinero en que mientras más se da más se posee.
Bien, creo que se puede aplicar a este especÃfico caso en que el altruismo de la enseñanza se ve superado por la necesidad de empezar a comprender cómo se comportan los estilos en la web, dado que como bien todos saben, se ha convertido en un auténtico dolor de cabeza, no por su complejidad sino por lo caprichoso de su comportamiento una vez que estos estilos comienzas a interactuar con los distintos navegadores y resoluciones.
Este primer ejemplo es una variante para conseguir algo muy útil: fondos que se ajusten al tamaño de su contenido o de la pantalla, manteniendo la estética de cualquier artÃculo.
Ejemplo 1: Fondo Ajustable
TOP
En primer lugar, para ordenar los 3 elementos de arriba necesitamos unbicarlos en sus respectivas posiciones de izquierda, centro y derecha. Esto se consigue con la declaración:position. Lo interesante aquà es que se le ha otorgado una posición absoluta al elemento de la derecha (tr), que sin embargo se mantiene dentro de la caja, debido a que la capa que la contiene (top) se le ha dado a su vez una posición relativa. De no ser asà se hubiera ubicado en el extremo derecho y superior de la pantalla. En el enlace de referencia, aunque está en inglés, se puede ver ejemplificado este comportamiento.
MID
En los elementos del centro no coinciden los nombres de las capas y de las imágenes. Se ha ubicado en la última capa de la sección (mr) la imagen que cubrirá todo el centro del contenido, para poder asignarle unos márgenes que permitan ver ambos laterales, en este caso un margen de 50 px.
Hay que tener en cuenta que algunos elementos del contenido generan márgenes no deseados, como en este caso la lista ordenada (lo) de manera que hay que darle un valor de 0.
BOTTOM
De forma similar que el top, en el fondo se ha dado una posición relativa al elemento central (bot) y posiciones absolutas a los elementos bl y br para que pudan situarse a ambos extremos.
Asà es como se ven los sectores en Photoshop
Ej. 1 Vista de los Sectores en Photoshop
Espero que este ejemplo te sea de utilidad y que hayas disfrutado con su lectura. Pulsando en el siguiente enlace puedes ver una copia del código CSS utilizado. Gracias por tu visita.
Mostrar / Ocultar el Código CSS
/* FONDO AJUSTABLE */
#fa {
width: 90%;
margin-right: auto;
margin-left: auto;
margin-bottom:15px;
}
#fa p {
margin:0;
padding-top:2px;
text-align: justify;
}
#fa strong {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #660000;
display: block;
margin-top: 3px;
}
#fa ol {
padding-left:0px;
margin:0;
padding-bottom:15px;
}
#fa li {
color: #400000;
text-align: justify;
}
#fa .contenido {
background-color: #cc9966;
display:block;
clear:both;
background-image: url(fondo_ajustable/img/deco_1.png);
background-repeat: no-repeat;
background-position: right 0px;
}
/* TOP */
#fa .top {
background-image: url(fondo_ajustable/img/top.jpg);
background-repeat: repeat-x;
height:25px;
position:relative;
}
#fa .top .tl {
background-image: url(fondo_ajustable/img/tl.jpg);
background-repeat: no-repeat;
width: 50px;
height:25px;
}
#fa .top .tr {
background-image: url(fondo_ajustable/img/tr.jpg);
background-repeat: no-repeat;
width: 50px;
height:25px;
position:absolute;
top:0px;
right:0px;
}
/* MID */
#fa .mid {
background-image: url(fondo_ajustable/img/ml.jpg);
background-position: left top;
background-repeat: repeat-y;
}
#fa .mid .ml {
background-image: url(fondo_ajustable/img/mr.jpg);
background-position: right top;
background-repeat: repeat-y;
}
#fa .mid .mr {
background-image: url(fondo_ajustable/img/mid.jpg);
background-position: left top;
margin-left:50px;
margin-right:50px;
padding-bottom:7px;
}
/* BOTTON */
#fa .bod {
background-image: url(fondo_ajustable/img/bod.jpg);
background-repeat: repeat-x;
background-position: left bottom;
height:25px;
position:relative;
}
#fa .bod .bl {
position: absolute;
height: 25px;
width: 50px;
left: 0px;
bottom: 0px;
background-image: url(fondo_ajustable/img/bl.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#fa .bod .br {
background-image: url(fondo_ajustable/img/br.jpg);
background-repeat: no-repeat;
background-position: right bottom;
position: absolute;
right: 0px;
bottom: 0px;
height: 25px;
width: 50px;
}