Help me to understand <ul> and <li>...

Discussion in 'CSS' started by Darwyn, Dec 22, 2009.

0
  1. #1
    Hi there, this is my first post...I'm hoping someone can help me.

    I recently took up CSS and have been reading a lot, going through tutorials etc...but I'm still having a problem understanding how to style unordered lists as a menu.

    You can view my test environment here: http://www.jomar.com/test/menu_test.html

    I'm trying to make the buttons fill with white when hovering...but all I get highlighted is the height of the font.

    Here's my CSS and HTML

    <style>

    #menus {
    background-color:#CCCCCC;
    width:200px;
    padding:5px;
    }

    #menus ul{
    display:block;
    list-style:none;
    text-align:left;
    margin:0;
    padding:0;
    width:100%;
    }


    #menus li {
    border-bottom:1px solid #666666;
    margin:0 0 10px 0;
    background-color:tan;
    padding:10px;
    }


    #menus li a {
    display:block;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    }

    #menus a:hover {
    background-color:white;
    }


    </style>

    <body>
    <div id="menus">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Tech Corner</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Documentation</a></li>
    </ul>
    </div>

    </body>
    </html>


    I guess what I don't quite understand is the heirarchy of divs and lists and what to place where. I realize the div is the container, but when it comes to assigning classes to lists, I get lost. My #menu div seems to be handling most of the styling of the list without having to call a class.

    When is it appropriate to assign the list a class?
     
    Darwyn, Dec 22, 2009 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you want a white background on the button when they are hovered over? I am not sure what you are asking because they are already white. Currently when you hover there is a brown background. What are you ideally looking for?
     
    LeetPCUser, Dec 22, 2009 IP
  3. Darwyn

    Darwyn Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I've been messing around with it trying to get it to work since I posted it...the color doesn't matter. What matters is that the rollover color change fills up the entire box rather than just the height of the font.
     
    Darwyn, Dec 22, 2009 IP
  4. Darwyn

    Darwyn Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Got it!

    the key was here, in this class:

    .list li:hover {
    display:block;
    background-color:tan;
    padding:10px;
    }

    which was changed from .list li a:hover
     
    Darwyn, Dec 22, 2009 IP
  5. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yep. What that does is sets it for the entire list item rather than the link.
     
    LeetPCUser, Dec 22, 2009 IP
  6. Darwyn

    Darwyn Peon

    Messages:
    34
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    cool...but as a follow up question, what if I wanted to make each hover attribute a different color. Would I have multiple .list li:hover { } tags?

    In other words, would I assign each <li> a class

    <li class ="home">
    <li class ="contact">
    <li class ="products">

    and then call it from css with:

    .home li:hover {}
    .contact li:hover {}
    .products li:hover{}

    etc...
     
    Darwyn, Dec 22, 2009 IP