#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    19
    Rep Power
    0

    Need help lining up text and a link button in a horontal menu


    On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
    Code:
    .homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}
    
    .homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}
    
    .homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}
    
    .homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}
    
    .homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}

    Thank you
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    There are a few different things you could do. The easiest would be to change your line-height on .homepage-sub-menu ul li a:link,a:visited to the height of the image, 36px.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    This should help.
    Code:
    .homepage-sub-menu img {vertical-align:middle;}
    By the way, giving "vertical-align:middle" to a floated element (".homepage-sub-menu ul li") won't have any affect.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo