Simple CSS Fix

Discussion in 'HTML & Website Design' started by schwarzes, Nov 23, 2010.

  1. #1
    Hello,

    why is the text of the menu under the header going below the line...like..community...etc..

    If you look at destination articles, the word articles goes way down. I want both of them to appear within the blue box, when you hover over the menu.

    If I remove the width, then the blue box will extend horizontally.

    Can anyone help.

    Here is the URL ...

    http://bit.ly/fpj4mj

    Thanks in advance.
     
    schwarzes, Nov 23, 2010 IP
  2. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Remove

    
    line-height:34px;
    
    Code (markup):
    from #nav .sf-menu

    and add

    
    height:60px;
    
    Code (markup):
    to .sf-menu li
     
    CSM, Nov 23, 2010 IP
  3. salmanshafiq

    salmanshafiq Well-Known Member

    Messages:
    260
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    128
    #3
    Please Use Below code :

    #nav .sf-menu a  { display: block; white-space: nowrap; text-decoration: none; padding: 8px 12px 11px; color: #000; font-size: 14px; font-weight:bold; }
    Code (markup):
    Instead :

    #nav .sf-menu a  { display: block; text-decoration: none; padding: 8px 12px 11px; color: #000; font-size: 14px; font-weight:bold; }
    Code (markup):
     
    salmanshafiq, Nov 23, 2010 IP
  4. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #4
    white-space: nowrap; is not needed.

    If you use white-space:nowrap; the following will happen (check picture)

    www_homeshopcentral_com.jpg
     
    CSM, Nov 23, 2010 IP