M Project Blog (Temporal)

Artículo especializado para el desarrollo de sitios Web

Estableciendo las bases para la estructura de un sitio web que posteriormente presentaré me topé con un problema que no había tenido antes, resulta que firefox (Si, el dios intocable) me comenzó a generar unos problemas con los fondos y la estructura.

Estructurando un sitio web usualmente se comienza con el body, luego el #contenedor, el #header, #content (middle, contenido,etc) luego los #sidebar y por útilo el #footer (Puede variar no todos los sitios tienen estructuras básicas).

Creando la estructura más o menos en ese sentido, el semidios de algunos desarrolladores, me generó un error insólito en la etiqueta del #contenedor, aparentemente inexplicable. Simplemente no quería exponer el fondo que le había asignado!.

El código base de ese contendor era este:

23
24
25
26
27

#contenedor {
     width:920px;
     margin:440px auto 0 auto;
     background: #FFFFFF url(images/middlebg.jpg) repeat-y;/*Si, también probe con los elementos independientes, pero tampoco funcionó. Igual podrían realizar el código de esa manera para anticipar otros problemas que puedan surgir*/
}

He utilizado antes ese código para generar una estructura base y no me había presentado problemas, por lógica alguna de las etiquetas previas pudo haber tenido este problema. Hice muchas pruebas para determinar el error y ver de que manera podría solucionarlo de manerá lógica partiendo del concepto “Prueba y Error”, pues me pareció un poco más rápido que ponerme a encontrar la aguja en ese pajar de códigos.

Mi solución fue simple, por alguna razón, al agregar la propiedad “float” al contenedor el fondo por fin aparecía, solo que aparecía en flotando a la izquierda, obviamente no iba a echar a peder toda la labor de diseño.

Cómo dentro de esa estructura solo los elemento con esa propiedad podían tener fondo, pues lo solucioné creando una etiqueta más “#conten” que coloque encima del contenedor, pero con el width al 100%, float y el fondo del middle (Haciendo referencia a centro del sitio abajo del header, arriba del footer).

Quedando el código de esta manera:

23
24
25
26
27
28
29
30
31
32
33
34

#contenedor {
    width:920px;
    margin:440px auto 0 auto;
 
}
 
#conten {
    float:left;
    background-image:url(images/middlebg.jpg); /*Dividí la propieda de background en "image y reapeat*/
    background-repeat: repeat-y;
    width:100%; /*Vamos al 100% del ancho del contenedor*/
    }

Quedandonos en el html de esta manera

26
27
28
29
30
31

<div id="contenedor">
<div id="conten"> <!--Esta es la etiqueta que creamos para solucionar el problema-->
<div id="sidebar"></div>
<div id="contenido"></div>
</div>
</div>

De esta manera, hice de nuevo las pases con firefox, posteriormente se hicieron los ajustes para estar en armonía con IE y los otros navegadores. Pero eso en estos tiempos se ha vuelto sencillo de arreglar, a excepción de algunas incongruencias raras que surgiran y tendré la oportunidad de compartir.

¡Compártelo!