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

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13

    CSS li element to single li in menu


    Hi

    I got the following html ul li list

    Code:
    <ul id='menu'>
    <li><a href='index.php'>HOME</a></li>
    <li><a href='about_us.php'>ABOUT US</a></li>
    <li><a href='#'>NEWBORN</a></li>
    <li><a href='#'>0-1 YEAR</a></li>
    <li><a href='#'>3-5 YEARS</a></li>
    <li><a href='#'>6-10 YEARS</a></li>
    <li><a href='#'>AWARDS & PRESS</a></li>
    <li><a href='contact_us.php'>CONTACT US</a></li>
    </ul>
    The css is below

    Code:
    /*DROPDOWN FUNCTIONALITY*/
    /*set up ul tags*/ 
    #menu {
    width: 800px;
    margin-left: 45px;
    margin-top: -4.3%;
    color: #c28383;
    background-color: #fffdf3;
    font-size: 12px;
    }
    
    #menu ul{ padding:0; margin: 0;}
    /*set up a tags*/ 
    #menu a{display:block; color: #c28383; border: 1px #c28383 solid; height: 25px;}
    /*position level 1 links horizontally*/ 
    #menu li{display:block; float:left; width: 100px; text-align: center;}
    /*undo previous style for level 2 links*/
    #menu li ul li{float:none; margin-left: 0.5px;}
    /*position level 2 links vertically and hide*/ 
    #menu li ul{display:none; position:absolute; z-index:1}
    /*unhide level 2 links on li:hover from level 1*/ 
    #menu li:hover ul{display:block;}
    
    /*DROPDOWN STYLING:*/
    #menu{height:25px;}
    #menu a{color:#c28383; padding:18px 10px 5px 10px; text-decoration: none;}
    #menu a:hover{color:#c28383;}
    #menu li{background-color:#fffdf3; border-bottom:solid 0px #CCC;  margin-left:-1px;}
    #menu li:hover{background-color:#F0F0F0;}
    I am struggling to add a class to one of the li elements

    I thought it would be the following

    Code:
    <li class='awards'><a href='#'>AWARDS & PRESS</a></li>
    and the CSS for it below

    Code:
    #menu li.awards {
    margin-top: -4%;
    }
    But all that does is move the whole box and all I want is to just move the text inside the box

    Please help as is doing my head in with it
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    1) I believe you need to use dbl quotes " " instead of single quotes ' ' in html. [not 100% on that one.

    2) have you tried applying your margin-top property to #menu li.awards a instead? [since you are wanting to apply it to the text directly]
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by DonR
    1) I believe you need to use dbl quotes " " instead of single quotes ' ' in html. [not 100% on that one.
    Single quotes are fine.

    Comments on this post

    • DonR agrees : thanks
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    106
    Rep Power
    4
    It seems that you wish to only effect one element.
    So why don't you use an ID and simplify like this:

    Code:
    <li id='awards'><a href='#'>AWARDS & PRESS</a></li>
    and the CSS for it below

    Code:
    #awards {
    margin-top: -4%;
    }

    Comments on this post

    • DonR disagrees : what makes you think changing from CLASS to ID would change the outcome in this case? you are still applying it to the LI item which the OP said changed the whole box, not, the text inside the box.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13
    Hi DonR

    Thank you for your reply, I tried #menu li.awards a and it just moves the whole box up and not just the text

    Hi richpri

    Thank you for the reply

    I tried your way and again it just moves the whole box up and not just the text
  10. #6
  11. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    106
    Rep Power
    4
    Then try using vertical-align: top; or vertical-align: 4%; in place of margin-top: -4%;. Apply it to the a element. A positive % will move the text up that % of the a element height.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    156
    Rep Power
    13
    Hi richpri

    I think it is ok now

    I did it this way and seems to of worked

    Code:
    #menu li.awards a {
    padding: 10px 0 13px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo