Sidebar de ancho fijo en diseño flexible

Desde que renové el diseño de Mandelrot he recibido un par de mensajes de colegas bloggers preguntándome cómo había hecho para hacer que el contenido se "estire" hasta abarcar toda la ventana, y sin embargo la sidebar (la barra que ven a la derecha, donde tenemos los enlaces a nuestros otros blogs) tenga un ancho fijo; si no saben a qué me refiero cambien el tamaño de la ventana de su navegador y entenderán lo que quiero decir. Como no sé si tendré que seguir respondiendo más veces lo mismo, y además este tema no lo he visto explicado en ninguna parte, intentaré explicarlo lo más sencillamente posible -dentro de que es un tema totalmente técnico, para gente que ya sabe algo de esto- y si tienen dudas les recomiendo que pregunten a los maestros en el arte de hacer fácil lo difícil: Vagabundia, El Escaparate, La Bloguería... Hay muchos y ellos les podrán ayudar mucho mejor que yo.


Este concepto tiene ventajas importantes para el diseñador: si el monitor del lector tiene mucha resolución, no desperdicias espacio inútilmente; pero si la ventana de su navegador tiene menos espacio que lo que tú hayas establecido (si sólo usas valores absolutos, no porcentajes) tu lector no se va a perder un trozo o toda la sidebar, que para los que tienen publicidad es importante que sea vista. Esto además de que es incómodo tener que estar desplazándose a la derecha cada vez que uno quiere verla o hacer click en algún punto sobre ella... El espacio web es muy valioso, igual que sería absurdo que algunos canales de televisión no ocuparan toda la pantalla del televisor independientemente del tamaño que tenga cada uno -o que parte de la imagen no cupiera- creo que si tenemos la opción de adaptarnos a nuestros lectores nos lo agradecerán.

Vamos allá. La idea es sencillísima, se trata de que tanto el bloque del main como el de la sidebar no tengan atributos float sino position:absolute; no das parámetros verticales (con lo que se ajustarán al header colocándose debajo) pero sí horizontales, y -aquí está el truco- como puedes darle parámetros "left" y "right" lo que haces es que al main le quitas el parámetro del ancho -así que no tiene uno definido-, y por el lado donde tengas la sidebar (una o varias), le dices que la distancia de ese lado sea lo que ocupe la sidebar mas los márgenes.

Por ejemplo: imagínense que tengo sólo una sidebar a la derecha de 200 píxeles, con un margen de 20 hasta el borde, y quiero dejar otros 20 en medio de los dos bloques; y en el margen de la izquierda del main quiero otros 20 píxeles. Pues voy y le digo que el main-wrapper (el "cajón" donde va el contenido del main) sea...
position: absolute
y añado...
left: 20px (para dejar el margen a la izquierda)
y después...
right: 240px (margen derecho + sidebar + margen entre los dos bloques)
Para repetirlo más claramente, sería borrar el ancho del main-wrapper y después sustituir la frase donde está el "float: left;" por esto:
position: absolute; left: 20px; right: 240px;
¡Y ya está! Como en un position:absolute no tienes por qué declarar un ancho concreto, y sí puedes especificar dónde van a estar los márgenes con respecto a los bordes de la ventana, en la práctica estás obligando al navegador a dibujar la web colocando esos márgenes y colocando el resto variable dependiendo de lo que abarque la ventana. Fácil, ¿verdad? Con esto puedes poner todas las barras que quieras y dejarlas fijas (o variables) también, simplemente dejando los márgenes de cada bloque donde quieras con la position:absolute. En realidad tuve que darle muchas vueltas al asunto porque no encontré ayudas en ninguna parte -había buenas ideas, muchas páginas las usan, pero funcionaban para unos navegadores y otros no-, pero cuando dí con ello no pude creer cómo había sido tan descuidado como para no darme cuenta antes. Supongo que estas cosas pasan... En fin, como verán ya está hecho y, pecando de inmodestia, ha quedado muy bien. :-D

Actualización: ¿qué hago si tengo problemas con mi web?

Después de publicar esta entrada me ha pasado varias veces la misma situación: contactan conmigo diseñadores o bloggers preguntándome por dudas sobre sus páginas... que no tengo ni idea de cómo resolver. Desgraciadamente yo no me dedico al diseño, y todo lo que sé es lo que yo iba necesitando -y para ello aprendiendo- para mi página... Pero sí les voy a dar lo que yo creo que es el mejor consejo posible y que creo que podrá ayudarles en general.

Con quien tienen que contactar es con los que sí son diseñadores y saben de esto de verdad, por eso tienen blogs de ayuda, y son los que ya cité al principio de esta entrada (hay más muy buenos, éstos son sólo los que yo conocí cuando les pedí ayuda para mí). Pero es muy importante no ya que les escriban con sus preguntas, sino la información que les den con sus preguntas; esto es lo que tienen que decirles:
1) Cuál es su nivel de conocimientos (no es lo mismo explicarle algo a alguien que no sabe lo que es una plantilla o qué diferencia hay entre HTML y CSS que a un experto).
2) Cuál es su plantilla original y qué modificaciones les han hecho (¿partieron de una Rounders? ¿Denim? ¿La hicieron ustedes desde cero?); si quien les va a ayudar conoce más o menos cómo está estructurada le será más fácil encontrar lo que tiene que buscar.
3) Deben adjuntar una copia de su plantilla para que el "profesor" pueda saber exactamente cómo es el código que hay y qué hay que cambiar para conseguir lo que quieren.
4) Cuál es el resultado que persiguen. Les parecerá una tontería, pero a veces damos por hecho que el otro nos lee la mente y le decimos "se ve mal" pero no especificamos si queremos este elemento aquí o allá, si las dos sidebars van juntas a un lado o cada una a uno...
5) Qué han hecho hasta ahora para tratar de conseguirlo y dónde se han atascado. Nota: más de una vez he visto gente que hace preguntas que se podrían averiguar simplemente buscando en Google durante dos minutos pero no se molestan lo más mínimo pensando "que me lo resuelva éste"; no es extraño que su respuesta sea "busca en Google".
6) Agradecimiento. Sí, el tipo que te va a ayudar lo hace porque él quiere, no es un esclavo a tu servicio (se sorprenderían de la actitud de más de uno por ahí).
En fin, si se toman la molestia de ponérselo fácil a quien les va a responder tendrán muchas más posibilidades de que lo haga, y además se ahorrarán que después les pregunte lo mismo que les acabo de escribir yo.

¡Suerte y no se desanimen, lo conseguirán!

9 comentarios:

  1. Ha quedado fenomenal. Conocía la manera de hacer esto mediante medidas relativas expresadas en "tanto por cierto", y sólo hace poco leía sobre esta manera de hacerlo, posicionándolo absolutamente. Es interesantísimo y el resultado, excelente.

    Te agradezco muchísimo el informarme, y el explicarlo tan bien, lo probaré sin duda.

    Saludos!

    ResponderEliminar
  2. Muchas gracias, yo también probé las soluciones de porcentajes (las vi en algunas webs) pero no van bien en todos los navegadores; esto, sin embargo, respeta la "lógica" de cualquier navegador porque en todos se puede definir a cuánto están los bloques del borde de la pantalla... Digamos que la solución no es de programación, sino de "pillería" ;-D

    ResponderEliminar
  3. Hola.
    No soy capaz de aplicar esto en mi blog y estaria muy interesado.
    ¿Puedes echarle un vistazo y decirme como hacerlo?
    ampaznalcazar.blogspot.com

    Gracias.

    ResponderEliminar
  4. Bueno Ampa, he estado echando un vistazo a tu web y no creo que sea nada difícil en principio; pero necesitaría más datos, como por ejemplo saber tu nivel de conocimientos -para saber "en qué idioma" podemos hablar- y también echar un vistazo a tu plantilla a ver cómo está estructurada y decirte dónde exactamente tienes que hacer los cambios.

    Si sabes algo de diseño web y más o menos puedes entender un lenguaje parecido al de la entrada, mándame un mensaje mediante el apartado "Contacto" (el link está en la cabecera) con tu email y te daré una explicación del tema adaptada a tu blog; pero si estás en blanco y necesitas que me ponga a buscar en tu plantilla, ver cómo está estructurada, localizar las frases y empezar a hacer pruebas a ver cómo queda aumentando poco a poco el margen hasta que quede como tú quieras, entonces no puedo ayudarte porque estoy al límite del tiempo que puedo dedicarle a mi propia web y no tengo más... Te ayudaré lo que pueda, no tengas duda de eso; un saludo -Mandelrot-

    ResponderEliminar
  5. muy interesante he hecho lo k has dicho y por lo menos se ha movido algo pero aun sigo con el problema a ver si me podeis ayudar

    * http://s2.subirimagenes.com/privadas/159850screen01.jpg estructura

    * http://s2.subirimagenes.com/privadas/159858screen02.jpg como deberia ir

    * http://s2.subirimagenes.com/privadas/159860screen03.jpg no esta el sidebar

    * http://s2.subirimagenes.com/privadas/159864screen04.jpg sidebar debajo de las entradas

    despues de ver las fotos a ver si me podeis ayudar alguna sugerencia .. estoy desesperado

    ResponderEliminar
  6. como puedo subir el sidebar de nuevo a la derecha ??? por vafor ayudadme

    ResponderEliminar
  7. parece k lo he areglado aunque no es como antes parece un poco distincto ... he puesto esta linea -> position: absolute; right: 600px; right: 120px; top: 250px;

    seguramente la he areglado para mi firefox si entra otro lo vera mal ..

    ResponderEliminar
  8. http://spirit-dragon.blogspot.com/

    aun no lo he areglado si pulsais ctrl. + moviendo la rueda del raton para ariba o para abajo no se encoje con lo demas si no que es aparte

    ResponderEliminar
  9. Hay una frase que dice "lo importante no es saber, sino tener el teléfono del que sabe". Bueno Spirit Warrior, he añadido una actualización a la entrada para dirigirte correctamente a quien te puede ayudar (a ti y a los demás); creo que la información te será útil y al final te llevará a tu objetivo, suerte...

    ResponderEliminar

Por favor, sé considerado y respetuoso con los demás. Los comentarios molestos, ofensivos, mal escritos o EN MAYÚSCULAS, así como los de spammers o publicitarios, no serán publicados.