menu
» Web style guide » Dates & times Dates & times
Dates may be formatted as per the ANU homepage, with a large number for the date, and a smaller month (and year) underneath.
For advice on the appropriate form of dates and times see the editorial style guide.
Dates
To achieve this, use the following code:
<div class="day">15</div>
<div class="month">Jan</div>
<div class="year">2010</div>
</div>
The year class is optional - it is generally not necessary to display the year on a homepage or block that only shows a few events. Year is only really needed in archives where it is possible that multiple years are displayed.
The text alongside the date block should be wrapped in a div with the class datetext. This stops the text from moving underneath the date. Links within a datetext block will only be underlined on hover.
Some descriptive text near the date
For example:
<div class="day">15</div>
<div class="month">Jan</div>
</div>
<div class="datetext">
<p>Some descriptive text near the date</p>
</div>
A generic block, with a top, middle and bottom label.
<div class="top-label">Week</div>
<div class="middle-label">1</div>
<div class="bottom-label">2013</div>
</div>
<div class="datetext padtop">
<p>A generic block with a top, middle and bottom label.</p>
</div>
Optionally, a faint vertical line can be added between the date and the text. To achieve this, use the class dateblock-line.
Some descriptive text near the date in a narrow div.
<div class="day">15</div>
<div class="month">Jan</div>
</div>
<div class="datetext">
<p>Some descriptive text near the date in a narrow div.</p>
</div>
Times
You can also insert a time into a dateblock, or use the time alone in a timeblock.
A dateblock showing the time first
<div class="time">10.00 am</div>
<div class="day">15</div>
<div class="month">January</div>
</div>
<div class="datetext padtop">
<p>A dateblock showing the time first</p>
</div>
A dateblock showing the time first, with a faint vertical line
<div class="time">10.00 am</div>
<div class="day">15</div>
<div class="month">January</div>
</div>
<div class="datetext padtop">
<p>A dateblock showing the time first, with a faint vertical line</p>
</div>
A block that is just for time only
<div class="timestart">10.00 am</div>
</div>
<div class="timetext">
<p>A block that is just for time only</p>
</div>
Tips & tricks
Date and time blocks are elements which 'float'. If you want to put a dateblock or timeblock inside a box then you will also need to float that box by adding the class left or right to ensure that the box is able to display the contents within it properly. If you do not float the box, the box will only be as big as the date (in the majority of browsers), which is a problem for short event titles.
This box is floated
(class="box-solid left")
This box is not floated
(class="box-solid")
You might also find (in most browsers) that a run of multiple date blocks with short titles makes your layout collapse so that the text for the events are not correctly aligning with the dates.
titles collapsed:
To avoid this you can either put a divider line in between each line, or you can wrap dateblock and datetext in a div with the class clear.
Inserting a divider (below we insert it within the datetext class but you could also insert it afterwards).
<div class="day">15</div>
<div class="month">Jan</div>
</div>
<div class="datetext">
<p>Text for block one.</p>
<div class="divline-solid">
</div>
</div>
Wrapping in a div with the class clear
<div class="dateblock">
<div class="day">15</div>
<div class="month">Jan</div>
</div>
<div class="datetext">
<p>Text for block one.</p>
</div>
</div>
Monthly calendar
Classes are available to style monthly calendars. When the calendar uses the calendar class, cells will have grey, centered text. On the cells for selected days (eg those on which there are events) you can use the eventday class, resulting in the cell having a grey background and bold text (as shown in the example).
| « November 2012 » | ||||||
|---|---|---|---|---|---|---|
| Su | M | Tu | W | Th | F | Sa |
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | |
<caption>Meetings calendar</caption>
<thead>
<tr>
<th colspan="7"><a class="nounderline" href="#">«</a> November 2012 <a class="nounderline" href="#">»</a>
</th>
</tr>
<tr>
<th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th>
</tr>
</thead>
<tbody>
...(additional rows)...
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td class="eventday">16</td>
<td>17</td>
</tr>
...(additional rows)...
</tbody>
</table>
