Visitando el weblog de J Wynia, me encuentro con un pequeño script css para crear los ya conocidos bloques de fecha (CSS date Block los llama) que en su mayoría son utilizados por bitácoras de diseño.
He hecho algunos cambios al código, haciéndolo más pequeño aún, pero igual de funcional por lo menos en Firefox, IE6 y Opera.
La diferencia entre ambos scripts radica en usar el alto de linea (line-height) para el campo día, en vez de los márgenes negativos en día y año, que podrán observar en el artículo de Wynia. Algo realmente sencillo, pero que redunda en un código más simple.
Código HTML
<div class="fecha">
<div class="mes">
SEP
</div>
<div class="dia">
30
</div>
<div class="año">
2005
</div>
</div>
Código CSS
.fecha {
text-align: center;
width: 50px;
font-family: "Times New Roman", Times, serif;
font-weight:bold;
border:1px solid #000000;
}
.mes, .año {
font-size: 14px;
}
.dia {
font-size: 30px;
line-height: 22px;
}
Ahora bien. este es sólo un ejemplo, la idea es hacerlo acorde al diseñó de tu sitio web y esto depende de ti.
Idea Original: J Wynia: CSS Date Blocks for Blogs
Muy bueno!! Me salvaste :)
gracias!!