Templates CSS II: Un diseño especial. Cabecera y lateral fijos.
Como desarrollador web está la típica máxima: "Hacer las cosas bien, o hacerlas para IE".
Está claro que en mi caso la respuesta es fácil, así que hoy os voy a enseñar un diseño para "navegadores válidos".
Personalmente, siempre he pensado que una página web se debe ver como un flujo de datos continuo, como si de texto se tratase (de hecho de eso se trataba en un principio), pero cada vez más, las empresas buscan mantener su imagen corporativa por encima de todo, obligando así a mantener la cabecera e incluso el lateral fijos en la página y el resto movible.
Veamos aquí un ejemplo de estilo que cumpliría con los requisitos
Esto siempre ha traído bastantes problemas en la www, aparecieron los frames para intentar solventar esos problemas y han creado mil y otro problema distintos. Menos mal que llegó la W3C a solventar algunos de estos problemas.
El problema de las cabeceras es un cambio de planteamiento. Yo he dicho que siempre se debería ver las webs como un flujo de datos. Pero, y si saco algo del flujo normal de la web¿? Pues esto lo pensó hace tiempo la W3C y creo la variable position. Con position:fixed se consigue sacar del flujo normal de la página cualquier div. Con incluir en el css la posición del div con left y top ya está todo hecho.
Entonces para conseguir que se quede una cabecera y un lateral fijo sería tan simple como esto:
html { overflow:auto; height: 100%; }
body { height: 100%; width:99%; min-width: 765px; margin: auto; padding:0px;}
#cabecera {position:fixed; left:0px; top:0px;
margin:0; padding:0; border:1px solid #000; width:100%; height:80px; background-color:#D8F;}
#lateral { position:fixed; left:0px; top:82px;
width:140px; height:90%; margin:0; padding:0; float:left; border:1px solid #000; overflow:auto; border-top:none; background-color:#bbb;}
#cuerpo {margin:0; padding:81px 0 0 141px; background-color:#AF8;
border-bottom:1px solid #000; border-right:1px solid #000;}
El ejemplo. Como sería de esperar, se encuentra aquí.
Lo único a reseñar del código son las partes que comentaba de position:fixed; left:0px; top:0px; y position:fixed; left:0px; top:82px;, fijaros que en el div #lateral el valor de top es “82px”, esto siempre se debe tener en cuenta, ya que el alto de la cabecera es de “80px”, más “1px” de su borde, por tanto #lateral debe empezar en el siguiente pixel, el 82.
Y también como detalle en #cuerpo ver que hay un padding:81px 0 0 141px;, esto viene porque los divs que se han sacado del flujo de la página no indican a los otros divs que deben desplazarse y si no se pusiese ese padding se “meterían debajo” de la cabecera y del lateral.
Pero, no todo es tan bonito en es ta vida y si eres de los que usas esos otros navegadores, “no accesibles”, te encontrarás con problemas. Este diseño no es valido para IE<=6 y es que para dicho navegador el valor position:fixed; no existe y por tanto no lo saca del flujo normal de la página.
Esto no sería mucho problema si simplemente la cabecera y el lateral se quedasen fijos. Siempre se podría utilizar e indicar que en esos navegadores no se ve con todo el potencial. Esta es la técnica que ese mismo navegador ha estado usando para hacerse con el mercado. Vender especificaciones solo validas para dicho navegador. Es un buen momento para devolverle con la misma moneda, pero hay otro problema, el padding:81px 0 0 141px;; al no salir del flujo los dos divs anteriores el div cuerpo se sitúa en base a ellos, teniendo por tanto que el padding descoloca la posición del navegador.
A partir de aquí se acaba la accesibilidad.
Si quieres que esto funcione bien, tienes varias opciones.
La primera, es aplicar diversos hacks que hay por internet para hacer que dicho navegador emule el efecto position:fixed;, aunque personalmente me parecen horrendos.
Otro es meter algún hack, de los cientos posibles, que haga que para IE el padding sea “0″. Aunque seguirías cargándote la accesibilidad del CSS.
Y la tercera, sería dejarlo así, como está, e indicar en la página a los que vengan con dichos navegadores, que se verá mal y descuadrado porque su navegador decidió no aceptar los estándares.
Personalmente, optaría por esta opción. Que la gente vea que el mundo no es de color azul y con ventanitas(tm).
Estoy escuchando: En vela - La fuga - Calles de papel
Estado de ánimo: Segundo café del día. “Toy acelerao”
Me gustaría escuchar: El concierto de Nowan
29 Noviembre 2006 16:45 pm
He llegado hasta aquí por tu comentario en Campanilla y te quería dar las gracias por entender lo que íntentaba decir.
De este post no puedo comentar nada. (No es lo mío) Sólo del subtítulo de tu blog: Yo creo que, en este momento, todo
30 Noviembre 2006 11:11 am
Jejeje, touche, mon ami.
Existen muchas cosas (o la mayoría) que se podrían decir “no programables”, pero soy matemático, por tanto todo en esta vida tiene algoritmos y son programador por lo tanto todo algoritmo es programable. Así que