Grow your CSS skills. Land your dream job.

Aligning sprite in List element

  • # November 26, 2012 at 11:32 pm

    I have this list menu and I want to display arrows for each of the items so when you hover over the item the arrow changes the color. So far my problem seems to be aligning this arrow vertically centered compared to the text. As you can see from the screenshot it is slightly off. Ignore the missing space between the arrow and the hyperlink.

    http://i.imgur.com/2XCHZ.png

    HTML,


  • Announcements (1)


  • C# (1)


  • C++ (1)

  • CSS,

    .block ul.menu, .block ul.menu ul, .block ul.menu li, .block .box, .block .box .entry{
    margin:0;
    padding:0;
    list-style-type:none;
    line-height: normal;
    }

    .block ul.menu li, .block ul.box .entry{
    border-bottom:1px dotted #aaa;
    border-top:1px dotted #fff;
    }

    /* no border on 1st list item */
    .block ul.menu li.first,
    .block ul.menu li:first-child,
    .block ul.box .entry.first,
    .block ul.box .entry:first-child{border-top:0 !important;}

    .block ul.menu li.last,
    .block ul.menu li:last-child,
    .block ul.box .entry.last,
    .block ul.box .entry:last-child{border-bottom:0 !important;}

    .block ul.menu li .expand{display: none;}

    .block ul.menu li, .block ul.box .entry {
    position: relative;
    z-index: 5;
    }

    .block ul.menu li a {
    background:transparent url(../images/icons_old.png) no-repeat 4px -816px;
    }

    /* titles */
    .block ul.menu .tt {
    display:block;
    }

    .block ul.menu a:hover .tt{
    text-decoration:underline;
    }

    /* content – primary */
    .block ul.menu .c1{
    display:block;
    line-height: 150%;
    color:#333;
    text-decoration:none;
    }

    /* information block (left side) */
    .block ul.menu .base {
    overflow:hidden;
    display:block;
    }

# November 26, 2012 at 11:46 pm

Have you tried repositioning your sprite’s coordinates?
And I think it is better to use the ::before pseudo selector on your ‘a’ tag.

# November 27, 2012 at 12:38 am

How do I do that ?

Ive uploaded the code to fiddle -> http://jsfiddle.net/7xbse/

# November 27, 2012 at 5:05 am

I’m not seeing an arrow at all on each list item in the image you linked.

The fiddle you linked also doesn’t seem to have any arrows either, at least they aren’t showing up.

# November 27, 2012 at 2:09 pm

They do show up. Its very light grey though. Perhaps why you didnt see it in the first place.

# November 27, 2012 at 2:22 pm

Your sprite doesn’t seem to be loading properly in jsfiddle @kasunt

# November 27, 2012 at 2:38 pm

@Watson90 Should see the following. Im seeing the arrows and mouse over fading working.

# November 27, 2012 at 2:45 pm

Nope…not getting that.

# November 27, 2012 at 2:46 pm

Nope, I get this:

# November 27, 2012 at 2:46 pm

Me too.

# November 27, 2012 at 2:48 pm

It’s weird because your actual sprite used in your CSS on your JS Fiddle is linking to imgur. Is that correct?

# November 27, 2012 at 2:49 pm

@Paulie_D Cleared my cache and tried it again and im still seeing the sprite. However, I am using chrome. Which browser are you using ? Have not tested the code on other browsers yet.

# November 27, 2012 at 2:50 pm

@Watson90 That is correct. This is quite weird.

# November 27, 2012 at 2:53 pm

I’ve tested in IE10, Chrome, Firefox, Opera and Safari and it still looks the same…

# November 27, 2012 at 2:59 pm

Sorry guys check the updated version: [New link](http://jsfiddle.net/7xbse/3/ “http://jsfiddle.net/7xbse/3/”)

It may have been something to do with the uploaded images not linking to an account.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

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