www.webdeveloper.com
Results 1 to 7 of 7

Thread: How to format a list ( <ul>, <li> ) using CSS.

  1. #1
    Join Date
    May 2007
    Posts
    30

    How to format a list ( <ul>, <li> ) using CSS.

    Hello;

    Can somebody tell me if the style sheet formatting for the list below is proper?

    I hobbled the CSS formatting for the list together using the information from this page:
    http://www.alistapart.com/articles/taminglists/

    The list does not have bullets (that's the way I want it to look). I am just wanting to make sure that it does not show bullets in some browsers.

    I can't see where the style sheet formatting below specifically omits the bullets. I would feel better about it if I could emphatically express in the CSS formatting that bullets are to be omitted.

    Do I need to somehow specifically state in the CSS formatting that bullets are to be omitted or is it ok the way it is?


    On the page it looks something like this:

    臺ak 膂aple 翠sh 與ine 膀ickory 舞edwood (this is how I want it to look)

    PHP Code:
    <style type="text/css">
    ul.inlineList
    {
    margin0px;
    }
    li.inlineList {
    border-stylenone;
    padding-left2px;
    padding-right0px;
    padding-bottom0px;
    displayinline;
    margin3px;
        }
    </
    style>



    <
    ul class="inlineList">
      <
    li class="inlineList">臺ak</li>
      <
    li class="inlineList">膂aple</li>
      <
    li class="inlineList">翠sh</li>
      <
    li class="inlineList">與ine</li>
      <
    li class="inlineList">膀ickory</li>
      <
    li class="inlineList">舞edwood</li>
    </
    ul
    Thanks.

  2. #2
    Join Date
    Jun 2007
    Posts
    48
    Use the property:
    list-style: none;

    That will ensure you dont have any bullets or anything else showing up in the list.

    For more details on styling the ul,li view:
    http://www.w3schools.com/css/css_list.asp

  3. #3
    Join Date
    May 2007
    Posts
    30
    thamba;

    Thanks. I appreciate the help.

  4. #4
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    additionally (since it looks misleading in your post), be sure to escape the right angle brackets in your li.
    <li class="inlineList">&raquo;Oak</li>

    also: (a question in a response) if you define a class for ul, do you need to redefine the same class for each li? or does that inherit from the parent ul?

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Just a quick note - to save yourself some typing, you don't have to declare a class for each <li> - as the <ul> is identified, you can reference the <li>s from this.
    Code:
    <style type="text/css">
    ul.inlineList {
    margin: 0px;
    }
    ul.inlineList li {
    border-style: none;
    padding-left: 2px;
    padding-right: 0px;
    padding-bottom: 0px;
    display: inline;
    margin: 3px;
    list-style: none;
    }
    </style>
    
    
    
    <ul class="inlineList">
      <li>&raquo;Oak</li>
      <li>&raquo;Maple</li>
      <li>&raquo;Ash</li>
      <li>&raquo;Pine</li>
      <li>&raquo;Hickory</li>
      <li>&raquo;Redwood</li>
    </ul>

  6. #6
    Join Date
    May 2007
    Posts
    30
    Thanks everyone for the help. I appreciate it.

  7. #7
    Join Date
    Sep 2006
    Posts
    208
    Or you can skip this altogether:

    Code:
    ul.inlineList {
    margin: 0px;
    }
    And do this:

    Code:
    .inlineList {
    margin: 0px;
    }
    No matter what your still selecting the element with the inlineList class attribute, so adding a "ul" in front of the ".inlineList" is pointless. Not that its going to make your page load faster, but if you do it a lot, the difference can be quite nice (I know because I used to write that way).

    Also, do you have a border specified somewhere else? Li's don't have borders, so unless your declaring it somewhere else you can get rid of it. It just bloats your code otherwise.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles