Grow your CSS skills. Land your dream job.

Aligning sprite in List element

  • # November 27, 2012 at 3:04 pm

    Here….try this. http://codepen.io/anon/pen/kjefy

    # November 27, 2012 at 3:21 pm

    Offhand I think all that is necessary is to change the position to get it to line up in

    .block ul.menu li a {
    background:transparent url(http://i.imgur.com/UHZe3.png)
    no-repeat 4px -816px;
    }

    if you make it -813px it looks about right.

    # November 27, 2012 at 3:29 pm

    Thanks. Any idea what should be done to align the arrow ?

    I have done what I believe is a dirty hack : [http://codepen.io/anon/pen/LcKxJ](http://codepen.io/anon/pen/LcKxJ “http://codepen.io/anon/pen/LcKxJ”)

    I used,

    .block ul.menu ul, .block ul.menu li {
    line-height:80%;
    }

    .block ul.menu li {
    background:transparent url(http://i.imgur.com/UHZe3.png) no-repeat 4px -816px;
    margin:0;
    padding:0 0 0 18px;
    }

Viewing 3 posts - 16 through 18 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".