SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover BG img not lining up

    Hello,

    relatively proficient in css but not getting this:

    I have a simple horiz menu that has a rollover image and a font color change. However my text is not in the middle of the bar, so when I give the list any padding or margin, it of course wants to push my hover image down as well. I know I am just missing something simple but my mind is ready to explode looking at this thing for another minute...

    I'll take any help and even a little abuse to get this silly thing working...

    Here's a link to the site that is under construction and the code for the section
    http://www.wealthbuildingsystems.com/

    #topbar {
    background:url(http://www.wealthbuildingsystems.com.../menu-bar2.png) no-repeat;
    height:54px;
    width:100%;
    margin: 0px 0px 0px 22px;
    padding:0px;
    }

    #topbar ul {
    float: left;
    width:;
    height:56px;
    margin: 10px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    list-style-type: none;
    background:;
    }

    #topbar li {
    float: left;
    font: 16px Arial, Georgia, 'Times New Roman', Times, serif;
    color:#fff;
    margin: 0px 0px 0px 0px;
    float: left;
    display: inline;
    height:;
    width:120px;
    background:;
    }

    #topbar a {
    font: 16px Arial, Georgia, 'Times New Roman', Times, serif;
    float: left;
    display: block;
    height:56px;
    width:120px;
    margin:0px 0px 0px 0px;
    color: #fff;
    text-align:center;
    }

    #topbar a:hover {
    font: 16px Arial, Georgia, 'Times New Roman', Times, serif;
    float: left;
    display:block;
    height:;
    width:120px;
    margin:0px 0px 0px 0px;
    color: #ff6600;
    text-align:center;
    background:url(http://www.wealthbuildingsystems.com...11/btn-hvr.png) no-repeat center center;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For non-wrapping text just set the line-height to the same as the height and the text will automatically be centred.

    Don't duplicate your hover styles, just apply the differences.

    e.g.
    Code:
    #topbar a {
        font: 16px Arial, Georgia, 'Times New Roman', Times, serif;
        float: left;
        height:56px;
         line-height:56px;
        width:120px;
        margin:0;
        color: #fff;
        text-align:center;
    }
    
    #topbar a:hover {
        color: #ff6600;
        background:url(http://www.wealthbuildingsystems.com/wp-content/uploads/2010/11/btn-hvr.png) no-repeat center center;
    }
    Avoid swapping a new image on hover as that is too slow. You could have added the over state to the other image as well and the just swapped the background position to show it without incurring a delay.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul! It's this sort of assistance that keeps my faith in humanity alive...

    Seriously though...you nailed it and I appreciate your help...here's wishing you the best


Bookmarks

Posting Permissions

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