Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

This topic is empty.

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

Author

Posts
November 26, 2012 at 11:32 pm #41007

kasunt
Member

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)
- Multiplexing I/O (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 #115560

Chester

Participant

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 #115569

kasunt

Member

How do I do that ?

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

November 27, 2012 at 5:05 am #115578

Paulie_D

Member

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 #115646

kasunt

Member

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 #115649

Watson90

Member

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

November 27, 2012 at 2:38 pm #115653

kasunt

Member

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

November 27, 2012 at 2:45 pm #115655

Paulie_D

Member

Nope…not getting that.

November 27, 2012 at 2:46 pm #115656

Watson90

Member

Nope, I get this:

November 27, 2012 at 2:46 pm #115657

Paulie_D

Member

Me too.

November 27, 2012 at 2:48 pm #115658

Watson90

Member

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 #115659

kasunt

Member

@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 #115660

kasunt

Member

@Watson90 That is correct. This is quite weird.

November 27, 2012 at 2:53 pm #115661

Watson90

Member

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

November 27, 2012 at 2:59 pm #115662

kasunt

Member

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