Igualar la altura de capas CSS mediante Javascript.

Maquetar páginas web con estilos CSS es una maravilla, creo que a estas alturas todos conocemos las múltiples ventajas frente a maquetar con tablas en HTML. Pero también es cierto que tiene sus inconvenientes, diseños que con tablas eran muy sencillos de realizar mientras que con CSS hay que buscar soluciones estrafalarias.

Un ejemplo lo tenemos en las páginas web de varias columnas, cuando deseamos que todos los bloques tengan la misma altura independientemente de su contenido. Algo que muchas veces es difícil de conseguir solo con estilos CSS.

Un truco que he encontrado hace poco y funciona bastante bien es usar JavaScript, en concreto jQuery, para igual la altura. El código a usar es el siguiente:

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
})

Obviamente también hay que cargar las librerías de jQuery en la página en cuestión y señalar que capas queremos que se ajusten en altura, añadiendo el siguiente parámetro a cada DIV:

class="column"

Sencillo y eficaz. Aunque espero que en futuras versiones de CSS esto se pueda hacer directamente sin recurrir a trucos.

Fuente (inglés): cssnewbie.com
(más…)

Tripoli, mejora tus páginas web CSS-HTML

Tripoli es una hoja de estilos en cascada (CSS) diseñada para servir de base para un sitio web. Básicamente lo que hace es “resetear” los estilos por defecto que los navegadores aplican al representar una página web.

Es decir, cuando tú creas un sitio web modificas la apariencia de los distintos elementos que lo componen mediante estilos CSS. Pero los navegadores a su vez también aplican unos estilos por defecto a todas las páginas, lo cual provoca que entre distintos navegadores haya diferencias visibles en la colocación de los elementos o en el formato del texto. Pues Tripoli es un archivo CSS que sustituye en lo posible esos estilos por defecto por otros comunes a todos los navegadores y optimizados para que la página web se vea correctamente y el texto sea legible. Eso nos da varias ventajas:

-La principal es que nuestro sitio web se vera igual en todos los navegadores.
-También mejoraremos la lectura de los textos.
-Y nos ayuda a separar el contenido de los estilos visuales.

Existen alternativas a Tripoli, como por ejemplo Blueprint, pero para mi gusto Tripoli es el más austero y sencillo. Os animo a probarlo, en algunos proyectos puede resultar muy útil.
(más…)

Herramientas imprescindibles para desarrollo web, nº1.

Cuando creas un sitio web, sea una página básica o una compleja aplicación Php/Ajax, hay ciertos tipos de herramientas que nos vemos obligados a usar siempre. Este sera un primer acercamiento a estos programas imprescindibles en nuestro trabajo y cuales, según mi opinión, son las mejores opciones libres para cubrir esas necesidades.

Clientes FTP

De que nos sirve hacer una página web si no podemos luego subirla a Internet. Aparte necesitaremos mantenerla actualizada y mover archivos a menudo entre nuestro ordenador y el servidor. Para ello nada mejor que un cliente FTP, pues aunque también se podría hacer de otras formas (mediante ssh por ejemplo) ya necesitamos tener un control avanzado sobre el sistema operativo del servidor. (más…)