SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to style submenu text?!

    I can't get padding on my submenu, I can't get the text to vertical align to the middle for the life of me either. I figured if I could set a background and font color then why wouldn't padding or valign work either?

    The only thing I can think of is maybe there is something overriding it possibly? Not sure.

    Here is the link: Hover over Polysonmogrpahy

    http://www.designingyours.com/KMMED/

    thanks guys

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since your <li>s are fixed 30px height, you could try and set line-height: 30px; for the <a>s inside. That's for valign.

    As for padding, the selector
    Code CSS:
    #nav li, #nav a {
    display: block;
    height: 30px;
    margin: 0px;
    padding: 0px;
    }
    has more weight (it has an id selector) than the selector
    Code CSS:
    .sub li a {
    border-bottom: 1px solid white;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    margin: 10px;
    padding-left: 10px;
    text-decoration: none;
    vertical-align: middle;
    width: 150px;
    }
    nullifying your padding.

    You could change it to
    Code CSS:
    #nav .sub li a {
    border-bottom: 1px solid white;
    color: white;
    font-family: Arial;
    font-size: 10pt;
    margin: 10px;
    padding-left: 10px;
    text-decoration: none;
    vertical-align: middle;
    width: 150px;
    }

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see.

    Yeah I'm not very keen on what takes precendence over what in CSS, that's interesting though. I'm still a beginner!


    If I remove the fixed height, couldn't I use padding or margin to make the links taller?

    Also are you saying v-align doesnt work with a fixed height? If so that's pretty dumb.


    Thanks for the help

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I could also change .sub to #sub so I wouldn't have that problem with the padding too.

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gave you a fast solution.

    Yes, you could use padding to make links taller.

    vlign does work with fixed height.

    You're welcome

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bades View Post
    If I remove the fixed height, couldn't I use padding or margin to make the links taller?
    Hi,
    I would suggest that you remove the heights and any large line-heights on the sub li a, it causes to many problems when text needs to wrap. That can be from you needing a long string of text or the user increasing font-size.

    I added the words "Wrapping Text" to the third sub li so you can see what the fixed height does. It' better to use padding on the sub a like you mentioned.




    If you look at This Example you will see how text will wrap nicely without heights and large line-heights on the sub li.
    The padding is also what keeps the text looking vertically centered.



    Also are you saying v-align doesnt work with a fixed height? If so that's pretty dumb.
    Vertical-align only applies to inline elements and tables, it has no effect on blocks/floats.

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bades View Post
    I guess I could also change .sub to #sub so I wouldn't have that problem with the padding too.
    You could, but then, you're probably making a mistake:
    • .sub, a class, it's suppose to be used on more than one element. Like in "more than one submenu". Which is normal.
    • #sub means that there is just one element having this ID on that page. Like in just one submenu. Which is unrealistic.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi,
    I would suggest that you remove the heights and any large line-heights on the sub li a, it causes to many problems when text needs to wrap.
    The only height I have set is

    #nav li, #nav a{
    display: block;
    height: 30px;
    padding: 0; margin: 0;
    }

    If I remove that height, my hovers don't even work let alone the drop down.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The only height I have set is...
    Yeah but that height you have set on #nav a is targeting all the anchors, it gets inherited by the sub li a.

    You would need to reset those to auto so your height stays on the first level anchors.

    Code:
    #nav li li a { /*sub list anchors*/
    height:auto;
    padding: 6px 0; /*pad top and bottom for vertical spacing*/
    line-height:normal;
    }

  10. #10
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool that worked.

    One more thing, the drop down menu is suppose to slide back up, I had a working version of it using just text, but i didn't know if it wasn't working correctly because I'm using a sprite?

    The JS is the drop.js file

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the drop down menu is suppose to slide back up
    Yes it is acting buggy, if you drag your cursor down the "y" in "Polysonmogrpahy" you can see the sub list trying to slide back up.

    This may have something to do with you on applying the sub UL styles on hover. The hover should just be controlling the hide and show effects, not presenting the initial rules.
    Code:
    /* Make submenu not appear until hover is initiated */
    .sub{margin-left: -9999em;}
    
    /* This is how the submenu <ul> will be displayed */
    #nav li:hover ul{
        display:block;
        position:absolute;
        background-color:#c01515;
        margin:0;
    }


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
  •