Ha resultado ser un extenso tópico el asunto de las listas. Mucho hay de qué hablar, y mucho por complementar. En esta ocasión, desenterraré varias propiedades HTML que se han dejado de utilizar por diferentes razones, pero que aún resultan esenciales para el desarrollo semántico y la presentación de contenidos. En muchas de ellas podremos utilizar CSS para ampliar su configuración. UL es archi-conocido y ampliamente utilizado en este mismo sitio. Por eso, recurriré esta vez a OL: Ordered Lists. Corresponden a listas donde el orden de los elementos se realiza automática y secuencialmente, pero donde tenemos la oportunidad de manejar algunas de ellas a través de un par de atributos. Su forma de construcción es similar a los UL (Unordered Lists):

Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar: Comenzamos con el HTML de una típica lista con unos 5 elementos:     Arroz     Azúcar     Shampoo     Cerveza     Hongo Alucinógeno

Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta.

Ya va 1 año desde que este proyecto se concretó, y se publicó el primer post. Mucho ha pasado, pero sólo 2 templates han existido (lo que es curioso ya que no suelo quedarme tranquilo con los diseños que hago para mí). Agradezco a todos quienes me han ayudado a que esto salga adelante, a todos quienes leen esto y principalmente quienes comentan ya que lo más importante es su feedback.

A partir de CSS2, se puede agregar más de una clase a un selector. Basta con separarlos con un espacio dentro del class de esta manera: class=“rojo bold”. Veamos un ejemplo muuuuuy simple. A continuación, dos estilos para un mismo texto: .rojo {<br />      color: #F00;<br /> }<br /> .bold {<br />      font-weight: bolder;<br /> } Ver ambas clases en un mismo tag .**** Un detalle muy importante.

#16 – 16 Octubre 2006

En una oportunidad previa, mostré una técnica para construir formularios tableless, o sea, sin las famosas tablas que tanto nos ayudaron hace algún tiempo. Sin div’s, solamente label e input fueron necesarios. Bien, en esta ocasión, seguiré con este apasionante e intrigante tema, pero se motrarán 2 variaciones del mismo formulario, pero con diferentes diseños. Dependiendo de tus necesidades, más de alguno puede servirte. El concepto de hoy: construir semánticamente (hacerlo accesible a los browsers y que sean relevantes para los buscadores, tal como lo recomienda la W3C). La clave está en 3 tags: fieldset, legend y label.

Con nuevo y mejor server, CSSLab vuelve al combate. Aún ajustaré unos plugins y acomodaré unas tablas del DB, pero en general está todo bien, creo. Cualquier problema grave, háganmelo saber en este post. Gracias! pd. Los foros no pude volver a instalar Vanilla, pero phpBB está funcionando. lamentablemente se perdieron todo lo que había antes… registros, temas, preguntas y respuestas. Tendrán que volver a registrarse para darle un nuevo uso a los foros.

Un layout fijo puede ser más fácil de construir para algunos, ya que todos los elementos están ordenadamente dispuestos, cada uno con su ancho fijo. Reseteando el margin y padding al principio de todos los tags, torna más fácil lograr una hegemonía entre browsers: * { margin: 0; padding: 0; } Mostraré una técnica bastante simple de diagramar un sitio utilizando CSS, de manera que hacerlo fijo o elástico (líquido le suelen llamar algunos) sea cosa de cambiar 4 caracteres en tu hoja de estilos. De un principio:

Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán: 1. Es un titulo importante. 2. El nombre de este título es el que está escrito ahi. El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos: