Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Hi
    I have an unordered list with 4 links in, displayed inline.
    On hover, I want a link to display a little logo to the left of the link.
    I have tried several things, but cant get the link to display, it hides away to the left, sort of covered up.

    This is my CSS:
    .links {height: 40px; line-height: 30px;}
    .links li {display: inline; padding: 25px; text-align: center; font-size: 12px; width: 50px;}
    .links a:hover {width: 50px; background-image:url(images/link.gif); background-repeat: no-repeat; background-position: -10px;}

    links is the class to the UL

    Thanks

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    .links li a {height: (x); line-height: (x);} See if that works.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    I'm afraid that didn't sort it, and I think its something to do with the width too.
    So my html:
    <div class="nav">
    <ul class="links">
    <li><a href="" title="">Page 1</a></li>
    <li><a href="" title="">Page 2</a></li>
    <li><a href="" title="">Page 3</a></li>
    <li><a href="" title="">Page 4</a></li>
    </ul>
    </div>
    and my css at present:
    .nav {float: right; margin: 130px 150px 0 0;}
    .links {height: 40px; line-height: 30px;}
    .links li {display: inline; padding: 25px; text-align: center; font-size: 12px; width: 50px;}
    .links li a {height: 30px; line-height: 30px;}
    .links a:hover {width: 50px; background-image:url(images/link.gif); background-repeat: no-repeat; background-position: -10px;}

    So I just have the word "page 1" and when hovered over, i want link.gif to display to the left of the word.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Can you show us the actual web page (give us a link to see it).
    No way for us to test this ... we don't have the images nor the rest of your files.


  6. #5
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Sorry Max, it's not live at the mo, just having a few probs with my hosting.

    Have uploaded the files here.

  7. #6
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Sorry to hassle but this is getting on my nerves.
    All i am trying to achieve is to have a little icon appear to the left of a link on hover, and im sure the answer is staring me straight in the face but cant get it to work, the icon appears behind the word, not to the left of, and background-position alone does not solve it.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Here is my test page:

    http://www.catpin.com/hubbard

    Changes to the .css file

    Because your links will have different numbers of characters,
    you'll have to customize the width of each one. That is done
    on the index page using inline-css.

    I deliberately made the links with different words to show the
    differences in widths ... but keeping the spacing the same.

    The key changes:
    1) Use "inline-block" instead of "inline". You can't affect width of "inline" by itself.
    2) Hover over the <li> not the <a>.
    3) Define custom widths for each <li> via inline-css on the index page.


  9. #8
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Hi Max
    Thanks for the above, it works great and you can see the end result here: www.protype-uk.com/hhcc
    Now, i'm sure you are aware that li:hover isn't supported by soem versions of IE so although it seems to work on IE8, it doesnt on IE9, and i also had trouble with the display: inline-block but there seemed to be fixes for that ie. zoom: 1; *display: inline, _height: 30px; etc

    I have to a horizontal drop down menu for another site now and want to use an li:hover effect similar to this, not with a background image but just with colour changes, what would you recommend to have this working in all browsers?
    Thanks, Adrian

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Add float: left; to .navlinks li. Then you can use display: block on your anchors and you're set in this particular case because you're defining set widths for your list items.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I guess if I were doing it, I would keep it as simple as possible.
    Only hover on <a> and do a simple background/font color changes.
    The graphic change on hover really doesn't add anything to your site.
    Nobody really cares about things like that.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com