Forums

kasunt

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,

    <li ><a class="clear-block" href="http://wordpress.local/archives/category/announcements" title="View all posts filed under Announcements">
     <span class="tt">Announcements <strong>(1)</strong></span>
     <span class="c1"></span>
    </a></li>
    <li ><a class="clear-block" href="http://wordpress.local/archives/category/c-sharp" title="View all posts filed under C#">
     <span class="tt">C# <strong>(1)</strong></span>
     <span class="c1"></span>
    </a></li>
    <li  class="extends"><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus" title="View all posts filed under C++">
     <span class="tt">C++ <strong>(1)</strong></span>
     <span class="c1"></span>
    </a>
       <ul class="sub-menu">
      <li ><a class="clear-block" href="http://wordpress.local/archives/category/c-plus-plus/multiplexing-io" title="View all posts filed under Multiplexing I/O">
     <span class="tt">Multiplexing I/O <strong>(1)</strong></span>
     <span class="c1"></span>
    </a></li>
       </ul>
    </li>

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;
    }

chester

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

kasunt

How do I do that ?

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

Paulie_D

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.

kasunt

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

Watson90

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

kasunt

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

Paulie_D

Nope...not getting that.

Watson90

Nope, I get this:

Paulie_D

Me too.

Watson90

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

kasunt

@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.

kasunt

@Watson90 That is correct. This is quite weird.

Watson90

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

kasunt

Sorry guys check the updated version: New link

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

Paulie_D

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

Paulie_D

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.

kasunt

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

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;
}

treehouse : what would you like to learn today?

Forums

Aligning sprite in List element