Έξυπνες ημερομηνίες

[Anastasis 48]

Στο μάθημα αυτό θα δούμε πως μπορούμε να προσθέσουμε στην ιστοσελίδα μας έξυπνες και όμορφες ημερομηνίες για τα θέματά μας. Θα χρειαστούμε δύο εικόνες τις οποίες μπορείτε να τις βρείτε εδώ:

Εικόνα 1 Εικόνα 2

Στο css αρχείο μας θα προσθέσουμε το παρακάτω:

 

κώδικας:

.date {    display:block;    text-align: center;    float:left;    font-family: Arial, Helvetica, sans-serif;    background:url(clip-bottom.png) right bottom no-repeat;    margin-right:2px;    width:40px; }

display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
text-align: κεντρική στοίχιση
float:left τοποθέτηση στα αριστερά
font-family: επιλογή γραμματοσειράς
background: εικόνα φόντου τοποθετημένη κάτω αριστερά και μη επαναλαμβανόμενη
margin-right απόσταση από δεξιά
width: πλάτος
 

κώδικας:

.month {    display:block;    font-size: 10px;    padding-top:12px;    background:url(clip-top.gif) center top repeat-x; }

display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς
padding-top: απόσταση του περιεχομένου από το πάνω μέρος
background: εικόνα φόντου τοποθετημένη πάνω κέντρο και επαναλαμβανόμενη μόνο οριζόντια
 

κώδικας:

.day {    display:block;    font-size:14px; }

display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς

Μέσα στο html αρχείο μας και στο σημείο που θέλουμε να εμφανίζετε η ημερομηνία θα γράψουμε το παρακάτω:
 

κώδικας:

<acronym class="date" title="9 Ιανουαρίου 2007">    <span class="month">Ιαν</span>    <span class="day">9</span> </acronym>

Live demo