Help: CSS List and div

Discussion in 'CSS' started by irule272, Apr 17, 2009.

0
  1. #1
    Hello! I'm new in css and I need saome guidance. I'm trying to put a list inside a div but it always appear on the buttom of the div. I also wnt the list to be horizontal but I can't get it using display: inline;


    Here are the codes:

    CSS

    #MenuList{
    color: red;
    display: inline;
    font-weight: bolder;
    font-style: normal;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    }


    HTML

    <div id="Navbar">
    <ul id="MenuList">
    <li>Home</li>
    <li>Games Replay</li>
    <li>Download Games</li>
    <li>NBA Avatars</li>
    <li>NBA Photos</li>
    <li>NBA News</li>
    </ul>
    </div>


    Thanks in advance! :)
     
    irule272, Apr 17, 2009 IP
  2. revoD

    revoD Peon

    Messages:
    120
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try this:

    CSS

    #MenuList ul li{
    color: red;
    display: inline;
    font-weight: bolder;
    font-style: normal;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    }


    HTML

    <div id="MenuList">
    <ul>
    <li>Home</li>
    <li>Games Replay</li>
    <li>Download Games</li>
    <li>NBA Avatars</li>
    <li>NBA Photos</li>
    <li>NBA News</li>
    </ul>
    </div>
     
    revoD, Apr 17, 2009 IP
  3. irule272

    irule272 Well-Known Member

    Messages:
    1,153
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    155
    #3
    Thanks revoD working now!

    The problem now is I cant see the div element where I set a background color.. Seems like the div is behind the list do you know or anyone know how to solve this?

    Here's the css of the div.

    #Navbar{
    background-color: #485157;
    height: 22px;
    width: 850px;
    border: thin black solid;
    margin-top: 0px;
    float: none;
    }

    And here's the html on what I'm trying to put on that div

    <div id="NavBar">
    <div id="MenuList">
    <ul>
    <li>Home</li>
    <li>Games Replay</li>
    <li>Download Games</li>
    <li>NBA Avatars</li>
    <li>NBA Photos</li>
    <li>NBA News</li>
    </ul>
    </div>
    </div>

    Thanks again!
     
    irule272, Apr 17, 2009 IP
  4. irule272

    irule272 Well-Known Member

    Messages:
    1,153
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Its working now. The problem is the list is always on the bottom of the div, I tried to use margin and padding but I cant get it to work

    Here's the css code for the DIV

    #MenuList{
    background-color: #485157;
    height: 22px;
    width: 850px;
    border: thin black solid;
    margin-top: 0px;
    float: none;
    }

    CSS of the list

    #MenuList ul li{
    color: red;
    display: inline;
    font-weight: bolder;
    font-style: normal;
    list-style-type: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 4px;
    }


    HTML code of the list inside the div


    <div id="MenuList">
    <ul>
    <li>Home</li>
    <li>Games Replay</li>
    <li>Download Games</li>
    <li>NBA Avatars</li>
    <li>NBA Photos</li>
    <li>NBA News</li>
    </ul>
    </div>



    anyone?
     
    irule272, Apr 18, 2009 IP