Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ianhaney,
    Plenty of things to look at here...

    Since the text inside the li is enclosed in the anchor, maybe this would work better (you probably don't really want margin to fix this, and definitely not negative margin...
    padding: 10px 0 13px; instead?) -
    Code:
    #menu li.awards a {
    margin-top: -4%;
    }
    See specificity here.
    ..

    In your CSS you style a ul contained in #menu with this bit -
    Code:
    #menu ul {
    	padding: 0;
    	margin: 0;
    }
    You probably meant for that to be ul#menu instead.

    ...

    You set ul#menu to a height of 25px but the li's it contains are 50px high.
    Is that why you feel you need the negative margins?
    See the box model rule here.
    I would suggest looking further up the page, see what started out the need for negative margins in the first place and try fixing that problem before it cascades all the way through your whole layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Excavator

    I did the following as you said and worked perfect

    Code:
    #menu li.awards a
    and

    Code:
    padding: 10px 0 13px
    Thank you so much really appreciate it

    Kind regards

    Ian


  •  

    Posting Permissions

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