I have created a page and name is all_list.php which include other three pages, list_one.php, list_two.php, and list_three_php. On this three pages I have a list where by I want to display the list in order. The style on the three pages is the same. I want my list to be in decimal format, which it does. But when the list on list_two.php and three are displayed they start from 1. I want the list on list_two to to start from 2 and the one on list_three.php to start from 3.
For example i should have something like this
Summary of Programming Languages(My Heading)
Layout Languages
1.1. HTML 5
Breakdown of the 2 from the 9 Most In-Demand Programming Languages
2.1. SQL.
2.2. Java
Programming Languages
3.1. Java
3.2. PHP
3.3. Python
Here is my code
My Style:
<style type="text/css">
.my_list
{
font : 12px Futura, 'Trebuchet MS', Arial, sans-serif;
}
p
{
margin: 0.33em;
}
h4, h5
{
display: block;
margin: 0.33em;
font-weight: bold;
}
h4
{
font-size : 14px;
}
h5
{
font-size : 13px;
}
/* ul
{
margin-left: -3.3em
} */
ol
{
counter-reset: item;
}
ol li
{
display: block;
position: relative;
}
ol li:before
{
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px;
}
</style>
all_list.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>All my List</title>
</head>
<body>
<div class="container">
<div class ="content">
<h1>Summary of Programming Languages</h1>
<?php include "list_one.php";?>
<?php include "list_two.php";?>
<?php include "list_three.php";?>
</div>
</div>
</body>
</html>
This the Output I get results:
I want this:
I have tried to make ol on list_two to start with 2 and ol in list_three.php to start with 3, which works but this does not support decimal. I want to display the list in decimal format.
I don't want to use hard coded numbers.
In HTML5 you can specify a start
attribute on ol
elements.
The
start
attribute, if present, must be a valid integer giving the ordinal value of the first list item.
Here's a two-item list starting at 98:
<ol start=98>
<li>Foo</li>
<li>Bar</li>
</ol>
For supporting decimal places you can use CSS to add in generated content (via the ::before) pseudo-element) and counters (using the
counter-increment` property).
What the below code example does is:
myListNumber
counter which gets incremented (by 1) every time an ol
element which is a direct child of the body
element is found.*::before
pseudo-element
on each inner-list li
(using content: counter(myListNumber) '.'
- the '.
is the decimal place).3px
away from the automatic list number (using left: -28px
(as our list already has 25px
left padding)).* In your case you'd want to use .content > ol
instead of body > ol
as your ol
elements are contained within a .content
element.
body > ol {
counter-increment: myListNumber;
}
ol ol {
padding-left: 25px;
}
ol ol li {
position: relative;
}
ol ol li::before {
content: counter(myListNumber) '.';
position: absolute;
left: -28px;
}
<ol start=1>
<li>
Foo
<ol>
<li>Bar</li>
<li>Baz</li>
</ol>
</li>
</ol>
<ol start=2>
<li>
Foo
<ol>
<li>Bar</li>
<li>Baz</li>
</ol>
</li>
</ol>
<ol start=3>
<li>
Foo
<ol>
<li>Bar</li>
<li>Baz</li>
</ol>
</li>
</ol>
</div>