Posts Tagged ‘css’
Compass (IV): 100% height using 960.gs grid [SOLVED]
December 1st, 2011 | 
Author: Ayer os comenté la forma de conseguir un sticky footer usando el grid 960.gs en Compass Sin embargo el ejemplo de ayer no completaba la altura del div de contenido (#content) hasta el footer: El ejemplo de hoy es muy similar, pero el contenido se extiende hasta alcanzar el footer (height 100% del elemento contenedor): [...]
Compass (III): Sticky footer how to [SOLVED] [RESUELTO]
Llevo unos posts hablando sobre Compass y me preguntaban vía mail cómo conseguir un sticky footer mediante este sistema. Bueno, me preguntaban cómo hacer que la altura de la página fuera 100%. Pero vamos, es lo mismo y se hace del mismo modo que se hace siempre: div para wrapper, div para content y el [...]
Posted in Informática - web | 
Tags: 100%, altura, compass, css, height, html, markup, pie, sass, sticky footer | 
1 Comment »
Compass (II): Grid de 24 columnas listo para trabajar
Como ya vimos en la primera parte del tutorial de Compass este sistema facilita muchísimo la escritura, legibilidad y jerarquización de CSS. Los ejemplos de la primera parte del tutorial eran simplemente para entender los mecanismos de Compass+SASS. En esta segunda parte vamos a desarrollar un ejemplo más útil, que servirá para comenzar a diseñar [...]
Compass (I): instalación, primeros pasos y ejemplos básicos
Si diseñas webs a menudo puede que estés cansado de estar haciendo tú mismo los CSS’s (y los cálculos que esto conlleva). Hay sistemas, como 960 grid que ayudan (y mucho) a construir grids sobre un contenedor de 960 px. ¿Por qué 960px? Porque es un número fácilmente divisible (resto entero entre dos, tres, cuatro, [...]
Posted in Informática - web |
Tags: 960, compass, css, example, layout, sass, tutorial |
1 Comment »
Invenio CSS – sticky footer [solved]
If you check Invenio Demo you will notice that the footer is not sticky, this is, it is not always in the bottom. This was quite annoying IMHO. Lets fix it! General CSS+markup for sticky footer In general, you can make a footer sticky like this: * { margin: 0; } html, body { height: [...]
Posted in CDS Invenio |
Tags: CDS Invenio, css, footer, sticky, trick, webstyle_templates |
No Comments »
Drupal: customize language switcher block
If you are runnning a drupal multilingual site, you might be using i18n with language icons modules. I’ve received some mails asking how to customize the aspect of the multilang switcher block. Easy! Log in as admin and navigate to /admin/settings/language/icons There you will be able to 1) customize the Icon placement (before link (after [...]
Posted in Drupal |
Tags: css, drupal, horizontal, language icons, language switcher, templates, theme, theming |
1 Comment »
Centrar div y contenido con CSS [resuelto]
Os voy a dejar algunos códigos de ejemplos para que veáis cómo centrar horizontalmente y verticalmente un div (y/o su contenido) utilizando CSS. Las explicaciones están (en inglés) en el propio código. Es fundamental definir correctamente el DTD (primera línea del código). En mi ejemplo uso el transitional. Ejemplo 1: centrar un div horizontalmente y [...]
Posted in Informática - web |
Tags: center, centrar, css, div, explorer, firefox, internet explorer, mozilla |
No Comments »
CDS-Invenio: compress CSS to speed up page load
Some days ago I discovered PageSpeed plugin for Firebug. This plugin is really useful to speed up your CDSInvenio website load time. In this brief post I’ll be describing how to compress CSS with GZIP to speed up page load. It is really simple. 1. Your server must be able to execute PHP. 2. Edit [...]
Posted in CDS Invenio, Informática - web |
Tags: cds, CDS Invenio, compress css, css, gzip, invenio, pagespeed |
1 Comment »
CSS horizontal scroll div with fixed-height images [SOLVED]
This is often asked in web developing forums. What is the easiest way to make an horizontal scrolling div that contains fixed-height images? Well, I just coded this and it works like a charm: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Horizontal image scrolling</title> <style> .imagen{ [...]
Posted in Informática - web |
Tags: css, div, fixed height, horizontal scroll, images, scrolling |
No Comments »
CSS Layout examples
Usually I find myself answering to questions like “how do I set up a two column layout with fixed/fluid width?” and so on. Well, for all of you who have issues with layouts, take a look at dynamicdrive.com. For instance, here you can find several CSS configurations for two column layouts”.