I have an image very similar to this ..

alt text

I am trying to print month name and year on it, for example, Jan (large size) and 2010 at the bottom of Jan (but within the image).

The reason I am trying to print the month and year is that they are dynamic presented to user and I am printing 12 of them in a single row, for example, Mar 2009 to Mar 2010. I am not very experienced in css but I do have understanding of it. The current markup I have got is as

<li><a href="#">Mar 2009</a></li>
<li><a href="#">Apr 2009</a></li>
<li><a href="">May 2009</a></li>
<li><a href="">Mar 2010</a></li>

But I have full control on markup and if you suggest a different to achieve this I can try that. I have tried

 li { list-style-type: none; display:inline; border: 0px solid #ddd; width:50px;
      height:50px;  background:url(/images/calendar_empty_50.gif) #ffffff no-repeat; }

but this doesnt make the image clickable. So I tried to set background on the < a > but that shrinks to a corner. I then set padding which displays fine but then I dont have control over the position of the text.

Any Ideas how I can achieve this.


3 answers

This was chosen as the best answer

I meant like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">

                font-family: "Helvetica Neue", Arial, Helvetica,  sans-serif;

                list-style-type: none; 
                float: left;
                margin: 10px;

            li a
                display: block;
                width: 50px;
                height: 60px;
                background:url('210px-Blank_Calendar_page_icon.svg.png') #ffffff no-repeat;
                color: #333;
                text-decoration: none; 
                text-align: center;
                padding: 28px 0 0 0;
                font-size: 13px;
                text-transform: uppercase;
                line-height : 1;
            li a span
                font-size: 10px;
                font-weight: bold;

        <li><a href="#">Mar<br /> <span>2009</span></a></li>
        <li><a href="#">Apr<br /> <span>2009</span></a></li>
        <li><a href="">May<br /> <span>2009</span></a></li>
        <li><a href="">Mar<br /> <span>2010</span></a></li>

Answered almost 7 years ago by Tony Crockford
  • Tony - Absolutely smashing. You are simply amazing. Very impressed!!!! Many thanks. almost 7 years ago
<li><a href="">Mar <br /><span>2010<span></a></li>

and CSS

 li a {display: block; width:50px; height:50px; font-size: 12px;}
 li a span {font-size: 10px;}

or similar.

you might also be interested in this:


Answered almost 7 years ago by Tony Crockford
  • @Tony - setting font-size is not a problem but its the actual positioning of text within an image which is a background image of a link. Re Css-tricks, I had a look on that page but not very helpful as its using divs, not <a>. Thanks for your answer. almost 7 years ago
  • if you make the a display-block, you can use top padding to move the text down... Tony Crockford almost 7 years ago
Mottie 1134

I see you have your answer, but check out this blog for another idea ;)

Answered almost 7 years ago by Mottie