Question

I need to put a anchor inside my li, using the same space as if it was just one element. Actually, I want to build this screen: http://postimage.org/image/w2q9ei21r/
I already have a code I just started, but I had some problems because the anchor is not occuping the same space of li. I appreciate any help.
http://jsfiddle.net/Br9Km/2/

Answer 1

You can achieve what’s being presented on your image with this structure:

• See this working Fiddle example for having the visitor clicking
  over the month name!

  On this print-screen, you can see the mouse over the “Fevereiro” month.

  

CSS

/* rounded corners */
#ConteudoMeses li, #ConteudoMeses li a, #ConteudoMeses li span {
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
}

/* LI element format */
#ConteudoMeses li {
    display: inline-block;
    width: 140px;
    height: 76px;
    margin: 0 0 8px 0;
}

/* link format */
#ConteudoMeses li a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    line-height: 74px;
    width: 110px;
    color: white;
}

/* arrow holder format */
#ConteudoMeses li span {
    float: right;
    display: block;
    height: 74px;
    width: 20px;
}

---

• See this working Fiddle example for having the visitor clicking
  on the month name and correspondent arrow!

  On this print-screen, you can see the mouse over the “Fevereiro” month.

  

CSS

#ConteudoMeses li, #ConteudoMeses li a, #ConteudoMeses li span {
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
}
#ConteudoMeses li {
    display: inline-block;
    width: 140px;
    height: 76px;
    margin: 0 0 8px 0;
}

#ConteudoMeses li a {
    display: block;
}
#ConteudoMeses li .label {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    line-height: 74px;
    width: 110px;
    color: white;
}

#ConteudoMeses .arrow {
    float: right;
    display: block;
    height: 74px;
    width: 20px;
}