Is there a way to create a unique numbering format using only HTML and CSS lists (<ul> or <ol>)?
1. Item A
2. Item B
3. Item C
3.1. Subitem C.1
3.2. Subitem C.2
3.3. Subitem C.3
4. Item D
4.1. Subitem D.1
4.1.1 Sub-subitem D.1.1
4.1.2 Sub-subitem D.1.2
5. Item E
Any assistance would be greatly appreciated!
If you want to enhance your list with numbered sections using CSS, you can utilize counters like this:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}
To see a live demonstration, you can check out the example on JSBin (also available here):
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}<ol>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
<li></li>
</ol><style>
OL { counter-reset: section }
LI { display: block }
LI:before { content: counters(section, ".") " "; counter-increment: section }
</style>
<html>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol >
<li>Sub-item 3.1</li>
<li>Sub-item 3.2</li>
<li>Sub-item 3.3
<ol >
<li>Sub-sub-item 3.3.1</li>
<li>Sub-sub-item 3.3.2</li>
<li>Sub-sub-item 3.3.3</li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...
I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...
Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...
Incorporating HTML code with Angular elements on the homepage of a PHP forum script has been challenging. I have inserted the PHP code into index.template.php as instructed, but unfortunately, nothing is being displayed. <?php /** * This function ...
My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...
Any help would be greatly appreciated! :) I am currently using JavaScript to dynamically add fields to a document, but I have noticed that the event listener only works on predefined fields. For instance, in the code snippet below, the 'lozfield&apo ...
Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...
I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...
I'm currently facing an issue where I am trying to pass a parameter from an HTML form to a NodeJS router. The routing is working as expected, but the parameter value comes up as undefined. In the past, I have successfully passed parameters by making ...
When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...
After creating a WCFRestful service that populates data in JSON format as shown below: {"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"I ...
After referencing a tutorial, I implemented the following code: <div class="card" style="width:400px"> <img class="card-img-top" src="image.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</ ...
I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...
Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...
Currently, I am working on implementing an automatic search function in Angular that triggers after a component loads. Right now, the function is triggered by a button click, but I want to automate this process. <button mat-raised-button class="mat-whi ...
Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: to this: Any suggestions on how to achieve this? Appreciate any assistance you can provide! ...
Exploring a simple setup idea here: Imagine having a mobile app with a page that contains 4 lines of content (utilizing phonegap for development). The plan is to have a web page where data for those 4 lines can be inputted. Once the information is submitt ...
I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...
I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code: Code inside the template: <div class="tbl-barangay"> <b-table stripe ...
I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...