Html nested list. Decimal list only prints number 1 - html

How can I make the decimal list to go from 1 to 2 on the below code. Can't figure it out, maybe i did something wrong with the tags. Please check code below. The result only prints number 1
div {
background-color: white;
width: 300px;
border: 2px solid red;
padding: 20px;
margin: 10px;
}
ul.a {list-style-type: disc;}
ol.f {list-style-type: decimal;}
ol.u {list-style-type: upper-roman;}
ol.t {list-style-type: upper-latin;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
<div>
<font size="6"
face="arial"
color="light blue">
Aircraft Types
</font>
<ul class="a">
<li>General Aviation (piston-driven engines)</li>
<ol class="f">
<li>Single-Engine Aircraft</li>
</ol>
<ul>
<ol class="u">
<li>Tail wheel</li>
<li>Tricycle</li>
</ol>
</ul>
<ol class="f">
<li>Dual-Engine Aircraft</li>
</ol>
<ul>
<ol class="t">
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
<ul>
</ul>
</ul>
</ul>
<ul class="a">
<li>Commercial Aviation (jet engines)</li>
<ol class="f">
<li>Dual Engine</li>
</ol>
<ul>
<ol class="p">
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
</ul>
<ol class="f">
<li>Tri-Engine</li>
</ol>
<ul>
<ol class="q">
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</ul>
</ul>
</div>
I tried moving out the tags but I can't figure it out. I want to make the decimal numbers go in ascending order. My code only shows 1 for them


Please find below the corrected code with the expected result:
div {
background-color: white;
width: 300px;
border: 2px solid red;
padding: 20px;
margin: 10px;
}
ul.a {
list-style-type: disc;
}
ol.f {
list-style-type: decimal;
}
ol.u {
list-style-type: upper-roman;
}
ol.t {
list-style-type: upper-latin;
}
ol.p {
list-style-type: lower-latin;
}
ol.q {
list-style-type: lower-roman;
}
<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div>
<font size="6" face="arial" color="light blue">
Aircraft Types
</font>
<ul class="a">
<li>General Aviation (piston-driven engines)</li>
<ol>
<li>Single-Engine Aircraft</li>
<ol class="u">
<li>Tail wheel</li>
<li>Tricycle</li>
</ol>
<li>Dual-Engine Aircraft</li>
<ol class="t">
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
</ol>
</ul>
<ul class="a">
<li>Commercial Aviation (jet engines)</li>
<ol>
<li>Dual Engine</li>
<ol class="p">
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
<li>Tri-Engine</li>
<ol class="q">
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</ol>
</ul>
</div>
</body>

Related

How do I make different types of ol horizontally in one line?

I have to make all 5 types of ordered list in one line like whats shown in the picture here
<h2> Types of Ordered list</h2>
<ol Type="1">
<li>Black & Blue</li>
<li>The man from Toronto</li>
<li>Central Intelligence</li>
</ol>
<ol Type="a">
<li>September</li>
<li>October</li>
<li>November</li>
</ol>
<ol Type="A">
<li>Black</li>
<li>Red</li>
<li>Purple</li>
</ol>
<ol Type="i">
<li>Winter</li>
<li>Fall</li>
<li>Spring</li>
</ol>
<ol Type="I">
<li>Apple</li>
<li>Orange</li>
<li>Watermelon</li>
</ol>
ol, li{
list-style-position: inside;
color:whitesmoke;
font-size: 16px;
padding: 10px 5px 10px 5px;
}
If anyone have any idea on how to fix it please help me and thanks

All list elements can be wrapped in a single div, then aligned center using justify-content with the display set to flex.
.lists{
display: flex;
justify-content: center;
}
<h2> Types of Ordered list</h2>
<div class='lists'>
<ol Type="1">
<li>Black & Blue</li>
<li>The man from Toronto</li>
<li>Central Intelligence</li>
</ol>
<ol Type="a">
<li>September</li>
<li>October</li>
<li>November</li>
</ol>
<ol Type="A">
<li>Black</li>
<li>Red</li>
<li>Purple</li>
</ol>
<ol Type="i">
<li>Winter</li>
<li>Fall</li>
<li>Spring</li>
</ol>
<ol Type="I">
<li>Apple</li>
<li>Orange</li>
<li>Watermelon</li>
</ol>
</div>

Element ol is not allowed here (HTML)- Not sure what's going on

Admittedly, I'm new to coding so I'm sure there may be many issues in my code. The errors that are showing up right now are all " Element ol is not allowed here." If someone can please help me resolve this, it would be greatly appreciated, thank you. My code is listed below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paula's Lists</title>
<link rel="stylesheet" href="lists.css">
<style>
.instagramlogo{
position: absolute;
width: 50px;
left: 20px;
top: 20px;
cursor: pointer;
}
.linkedinlogo{
position: absolute;
width: 50px;
left: 100px;
top: 20px;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.column1 {
margin-top: 40px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column2{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column3{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column4{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column5{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
hr{
position: center;
margin-top: 10px;
border-color: #009688;
width: 40%;
margin-left: 31.5%;
}
</style>
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="images/pngfind.com-instagram-png-22629.png" alt="Instagram logo" class="instagramlogo">
<img src="images/pngfind.com-linkedin-png-533561.png" alt="Linkedin logo" class="linkedinlogo">
<ul>
<li>Home</li>
<li>Resume</li>
<li>Lists</li>
<li>Contact</li>
</ul>
</div>
<h1>Paula's Lists</h1>
<span>Get to know me better with the following lists which showcase my perspectives on tech-related concepts!</span>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<h3>Programming Languages I'd Like to Learn</h3>
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
</div>
<hr>
<div class="column2" style="background-color:#bbb;">
<h3>Career Aspirations</h3>
<ul style="list-style-type:disc;">
<li>Software Engineer</li>
</ul>
<ul style="list-style-type:circle;">
<li>Video Game Developer</li>
</ul>
<ul style="list-style-type:square;">
<li>Cyber Security Analyst</li>
</ul>
</div>
<hr>
<div class="column3" style="background-color:#ccc;">
<h3>Favorite Language so Far</h3>
<dl>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets</dd>
</dl>
</div>
<hr>
<div class="column4" style="background-color:#ddd;">
<h3>Favorite Class + Topic</h3>
<ol>
<li>Introduction to Web Development</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ol>
</div>
<hr>
<div class="column5" style="background-color:#ddd;">
<h3>My Inspiration in Tech</h3>
<ul>
<li>Elon Musk</li>
<ul>
<li>Founder and CEO of Tesla + SpaceX</li>
</ul>
</ul>
</div>
</div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>
As I stated, I am a noob with coding as I have just begun so I believe it may have something to do with spacing. I have tried to rearrange, but have failed miserably. Any help would be appreciated, thank you!

In your code you have
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
You have ol elements directly inside an ol element. You should have li elements as the direct children of ol. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
You could have
<ol>
<li>
<ol type="1">
<li>Python</li>
</ol>
</li>
</ol>
Incorrect HTML often does work and may do what you want but it is likely to be different in different browsers and lead to problems later on.

What you're trying to achieve is nesting of <ol> (ordered list).
A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.
Start by creating a list. It can be ordered or unordered:
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Now add a nested list to the first list item:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Notice that the sublist is a child and not a sibling of an <li> tag.
And you can keep adding levels:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
</ul>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
This is the only correct way of nesting <ol>
Results:

Align bullets in unordered list with left margin of heading above?

How can I align the bullets with the left margin of the text above the list? For example:
<html>
<style>
ul.p1 {padding-left: 40px}
ul.p2 {padding-left: 0px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</li>
</ul>
</body>
</html>
This gives the following output in Google Chrome:
Notice that the bullets in List B have disappeared. I would like to have the bullets exactly positioned over (aligned with) the "L" in the <h2> element above the list. Can this be done without using a trial and error approach?

Build you custom list style using pseudo element and you can easily control what you want:
ul {
padding-left: 0px;
list-style: none;
}
li {
padding-left: 1em;
position: relative;
}
li:before {
content: "•";
position: absolute;
left: 0;
font-size: 1.5em;
line-height: 0.9em;
}
/* to illustrate */
body {
border-left:1px solid grey;
}
<h2>List A</h2>
<ul >
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<ul style="font-size:30px;">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>

Just remove margins/padding as necessary and use list-position:inside.
ul {
list-style-position: inside;
padding: 0;
}
p {
display: inline-block;
margin: 0;
}
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
</li>
<li>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
</li>
<li>
<p>
Item 2.2
</p>
</li>
</ul>
alternatively, wrap the paragraphs in a div
body {
margin: 1em;
}
ul {
list-style-position: inside;
padding: 0;
}
div {
display: inline-block;
vertical-align: top;
}
p {
margin: 0;
}
<h2>List B</h2>
<ul class="p2">
<li>
<div>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</div>
</li>
</ul>

You can try this modifications:
<html>
<style>
ul.p1 {padding-left: 20px}
ul.p2 {padding-left: 20px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</body>
</html>

How to remove sub number in my ordered List?

I have problem with css styling of my Ordered List.
I have my HTML code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li class="sub">one</li>
<li class="">two
<ol>
<li class="small">two.one</li>
<li class="small">two.two</li>
<li class="small">two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
And I need to hide number value from 1 one, 2 two, 3 three and 4 four
Someone has idea, how to do that, please?

You can mimick the behavior you are looking for by setting the font-size to 0px and this would make the element be counted by the counter property while hiding it.
.hide {
font-size: 0px;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li class="hide">two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
<li class="hide">three.three</li>
<li>three.four</li>
</ol>
</li>
<li>four</li>
</ol>
Source: CSS counter on hidden submenu

Add arrow to dropdown menu on ths code

i want to add dropdownload arrow for each top level menu and not sub.
this is the one i want to add from this site link below but its not working for me
https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
padding:0;
margin:0;
}
body{
background:#f0f0f0;
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;
}
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#DF7B61;
text-decoration:none;
text-transform: uppercase;
text-shadow:0 1px 0 #fff;
}
span.reference a:hover{
color:#000;
}
.box{
margin-top:129px;
height:460px;
width:100%;
position:relative;
background:#fff url(click.png) no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
}
</style>
</head>
<body>
<nav><ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations </span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
<nav></div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$this.find('.ldd_submenu').slideDown(300);
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>
</body>
this is the code am trying to add
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}

Check it works for me:
.genesis-nav-menu > .menu-item-has-children > a {
color: #333;
text-decoration: none;
}
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 24px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
<link href="https://rawgit.com/WordPress/dashicons/master/css/dashicons.css" rel="stylesheet"/>
<div class="genesis-nav-menu">
<div class="menu-item-has-children">Hello</div>
</div>