Ponle estilo a tus listas ordenadas con CSS

Por defecto las listas ordenas muestran el número listado con el mismo estilo de fuente usado para el cuerpo del texto. Para diferenciarlo vamos a darle estilo mediante CSS y para eso haremos uso de otro elemento, como puede ser span o p en este caso p. Prácticamente lo que hacemos es aplicar un estilo a ol y resetear p (anidado en ol).

Primero creamos la lista

Aplicamos el estilo que llevarán los números a ol

Y por último reseteamos p

Espero que os haya gustado mucho!

Estructura y maquetación de una pagina web con capas y CSS

1 Introducción.

Primero de todo decir que lo que se va explicar a continuación será válido y funcionará si se utiliza el DTD adecuadoque para todos los temas de CSS de grafikas.es son el XHTML Transitional y el Strict. Cualquier otro DTD o la ausencia del mismo en el documento puede hacer inservible lo aquí explicado.

No se ha intentado mantener compatibilidad con IE5 dado que actualmente no es usado por más de un 1% de los internautas. Aunque la mayoría de lo explicado funcionará también en este navegador.

Durante años los diseñadores Web recurrieron al uso de tablas para la colocación de los diferentes elementos de una página. Esta fue una buena solución que permitió maquetar páginas que en apariencia estaban formadas por varias columnas y otros montajes complejos, este sistema utilizaba tablas anidadas que a muchos se les atragantaban y no conseguían entenderlas, además su estructura no era clara y hacía que los robots de los buscadores no las analizarán correctamente.

Algunos utilizábamos las capas para colocar los elementos de la página con mayor precisión y en combinación con las tablas realizábamos nuestros diseños. También las utilizábamos para mostrar o ocultar elementos y otras cuestiones. Esto generaba páginas de estructura compleja dificiles de entender para cualquiera que viera el código y estuviera aprendiendo.

Con las nuevas directrices de accesibilidad Web este tipo de maquetación esta desaprobado y se recomienda el uso de capas (etiqueta div) para componer o maquetar una página Web creando una estructura lógica de la página de fácil seguimiento por cualquiera incluidos los robots. Este «nuevo» sistema hizo que cada diseñador se las apañara como mejor le pareció para conseguir los resultados deseados y eso dió lugar a que para lograr el mismo resultado hubiera varias soluciones que se encuentran por doquier en Internet. Pero a la hora de enseñar a alguien sin conocimientos previos de capas y CSS como hacer esto no se pueden usar varios métodos (liaría más que aclarar nada), además los diferentes códigos que aparecen van solucionando los problemas de compatibilidad CSS de los diferentes navegadores sobre la marcha creando mucho código confuso que no es aplicable en todas las circunstancias o aún siéndolo es dificil discernir lo fundamental de lo accesorio.

Sin haber descubierto nada nuevo ni inventado nada lo que voy a tratar de hacer aquí es exponer un método universal (que funcione en todos los navegadores más utilizados ) que utilice el menos y más simple código posible y explicar el proceso de la manera más sencilla para mi y espero que para todos los que lean estos apuntes.

2 Las capas con CSS.

Capa fue el nombre que se empezó a utilizar para denominar a los elementos creados con la etiqueta <div> usados para colocar en la página Web cualquier otro elemento (imagen,tabla,párrafo,lista…), existía también la etiqueta <layer> para el navegador Netscape de donde supongo vendrá la denominación de capas (layers en Inglés) ya que div es la abreviatura de «division».

Bueno vamos al grano, para colocar los elementos de una página (imágenes, textos, listas, tablas, formularios, etc ) utilizaremos unos «contenedores» que además nos van a ayudar a dar estructura a nuestra página, estos «contenedores» son las capas que crearemos con la etiqueta <div>. Para HTML los elementos <div> son elementos de bloque y tienen todas las propiedades de estos pero como los utilizamos para colocar (posicionar) los elementos de la página las propiedades más específicas son las de posicionamiento:

  • Propiedad position con los valores posibles de relativeabsolute , fixed o inherit y cuyo uso es obligatorio en Ie7 y Firefox cuando queramo utilizar las propiedades siguientes de la lista.
  • Propiedades topleftbottomright que definen las distancias al elemento desde el borde superior, izquierdo, inferior y derecho de la ventana del navegador.
  • Propiedad z-index con un valor numérico (1,2,3….) que indica el orden de apilamiento es decir que capa está encima de otra un valor 3 indica que estará encima de las capas con un valor 1 o 2, por ejemplo.

Utilizar este sistema cuando se crea la estructura de la página da más problemas que ventajas, por lo menos es lo que me dice la experiencia, a la hora de explicarselo a alguien. De hecho vamos a ver que para crear la estructura de la página es mejor recurrir a otras propiedades diferentes a las de posicionamiento.

El código explicado es válido para IE6,IE7,Firefox 2 y navegadores que se adapten a las recomendaciones del w3. Se ha mantenido la compatibilidad con IE6 debido al elevado porcentaje de usarios de esta mala versión de Internet Explorer.

2.1 Crear una capa

Una capa se crea utilizando la etiqueta div se les suele dar un nombre utilizando el atributo id (el nombre ha de ser único para cada capa de la misma página) y les aplicamos propiedades mediante hojas de estilo utilizando el selector #nombre_capa.

<div id=»capa1″>aqui va el contenido de la capa</div>

El código anterior se sitúa en el body o dentro de otro div es decir las capas se pueden anidar. Para fijarle propiedades escribiremos el siguiente código en la cabecera del documento html (es decir entre las etiquetas <head> y </head>).

<style type=»text/css»>
#capa1 { position:absolute;
top:0px;
left:80px;
width:200px;
height:90px;
background:red;
z-index:2;
}
</style>

Como el nombre de la capa ha de ser único, si queremos aplicar las mismas propiedades a dos o más capas utilizaremos clases es decir a la etiqueta div le aplicaríamos el atributo class=»n_clase» y en los estilos se definiría dicha clase.

3. Crear la estructura de una página con varias columnas.

Empezamos con la estructura básica de las columnas sin más y veremos como a partir de esta llegamos a crear cualquier combinación.

Supongamos que deseamos tres columnas, dos laterales del mismo tamaño y una central más grande que utilizaremos para colocar nuestros contendios.

1.- Empezaremos creando las tres capas mediante etiquetas div, como dos de ellas serán iguales usaremos una clase para definir sus propiedades mientras que para la otra utilizaremos el atributo id (si todas son diferentes utilizaríamos el atributo id para todas ). En el cuerpo del documento ponemos:

<div class=»lateral»>Columna Izquierda</div>
<div id=»central»>Columna central</div>
<div class=»lateral»>Columna Derecha</div>

 

El resultado será el siguiente:

Columna Izquierda
Columna Central
Columna Derecha

 

Los contenidos se disponen unos encima de otros según el orden en el que se escribieron en el cuerpo del documento, además ocuparán el ancho total de la página ya que son elementos de bloque para verlo vamos a ponerles color de fondo.

<style type=»text/css»>
.lateral { background:red;}
#central {background:blue;}
</style>

 

Esto me recordó bastante el aspecto de una lista de elementos y cómo para ponerlos en fila utilizamos la propiedad float pues pensé hacer lo mismo. Así que vamos a utilizar la propiedad float con el valor left para poner las capas en fila y también debemo darles el tamaño que necesitemos, normalmente sólo el ancho ya que el alto solemos dejarlo sin definir para que vayan creciendo en función del contenido, pero en este caso al ser un ejemplo lo vamos a fijar. En cuanto al ancho puede darse en porcentaje de la página y de esa manera siempre ocuparán el mismo área de la ventana del navegador.

<style type=»text/css»>
.lateral { background:red;
float:left;
width:24%;
height:80px;
}
#central { background:blue;
float:left;
width:50%;
height:80px;
}
</style>

Observad que el ancho total no suma el 100%, esto es debido a que curiosamente en Internet Explorer cuando el ancho es 100% no entran y este a de ser algo menor, en este caso la suma de los tres anchos es 98%. De lo anterior me convencí cuando comprobé que la propia Web del w3 utilizaba este ancho inferior al 100%.

Ya tenemos la estructura de tres de columnas que se adapta al tamaño del navegador y recordad que dentro de cada div puede haber cualquier cosa incluso otros div con una estructura similar.

Creo que el código es mínimo y fácil de entender, nos inspiramos en las listas. float:left hace que los elementos se coloquen a la izquierda del que los sigue, esta propiedad hay que ponerla a todas las columnas (divs), por culpa de IE6 sino se pondría en todas menos en la última, ya que ésta no tiene que ir a la izquierda de la siguiente. En cuanto a los anchos, se pueden poner en pixeles si queremos que tengan unas medidas exactas independientemente del tamaño de la ventana del navegado. Además este último sistema es más recomendable si no queremos que el aspecto de nuestro diseño varíe mucho o se estropee del todo al variar el tamaño de la ventana del navegador.

Si queremos 4 o 2 columnas lo único que hay que hacer es definir más o menos capas (div) en el cuerpo del documento y definir sus propiedades con estilos. Veamos un ejemplo con 2 columnas.

<div id=»lateral»>Columna Lateral</div>
<div id=»contenido»>Columna principal</div>

 

El código anterior es el que colocaríamos en el cuerpo del documento, mientras que en los estilos pondríamos lo siguiente:

<style type=»text/css»>
#lateral { background:red;
float:left;
width:24%;
height:80px;
}
#central { background:blue;
float:left;
width:74%;
height:80px;
}
</style>

 

3.1 Añadir un encabezado y un pie de página

Hemos visto que realizar estructuras de páginas de varias columnas es sencillo ahora vamos a añadir un encabezado y un pie a nuestra página y veremos que no es nada complicado.

Como necesitamos una capa para el encabezado y otra para el pie empezaremos añadiendo estas a nuestro código como se muestra a continuación, como vamos a poner distintas propiedades a cada una de las capas vamos a utilizar el atributo id y no clases para asignarles las propiedades.

<div id=»cabecera»>Cabecera</div>
<div id=»lateral»>Columna Lateral</div>
<div id=»contenido»>Columna principal</div>
<div id=»pie»>Pie</div>

 

Como se observa, el orden en el que creamos las capas es el mismo que tendrán cuando se vean en la página lo que simplifica el entendimiento. Creamos la capas con el mismo orden que se van a ver ( de izquierda a derecha y de arriba a abajo ).

En cuanto a las propiedades de estas nuevas capas ( las de las capas lateral y contenido no cambian ) decir que la primera, es decir la llamada cabecera, no tiene nada especial en cuanto a posicionamiento sólo lo que queramos darle de color de fondo, tamaño etc. Como estaba trabajando con porcentajes le pondremos de ancho el total de la página en este caso y al trabajar con porcentajes 100% (bueno realmente 99%, no tengo muy claro por qué, es algo dificil de entender es como lo anterior de no poder poner columnas cuyo ancho sume 100%, si la medida es en píxeles no hay problema pero en porcentaje no podemos poner 100% porque no encaja, si alguien sabe por qué, que nos lo diga) y de alto 80px; en cuanto a la capa pie lo mismo sólo diferirá en que para que esta capa se coloque debajo de las columnas deberemos contrarrestrar el efecto de la propiedad float de la capa precedente y esto se consigue con la propiedad clear (este es el truco que no es tal). En todo caso las propiedades serán las necesarias para nuestro diseño.

<style type=»text/css»>
#cabecera { background:olive;
width:99%;
height:80px;
}
#pie { background:olive;
width:99%;
height:40px;
clear:left;
}
#lateral { background:red;
float:left;
width:24%;
height:180px;
}
#central { background:blue;
float:left;
width:74%;
height:180px;
}
</style>

 

El resultado de este añadido es el que se muestra a continuación, una composición de página con cabecera, dos columnas y pie.

Se pueden añadir más capas de este estilo ocupando todo el ancho para menús o lo que se nos ocurra. Al final de esta página hay enlaces a diversos ejemplos de la aplicación de estas sencillas técnicas.

4 Estructura definitiva de la página.

Para que la página tenga una estructura lógica deberíamos englobar las capas anteriores en otra llamada, por ejemplo, «pagina» o «contenedor», nombre este último muy utilizado pero a mi me gusta más «pagina» porque da una idea más clara de la estructura, me explico:

  • Dentro del cuerpo del documento está la página y dentro de esta la cabecera las columnas y el pie y los demás elementos que necesitemos.

Además de para tener una estructura nos servirá para evitar que una reducción del tamaño de la ventana del navegador descoloque nuestra estructura (esto sólo ocurre cuando damos unas medidas a nuestras columnas en px y no en porcentaje, compruébalo) y para en su caso centrar el diseño en la página.

Vamos a realizar una estructura como la anterior de 780px de ancho centrada siempre en la pantalla del navegador (la imagen que se verá en esta página será sensiblemente menor para entrar en su diseño), la columna izquierda será de 150px, y por lo tanto la principal será de 650px. En el cuerpo del documento escribimos el código necesario para crear las capas tal y como se muestra a continuación.

<div id=»pagina»>
<div id=»cabecera»>Cabecera</div>
<div id=»lateral»>Columna lateral</div>
<div id=»contenido»>Contenido principal</div>
<div id=»pie»>Pie</div>
</div>

Conversor de entidades HTML

¿Qué hacer cuando no aparece el código HTML?

Algo que me pasa cuando quiero enviar un post que incluye código html es que no aparece el código. Esto pasa porque los caracteres <> son interpretados literalmente. Osea si escribo algo como esto que os muestro en la imagen inferior, será interpretado tal cual, por lo que sólo se mostrará un hola.

Sabiendo esto es fácil saber que la solución es cambiar dichos caracteres por su código html correspondiente, es decir se reemplazan las etiquetas < y > por &lt; y &gt;. Pero si el código a convertir es muy grande, puede resultar un fastidio hacer esto manualmente, para ello recurro a este conversor de entidades HTML, tan solo he de poner código en la zona de texto a convertir y presionar el botón convertir.

Con esto ya es posible insertar el código y que se muestre como debe de ser.

Cómo anotación esto pasa incluso en WordPress, aunque en FlatPress utilizando la etiqueta [code] de BBCode esto no sucede. Pero yo tengo que utilizar el conversor porque uso la etiqueta <pre> para poder estilizar el código.

Menus basico con Listas y CSS

Creación de menús básicos con listas utilizando CSS.

En la red existen numerosos ejemplos de como crear menús utilizando hojas de estilo (CSS) pero muy pocos de ellos explican el proceso de creación es decir los razonamientos que hay que hacer para poder realizar estos elementos.

En estos apuntes intentaré explicar el proceso de elaboración de un menú de este tipo, razonando la utilización de las diferentes propiedades.

El uso de listas para esta función se enmarca dentro de las directrices de accesibilidad web y se adapta perfectamente al concepto de Web 2.0.

Aclaremos antes de empezar que lo que se va explicar a continuación será válido y funcionará si se utiliza el

DTD adecuado que para todos los temas de CSS de grafikas.es son el XHTML Transitional y el Stricttambién son válidas con XHTML 1.1. Cualquier otro DTD o la ausencia del mismo en el documento puede hacer inservible lo aquí explicado. No se ha intentado mantener compatibilidad con IE5 dado que actualmente no es usado por más de un 1% de los internautas. Aunque la mayoría de lo explicado funcionará también en este navegador.

Menú vertical básico utilizando listas desordenadas y CSS.

Empezaremos por el caso más simple de todos. Nuestra intención es crear un menú con diferentes enlaces, unos encima de otros, de forma que al situar el ratón encima de los enlaces estos cambien el color de forndo.

  • Creamos (dentro del cuerpo del documento,por supuesto) la lista desordenada con los enlaces que en este caso serán enlaces a ninguna parte. El código será el siguiente:
<ul>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
<li><a href=»#noir» title=»Ir a enlace1″>Enlace1</a></li>
</ul>

El resultado del código anterior se mostraría asi en el navegador:

Esto podría ser un menú perfectamente válido, pero no se parece a lo que estamos buscando así que empezaremos a darle forma.

  • A continuación vamos a cambiar el tipo de letra de los enlaces, quitarles el subrayado y ponerles un color de fondo. Para esto utilizaremos hojas de estilo en cascada (CSS). El código se puede colocar en el encabezado del documento XHTML utilizando la etiqueta <style type=»text/css»></style> o en un archivo aparte con la extensión «css» (en este caso no se pone la etiqueta <style>) y en la cabecera del documento HTML pondríamos lo siguiente:
<link href=»estilos/estilo.css» rel=»stylesheet» type=»text/css» />

 

En el primer caso el código a poner en la cabecera (head) del documento XHTML es:

  1. <style type=»text/css»>
  2.  li a {  
  3. /*Mediante el selector li a, indicamos que estas propiedades
  4. serán aplicadas a todos los enlaces que están dentro de una lista li*/
  5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
  6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
  7.        text-decoration:none; 
  8. /*Esta propiedad es la que elimina el subrayado de los enlaces*/
  9.        background:#ff9;
  10. /*Esta propiedad cambia el color de fondo de los enlaces*/
  11.  }
  12. </style>
  • Como vemos siguen apareciendo los puntos (viñetas o topos) a la izquierda de nuestros enlaces, y esto no lo queremos por lo que utilizaremos la propiedad list-style-type que aplicaremos al selector ul, añadiendo el siguiente código a nuestro estilo:
ul {list-style-type:none;}

Podemos observar como nuestro «menú» se encuentra separado del borde de la página, esto es debido al margen interno que de forma automática se aplica a los elementos ul, para remediar esto utilizamos la propiedad padding que es la que controla los márgenes internos de los elementos, como en otras ocasiones resuta que Internet Explorer va por su cuenta y esto no le vale, deberemos (desgraciadamente) utilizar la propiedad margin-left (margen izquierdo) y darle valor 0. Por lo tanto añadimos al selector ul esta propiedad quedando de la siguiente manera:

ul { list-style-type:none;padding:0px;margin-left:0px;}

 

Ya hemos hecho lo más dificil, ahora vamos a cambiar el color al texto de los enlaces (utilizaremos la propiedad color) y vamos a separar los textos de los bordes y entre ellos (utilizando la propiedad padding). Es decir añadiremos al selector «a» esas propiedades.

  1. li a {  
  2. /*Mediante el selector li a, indicamos que estas propiedades
  3. serán aplicadas a todos los enlaces que están dentro de una
  4. lista li*/
  5.        font-family:»Trebuchet MS»,arial,verdana,helvetica;
  6. /*Esta propiedad establece el tipo de letra dando 4 opciones*/
  7.        text-decoration:none; 
  8.  /*Esta propiedad es la que elimina el subrayado de los enlaces*/
  9.        background:#ff9;
  10. /*Esta propiedad cambia el color de fondo de los enlaces*/
  11.        color:#fff;    
  12.  /*Color del texto blanco */
  13.        padding:4px 10px;
  14. /*Le ponemos «padding» superior e inferior de 4px y derecho e
  15. izquierdo de 10px;*/
  16.        font-size:12px;
  17.  /*De propina y para leerlo mejor aumentamos el tamaño del texto
  18. a 12px*/
  19.     }

¿Arrgggg! ¿qué sucede? (si usa ie nada, pero debería cambiar de navegador), nada que no se pueda remediar, resulta que el padding hace que se monten unos con otros ya que los elementos » a» son de línea y esto es normal en ellos, por lo tanto vamos a convertirlos a elementos de bloque (además nos iba a hacer falta si queriamos que al pasar por encima el ratón cambiara todo el fondo) para ello utilizamos la propiedad display con el valor block.

¿Uy! ahora nos ocupa todo el ancho de página y además en ie6 se separan los elementos (normal, los elementos de bloque salvo indicación en contra hacen esto,lo primero no lo de ie6) ambas cosas las vamos a solucionar indicando un ancho al elemento » a» mediante la propiedad width (el ancho para un menú vertical se establece normalmente entre 120px y 200px ). al hacer esto el texto no quedará centrado si lo queremos centrado deberemos utilizar la propiedad text-align con el valor center para las etiquetas a.

Muy bien, recordar que podemos centrarlo simplemente añadiendo la propiedad text-align:center, ahora vamos a hacer que al pasar el ratón sobre los enlaces cambie el color de fondo y del texto (propiedades background y color). Para ello utilzamos la pseudo clase :hover junt al selector «a» de la siguiente manera:

li a:hover {background:#fc0;color:#fff;}

Creo que lo he hecho de la manera más simple de todos modos se puede hacer por otros caminos. Lo importante es seguir un proceso que nos permita entender que hacemos y porque lo hacemos para poder así desarrollar nuestros propios menús.

De esta forma podemos intentar añadir bordes al menú anterior entre los elementos del menú. Si lo pensamos parece lógico que utilizando una propiedad que permita poner bordes a un elemento será suficiente. Veamos que pasa si añadimos al selector de los enlaces la propiedad border-top:1px solid black.

Nos quedaría quitar la línea superior o bien añadir una línea en el enlace inferior (utiliazaríamos una clase) y utilizar colores y tamaños que nos gustaran.

Espero que sirva para que podais crear vuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Menú horizontal

Ahora se nos ocurre hacer un menú horizontal, es decir que los enlaces vayan uno al lado de otro no encima. ¿qué debemos hacer? pues preguntarnos si existe alguna propiedad que disponga los elementos de esa manera, uno al lado de otro. para las listas la propiedad display con el valor inline hace esto, pero aquí no sirve ya que al haber puesto los enlaces como elementos de bloque (display:block;) estos siguen unos encima de otros por lo que la opción que nos queda es utilizar la propiedad float (flotar) con los elementos li ya que nos permite controlar como se coloca un elemento respecto al siguiente, de esta forma eligiendo el valor left cada uno de los elementos de la lista se coloca a la izquierda del siguiente quedando todos en línea.

Por lo tanto debemos añadir a nuestro estilo la siguiente línea y el menú ya quedará horizontal (y deberemos quitar o cambiar el ancho asignado a las etiquetas a, si vemos que no cabe en la página;):

li {float:left;}

La verdad que es simple, sólo añadir una línea pero lo importante es razonar por qué.

Repito que lo que se pretende es crear nuestros propios menús sin copiar ni pegar código, razonando por vosotros mismos.

Los problemas no terminarán aquí ya que si queremos el menú centrado en la pantalla o que al cambiar el tamaño del navegador no se nos descoloque tendremos que añadir alguna cosa.

Veámoslo con un ejemplo. Vamos a intentar centrar nuestro menú en la pantalla.

Tengamos en cuenta que el elemento «ul» al ser un elemento de bloque ocupa por defecto todo el ancho de la pantalla, entonces podríamos utilizar la propiedad text-align con el valor center que haría que lo que esté dentro de la etiqueta » ul» se sitúe centrado

ul {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; list-style-type: none;width:480px;margin: 0px; }

Pero no, no funciona porque los elementos li tienen la propiedad float.¿Entonces?¿qué podemos hacer? Una posible solución sería establecer unas medidas a nuestro menú; pondremos 100px a cada enlace y 480px a la lista ya que tenemos 4 enlaces de 100 con un «padding» total de 20 cada uno; y centrarlo en la página mediante márgenes automáticos en el elemento ul. Esto no funciona en IE6 y necesitaremos establecer para el elemento que contenga la lista (puede ser body, div, li etc..) la propiedad text-align con el valor center

ul {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; list-style-type: none;width:480px;margin: auto; }
body {text-align:center;}
li a { padding-right: 10px; display: block; padding-left: 10px; font-size: 12px; background: #ff9; padding-bottom: 4px; color: #000; padding-top: 4px; font-family: «trebuchet ms»,arial,verdana,helvetica; text-decoration: none;width:100px; }

Como se comprueba, el hecho de que IExplorer no respete las especificaciones CSS supone una pérdida de tiempo y muchos quebraderos de cabeza. Deberíamos utilizar otros navegadores y así forzar a Microsoft a respetar las normas.