How to create a multilevel list in HTML?

by 7 replies
7
multilevel list in HTML
#programming #create #html #list #multilevel
  • Use Google search engine for answer. You will find W3C school's website where they have all basic HTML tutorials
    • [1] reply
    • W3C Schools is definitely a great source, or you can choose a website, any really, and right click, hit inspect element and check out the coding of the page on the right of your browser window
  • I have no idea what you mean. An <ul> in an <ul>?
    You can also make multiple <ul>s and just give them a padding/margin-left so it looks like the one is on a different level.
  • Banned
    [DELETED]
  • Creating a multilevel list in HTML is harder than creating a multilevel list in a word processor, but can still be achieved using HTML and CSS. Below are steps on how to create a multilevel list in HTML with the aid of CSS.
    Before trying the following steps realize that to create a multilevel list in HTML you must nest the a list into another list item. Also, because HTML only has either a bullet list or number list if you want to change the type of list you must use CSS to create a new style type.
  • [DELETED]
  • [DELETED]
  • Creating actual multilevel lists in RoboHelp will always require you to edit in HTML mode if your topics need to be valid HTML. A list has one level on which it uses a sequence. Each new list within the list will use a different sequence. You can use this method if you use only global styles, list classes or list item styles. If you use list item styles, you cannot change the style of a nested list through the WYSIWYG editor.

    Another great advantage of real multilevel lists is that you can easily combine ordered lists and unordered lists.

    Remember the HTML syntax for a single unordered list:

    1
    2
    3
    4
    <ul>
    <li>Item one</li>
    <li>Item two</li>
    </ul>
    If we want to nest a list behind item one, we add a new list like this:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul>
    <li>Item one
    <ul>
    <li>Item one.one</li>
    <li>Item one.two</li>
    </ul>
    </li>
    <li>Item two</li>
    </ul>
    Item one
    Item one.one
    Item one.two
    Item two
    Note the correct syntax: The new list (ul) is added before the list item that contains the list is closed!

    You create a multilevel list by selecting the list and clicking the Increase indent (Increase indent) and Decrease indent (Decrease indent) buttons. Select the item you want to add to a different level and click the appropriate button. Please note that the list will display correct, but that the HTML of the list is invalid. (See above remark and syntax example.)

    One last remark: The standard margins of nested lists vary per browser. To avoid different rendering in different browsers, set a global style for nested lists in your style sheet, such as: UL UL, UL OL, OL OL and OL UL.
  • [DELETED]
  • Banned
    Learn to view/read page source code then copy/paste HTML formatting.
  • [DELETED]
  • Banned
    [DELETED]
  • [DELETED]
  • [DELETED]
  • [DELETED]
  • Banned
    [DELETED]

Next Topics on Trending Feed