Archive for the “CSS” category
Sebastian Barria • 22nd Apr 2010 • Bugs, CSS, HTML, Javascript
Generalmente publico artículos y desarrollos míos, pero esta vez es algo así como uns servicio de utilidad pública. Esta vez puedo dar fe de que es la solución definitiva, pues lo probé y funcionó todo a la perfección.
Navegando por ahí encontré el sitio de DillerDesign, donde publican su “experimento” DD_belatedPNG. El tema es que esa librería de JavaScript REALMENTE soluciona el famoso problema de los PNG transparentes.
Anteriormente yo había publicado un artículo al respecto…, pero la solución que planteaba, si bien funcionaba, no servía para cuando existían fondos transparentes que se repetían. En fin. Esta librería
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Teoría, Web
Si ya hablé de pautas para diseño Web, esta vez le toca al desarrollo (maqueteo).
Al momento de maquetear un sitio Web es necesario fijarse en varios aspectos, que no siempre son atendidos por los desarrolladores. Algunas veces por descuido, otras por no saber.
Acá les dejo este checklist que puede servir de ayudamemoria para los que maquetean. La idea no es hacer una buena maqueta, sino una profesional:
Código HTML
El código debe ser limpio y claro…. Debe estar hecho con DIVs y no tablas. La idea es que se usen las etiquetas correctas en los lugares
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web
Introducción
Existen dos tipos de problemas con los archivos PNG en Internet Explorer 6:
- Cuando el PNG se utiliza como imagen (img src…)
- Cuando el PNG se utiliza como fondo de un DIV.
En ambos casos, es necesario aplicar algún fix para IE6. Hablo de “en ambos casos” porque cada uno de ellos se debe tratar de manera independiente.
Acá están las soluciones para ambos casos.
Como vimos en otro post, lo primero que se debe hacer es incluir los archivos necesarios para Internet Explorer 6. Para esto, dentro de la etiqueta head… hay que escribir el siguiente código:
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Web
Aunque suene poco humilde el título de este post, a mi parecer creo haber encontrado el mejor método para centrar DIVs horizontal y verticalmente en una página web, sin usar tablas ni position: absolute. Este método puede sonar poco ortodoxo, pero sin embargo, funciona a la perfección en todos los navegadores.
Los métodos actuales…
Para centrar los DIVs horizontalmente nunca ha habido problemas: definir un ancho al DIV y luego utilizar la propiedad margin: auto; para que se centre. El problema está en la vertical.
El primer método que todos se imaginarán el uso de position: absolute; top: 50%; margin-top:
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web
A esta altura de la vida, si no puedes hacer un sitio que sea compatible con IE6 (o que al menos se vea ALGO en ese navegador), no puedes decir que “sabes hacer sitios web”.
Si ya es una tortura trabajar con sitios que sean compatibles con varios navegadores a la vez, cuando se suma IE6, la cosa se pone cuesta arriba. Pero bueno, si hay que hacerlo, hagámoslo bien.
Este es un tip que nunca está de más en la biblioteca de tips de cualquier desarrollador web.
Condiciones exclusivas de Internet Explorer…
Algo rescatable de los navegadores IE, es
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Javascript, Web
Esta es una manera automática para hacer elementos con bordes redondeados. El resultado será como el que se observa en la imágen de ejemplo.
La idea es que el elemento permita ser expandible según sea el largo de su contenido. Para este ejemplo, utilizaremos un blockquote.
El objetivo es aplicarle, mediante CSS el borde redondeado superior a este elemento. Adicionalmente, le daremos la propiedad position:relative:
blockquote{
background: #E2F0F9 url(../img/borde_redondeado_superior.gif) top center no-repeat;
position: relative;
}
Una vez hecho esto, mediante JavaScript, seleccionaremos todos los elementos blockquote …de la página, y a cada uno de ellos, le insertaremos (a
Sebastian Barria • 7th Mar 2010 • Bugs, CSS, Web
Las pseudo-clases podrían definirse como “extensiones” a los estilos CSS, que permiten aplicar estilos diferentes a algunos elementos específicos. Los ejemplos más conocidos y utilizados, son :hover y :visited.
Otras de las pseudo clases conocidas permiten tomar los primeros elementos de algunas etiquetas y aplicarle ciertos estilos (como :fist-child, o :first-letter). El problema de estos, es que algunos no funcionan correctamente (o simplemente no funcionan) en nuestro querido amigo Internet Explorer 6.
Al aplicar la pseudo-clase :first-letter… en CSS, es posible darle propiedades a la primera letra de algún elemento. Por ejemplo, la siguiente clase haría que
Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web
HTML
Para clarificar los conceptos, el objetivo de un archivo HTML es contener solamente la información semántica, especificando el tipo de contenidos entre etiquetas. Su función es ver los objetos de manera estructurada, pero sin definir sus propiedades. Se ve que hay un párrafo, pero no se sabe sus características.
En estricto rigor, un texto que corresponda a un párrafo, debería ir entre las etiquetas <p> y </p> (paragraph); un texto destacado, debería ir entre <em> y </em>… (emphasis), etc. Lo ideal es que al ver el código fuente, no se vean las características o propiedades de los objetos, sino
Sebastian Barria • 7th Mar 2010 • CSS, Web
Como todos sabrán (todos los webmasters), en un desarrollo web profesional, es necesario conseguir que cada una de las páginas se vea exactamente igual en cada uno de los distintos navegadores (IE6, IE7, FF, Opera y Safari, al menos).
Esto se consigue a través de un archivo reset.css…, que debe ser llamado al principio de la hoja de estilos principal. Este código, permite que todos los elementos de un sitio se vean igual en todos los navegadores.
En realidad, su objetivo principal es eliminar cualquier estilo que venga por defecto en un navegador. Por ejemplo, los H1 o los
