Html for nested list, mixed number and bullet points - html

I need to come as close to the example below, using only html. I can get the top level numbered list and the next level of bullet points, but can't figure out how to get the most-indented level of bullet points.
If it can be done, please tell or point me to correct syntax. Thanks!
I've had to use "_"s to get the formatting to look right in the preview.
Top level point
_• A subsidiary point
___• Sub point
_• Next subsid. point
Next top level point

if I understood your question, I think this is what you are looking for: jsfiddle
<ol>
<li>List item one</li>
<ul>
<li>Subitem 1</li>
<ul>
<li>Sub-Subitem 1</li>
</ul>
<li>Subitem 2</li>
</ul>
<li>List item two with subitems:</li>
</ol>

I guess this may help
<ol>
<li>Outer 1
<ul type="disc">
<li>Inner 1
<ul type="disc">
<li>Sub Inner 1 </li>
</ul>
</li>
<li>Inner 2</li>
</ul>
</li>
<li>Outer 2</li>
</ol>

try this
<ol>
<li>item 1</li>
<li>item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3
<ul>
<li>sub-Subitem 1</li>
<li>sub-Subitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>

<ol>
<li>
Top level point
<ul style="list-style: disc;">
<li>
A subsidiary point
<ul style="list-style: disc;">
<li>Sub point</li>
</ul>
</li>
<li>Next subsid. point</li>
</ul>
</li>
<li>Next top level point</li>
How's this? Should be exactly what you described.
http://jsfiddle.net/hqtj1cvL/7/

Is this what you looking for??
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<ul>
<li>one</li>
<li>two</li>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<li>three</li>
</ul>
<li>four</li>
</ol>

Related

Submenus with different styling Css

I'm stuck.
I want to change the background in submenu-third through :nth-child. Because I want that the only first 2 block(:nth-child(-n+2)) have background:blue, but I become that all .submenu-third have background:blue.
How do I add styles for only the first two blocks?
<nav>
<ul class="topmenu">
<li>
home
<ul class="submenu">
<li>menu second level 1</li>
<li>menu second level 2
<ul class="submenu-third">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</li>
<li>menu second level 3</li>
<li>menu second level 4</li>
<li>menu second level 5
<ul class="submenu-third">
<li> 5 third level</li>
<li> 5 third level</li>
<li> 5 third level</li>
</ul>
</li>
<li>menu second level 6</li>
<li>menu second level 7</li>
<li>menu second level 8
<ul class="submenu-third">
<li>8menu the third level</li>
<li>8menu the third level</li>
<li>8menu the third level</li>
</ul>
</li>
<li>menu second level 9</li>
<li>menu second level 10
<ul class="submenu-third">
<li>10menu the third level</li>
<li>10menu the third level</li>
<li>10menu the third level</li>
</ul>
</li>
</ul>
</li>
<li>company</li>
<li>company</li>
<li>company</li>
</ul>
</nav>
.submenu-third:nth-child(-n+2){background: blue;}
.submenu li a:nth-child(2n){color: red;}
you can add class to the first Element using javascript and asign css style to it.
document.querySelector(".submenu-third").classList.add("secondClass");
.secondClass li:nth-of-type(-n+2){background-color: blue;}
<nav>
<ul class="topmenu">
<li>
home
<ul class="submenu">
<li>menu second level 1</li>
<li>menu second level 2
<ul class="submenu-third">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
</li>
<li>menu second level 3</li>
<li>menu second level 4</li>
<li>menu second level 5
<ul class="submenu-third">
<li> 5 third level</li>
<li> 5 third level</li>
<li> 5 third level</li>
</ul>
</li>
<li>menu second level 6</li>
<li>menu second level 7</li>
<li>menu second level 8
<ul class="submenu-third">
<li>8menu the third level</li>
<li>8menu the third level</li>
<li>8menu the third level</li>
</ul>
</li>
<li>menu second level 9</li>
<li>menu second level 10
<ul class="submenu-third">
<li>10menu the third level</li>
<li>10menu the third level</li>
<li>10menu the third level</li>
</ul>
</li>
</ul>
</li>
<li>company</li>
<li>company</li>
<li>company</li>
</ul>
</nav>

How to display half of the text of a <li> element in a new line [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
<html>
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
</html>
Here, in the above code, how can I display half the text in the <li> tag in next line?
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li>Here how can i make this li to <br/> display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
Just add the <br/> tag where you want the next line to start.
Also if you want to do it using only css just make width:50% in the styling.
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<ul>
<li style="width:50%;">Here how can i make this li to display half contents in new line</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</li>
</ul>
This is a beginner level question, an <ul>'s <li> is a block element, unless you assign a width to the parent or the <ul> itself - text won't wrap! FYR, I just assign width to parent <ul>, you can assign a width to the child <ul>, too:
ul {
width: 200px;
}
Here is a fiddle example
I hope this helps!

How to get adapted width for inline-table of nested lists?

This is how I'm displaying a nested list jsFiddle. As you can see the 'columns' are not aligned correctly as the content has different length. The elements - as example - should be at the right border.
Is it possible to get the width of each 'column' in a relative or fixed size? The complete list should have a 100% width.
Visibly I want to get this: https://jsfiddle.net/bsrms9ax/2/
ul {
display: inline-table;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
<li>Longer Main Title
<ul>
<li>Long Title 1
<ul>
<li>Element 1</li>
<li>Elem 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
I edited the code from Display nested list like a table , also a post by you.
If this is not you want, i will do as much i can to modify it and make it work.
// ADD SOME CODE
// www.Agary.info Agario server ;-)
// BEST LUCK IN YOUR CODE BRO
body>ul {
display:table;
}
li {
display: flex;
display: -webkit-inline-flex;
border: 1px solid #000;
padding: 0px;
list-style: none;
}
<html>
<!-- Added some css..-->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
</head>
<body>
<ul>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
<li>
</li>
<li>Main Title
<ul>
<li>Title 1
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</li>
<li>Title 2
<ul>
<li>Element 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
EDIT: I see that this is not what you want, but maybe will be useful for any other user. I will try to modify it :)

How to align something inside an <a>?

I have a very good menu right here:
http://jsfiddle.net/y9jbQ/
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
the problem is now, let's say I want a right-arrow image, aligned to right in case when there's an other sub menu. Putting inside isn't healthy thing. I don't want to create anything to copy 's behaviour. So,
<li><div float left><div float right></li>
is not a good way.
Use a CSS Child Selector:
ul.root > li > a { /* css declarations */ }
This will only apply the rules to the direct descendants of the root ul element.
Illustration:
<ul class="root">
<li>
<!-- MATCH -->
</li>
<li>
<!-- MATCH -->
<ul>
<li>
<!-- NO MATCH -->
</li>
</ul>
</li>
</ul>

Unordered list in HTML5 with a list/group name

How would you create an unordered list of items in HTML5 with a group name at the top? The items should look indented.
Ex:
GroupName1
Item1
Item2
Item3
GroupName2
Item4
Item5
Why not just do a list within a list?
<ul>
<li>
Group 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
Group 2
<ul>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
I reckon scurker’s answer is the way to go, but if your groups were really separate from each other, and thus didn’t really make sense in one big list, you could do this:
<section>
<h1>GroupName1</h1>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</section>
<section>
<h1>GroupName2</h1>
<ul>
<li>Item4</li>
<li>Item5</li>
</ul>
</section>