fondo – Ideas Fugaces

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;
}