treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Fun with post dates

  • Trying to do something fun with post dates in wordpress with css. Here is a link to an image:

    Image

    I can't get the year to but up to the top, so it kind of makes a nice neat box.

    Here is my code:


    <ul class="meta">
    <li class="date">
    <div class="month"><?php the_time('M'); ?></div>
    <div class="day"><?php the_time('j'); ?></div>
    <div class="year"><?php the_time('Y'); ?></div>
    </li>
    </ul>


    And the css


    div.entry ul.meta {
    padding:0;
    margin:0;
    list-style:none;
    float:left;
    width: 100px;
    height: 90px;
    font-size:11px;
    }

    .month {
    font-weight: bold;
    font-size: 24px;
    margin: 0;
    padding: 0 10px 0 0;
    line-height: normal;
    width: 35px;
    float: left;
    clear: both;
    border-bottom: 1px solid #CCC;
    }

    .day {
    font-weight: bold;
    font-size: 36px;
    margin: 0;
    padding: 0 10px 0 0;
    line-height: normal;
    width: 35px;
    float: left;
    clear: both;
    }

    .year {
    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    float: left;
    text-align: right;
    font-size: 24px;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccc;
    }

  • Try:
    margin: -15px 0 0 0;
  • Or put the year first in your markup and give it a float:right instead of left.
  • I always forget about negative margins! Thanks amoss, works like a charm!
  • You're welcome.