Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    Need CSS Help with a hover element

    Hi there,
    Need some CSS guru help. If you visit my link:

    http://www.gabbr.com/js/viewer/cmedata/index1.html

    and hover over the years (top middles, 2008, 2009, 2010, etc) you will notice an orange bar extending from the top to the bottom of the page. I am trying to get the same effect on the left (month and day) but am unable to do so.

    The problem I am having is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing.

    Any advice?

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    A Doctype might help.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Bobafart (05-30-2010)

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    Apologies. Doctype is now present.

    Advice please?

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Something like this seems to work (additions are bolded):

    #dayleft ul li a:hover {
    position: absolute;
    padding-left: 85px;
    left: -80px;

    display: block;
    color: #000;
    z-index: 3;
    background: #EBBD2B;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    width: 100%;
    right: 0;
    height: 30px;
    }
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •