Una propiedad muy importante de CSS es position. Con ella, podemos estructurar nuestro sitio web, aunque según mi perspectiva prefiero utilizar float y display para lograr lo mismo. Enfin, cosa de gustos. Algunas veces eso sí se me ha hecho necesario utilizar position para manejar la posición de un elemento por sobre otro, o respecto a mi ventana. La propiedad position ubica un elemento en varios estados: static, relative, absolute o fixed. Detallemos:

Una de las cosas más difíciles que me toca al armar un sitio, son los formularios. Hacer que queden alineados correctamente, y en todos los browsers, es algo que a ratos me complica. Al terminarlos, está un pequeño botón que gatilla el envío del mismo. Este simple botón también suele ser un dolor de cabeza, ya que darle un estilo al no es correctamente interpretado por todos los browsers. Me topé con este problema hace un tiempo, y encontré la siguiente solución. Por supuesto, la comparto por si más de alguien tiene el mismo inconveniente.

Pido disculpas por un título tan simple esta vez. No se me ocurrió nada mejor. Enfin, lo que vale es lo que sigue. Siguiendo con el desarrollo del nuevo Be Studios, creé un método donde al posar el mouse sobre una imagen, se desplegara un texto alternativo (no, no es alt) y que fuera auxiliar a la imagen. Esto lo había visto antes, sólo que no recuerdo ningún link en este momento. Entonces, recreé la situación, y la explico a continuación. Antes sí, vean el ejemplo para que sepan de qué hablo. Primero el código HTML. En este caso, es sólo una imagen simple y silvestre. Ella está contenida dentro de un , el cual me entrega más control sobre el manejo de profundidades a través de z-index. Mi texto alternativo se posa sobre un luego después del , el cual a través del CSS se verá dentro, y con un fondo y con transparencia.

Existen 2 maneras para centrar elementos HTML, ambas muy conocidas y difundidas. Con CSS, centrar un elemento depende de sí mismo: Elementos lineales Estos elementos son los que no son en formato bloque, como e imágenes . Para centrarlos, se utiliza la propiedad text-align dentro del contenedor que lo alberga:

En estos días he estado diseñando y contruyendo el nuevo sitio web para mi proyecto-empresa Be Studios. Es la tercera versión ya, y esta vez no utilizaré ni una pizca de Flash; me aburrió. Así que está siendo construído enteramente sobre XHTML (trataré de que sea estricto y que valide en todo) y he jugado bastante con diferentes efectos javascript. Durante su construcción, me he topado con varios inconvenientes, los que a través de unas técnicas interesantes he podido sobrepasar.

Un interesante recurso utilizado por diseñadores es de utilizar bordes redondeados para delimitar secciones en sus sitios web. En CSS no es tan simple lograrlo, a veces implica utilizar más de un DIV contenedor para abrir y cerrar los bordes, además de que nos impide que éstos sean líquidos (o elásticos). navegando, me encuentro con 2 soluciones que se ven bien prometededores, y son realmente crossbrowser (no como en el que publiqué hace un tiempo, donde al parecer tiene problemas con IE6).

#19 – 30 Marzo 2007 Envía tu sitio construído en HTML+CSS

Un gran medio aún por ser explotado en latinoamérica (y que creo que lo será durante este año 2007) es el de la internet para dispositivos móviles. Aunque ya hice un acercamiento en el artículo CSS para móviles, navegando por mis RSS encuentro un link donde Brian Fling se toma la molestia de escribir un manual para diseño web para móviles. Increíble, aplaudo su iniciativa. Download directo del manual en PDF

Por usabilidad, siempre es recomendable dejarle claro al usuario dónde está parado dentro del sitio. Existen varias maneras de hacerlo, desde dejar evidente en el en qué sección se está, pasando por mostrar un pequeño mapa de navegación desde y hasta dónde está ubicado (Inicio > Quiénes Somos > Empleados por ejemplo) o dejar seleccionado en el menú de navegación dónde uno está parado, con una clase especial. En este caso, en sitios pequeños a medianos, recomiendo utilizar un pequeño y simple truco que involucra HTML y CSS. Hagamos un layout muy simple. En este caso, un menú con listas y un contenido sólo para que no esté tan vacío (reciclaré el HTML de un post anterior):                 Item Uno           Item Dos           Item Tres            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………

«Estaba ya cansado de, cada vez que necesitaba del código del .clearfix para incluirlo en una nueva hoja de estilos CSS, tenía que googlear y copiar-pegar desde positioniseverything… Entonces, luego de un día de investigación, ha surgido este widget. Muchas gracias a Apple por hacer la vida de todos más fácil… Sólo presiona el botón copy para hacer el código disponible en tu clipboard. Luego, pégalo en tu hoja de estilos favorita.» «I was sick and tired of, everytime I needed the .clearfix code to include it to a new CSS stylesheet, I had to google it and copy-paste from positioniseverything… So, after one day of investigation, this widget has emerged. Many thanx to Apple for making everyone’s life easier… Just press the copy button to make the code available in your clipboard. Then, paste it in your favorite stylesheet.»