Tutorial para crear calendario de entrada – CSS(III)

Esta será la última entrada referente al CSS de Sinpastaenelbolsillo.com que realize, al menos de momento, la siguiente será una introducción a JQuery, pero eso será más adelante, ahora vamos a ver como realizar un calendario que muestre el día y el mes, por ejemplo, de cuando fué escrita una noticia.

Crear un calendario para mostrar un día y su mes correspondiente.

La idea de este tutorial consiste en crear una hoja del calendario como la que puedes ver en esta misma entrada, arriba a la izquierda, que te dice el día y el mes en el que se escribió la entrada.

Vamos a trabajar sobre la plantilla que bajamos de Freecsstemplates.org.

Primer paso - Editar el código html.

Lo primero que tenemos que hacer es editar el código html, de forma que dentro de cada elemento post se cambie el orden del elemento title y el elemento meta:

Original:

PLAIN TEXT

CSS:

<div class="post">
<h2 class="title"><a href="#">{Titulo}</a></h2>
<p class="meta"><em>{Fecha} Posted by <a href="#">{Autor}</a></em></p>
<div class="entry">{Entrada}
<div><a class="links" href="#">Full Story</a></div>
</div>
</div>

Cambiado:

PLAIN TEXT

CSS:

<div class="post">
<p class="meta"><span>{Mes}</span><strong>{Día}</strong></p>
<h2 class="title"><a href="#">{Título}</a></h2>
<div class="entry">{Entrada}
<div><a class="links" href="#">Full Story</a></div>
</div>
</div>

Date cuenta de que el mes hay que ponerlo con su abreviatura, ya que si no se nos saldrá de los límites, y el día con número.

Segundo paso - La imagen para el calendario.

Este paso es más labor de búsqueda en internet que otra cosa, se trata de encontrar una imagen que nos sirva para nuestro cometido, como la que tiene este blog o la que puedes encontrar en mi web de ganar dinero en este enlace.
Yo la encontré en un tutorial en inglés que explicaba lo mismo, pero que ahora no se donde está, si lo encuentro lo colgaré.

Solamente tienes que subir la imagen al servidor, y ahora trabajaremos con ella a través del CSS

Tercer paso - El CSS.

Ahora solo nos queda poner cada cosa en su sitio, así que vamos a hacer que el .meta tenga de imagen de fondo la que hemos cogido del apartado anterior, que se alinee a la izquierda del título de la entrada, ponerle un margen lateral y que el texto se alinee al centro:

PLAIN TEXT

CSS:

.post .meta {
margin: 0 10px 0 0;
width: 36px;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #66665E;
text-align: center;
float: left;
background: url('/images/calendario.gif') no-repeat left top;
}

Eso es para el fondo, ahora vamos con el mes:

PLAIN TEXT

CSS:

.post .meta span {
display: block;
color: #FFFFFF;
position: relative;
top: -5px;
}

Como puedes observar, he tenido que subirlo con el atributo position, y ponerle el display: block; para que el número del día aparezca debajo.

Para terminar modificaremos un poco el día:

PLAIN TEXT

CSS:

.post .meta b {
font-size: 16px;
position: relative;
top: -17px;
}

Como puedes observar, también he tenido que subirlo un poco con el position, y el código total es bastante sencillo y muy personalizable, así que si utilizas otra imagen y no salen a una altura correcta el día o el mes, sólo tienes que cambiar los atributos top.

Para terminar con el apartado de CSS dejo unos enlaces que pueden resultar interesantes

Todos los enlaces los he sacado del Moodle de la asignatura Tecnologías Web de Ciente de la ETSIT de la UPM, impartida por Carlos A. Iglesias.

En la siguiente entrada empezaremos con JQuery.

Compárteme: