What are some strategies for creating a distinctive list design using markup?

Possible Duplicate:
Achieving sub numbering on ol items html

I am attempting to create a format similar to the one below using an unordered list:


1. Title

Objective: some text here...

1.1 option1
1.2 option2
1.3 option3

2. Title

Objective: some text here...

2.1 option1
2.2 option2
2.3 option3


I attempted using list-style: decimal; but it only gives numbers like 1, 2, 3 etc. I require them in the format of 1.2, 1.3... 2.1, 2.3 etc. Is it possible to achieve this with one unordered list or will I need to use multiple lists?

htmllistcsshtml-lists

Answer №1

For a recent project, I incorporated the following code snippet (see demo)

(I can't recall where I found it, but it gets the job done)

ol{ 
    counter-reset: listing ;
}
li { 
    display: block ;
}
li:before { 
    content: counters(listing, ".") " "; 
    counter-increment: listing ;
}

This approach provides control over various aspects - you have the ability to customize the counter using the content property as needed

Answer №3

It seems like there may be some compatibility issues with the counter property in CSS across different browsers.

Have you considered using jQuery instead?

<style type="text/css">
ul
{
    list-style-type: none;
}
</style>    

<ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
</ul>


<script>
var num = 1.0;
$( "li" ).each(function( index ) {
    var text = $(this).text();
     index++;

     list = num + (index / 10);

     $(this).html(list + " . " + text);

});
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

jqueryhtmljsonnode.jsajax

Guide: Transform Bootstrap 4 Inline Checkboxes into Stacked Format When Screen Size Is Altered

The new layout of checkboxes and radio buttons in Bootstrap 4 really caught my attention. However, I am looking for a way to switch between "stack" and "inline" based on the screen size. Although size tagging has been added for various elements, I haven&ap ...

javascripthtmlcssbootstrap-4

What is the best way to focus on the N elements contained within another element?

Here is an example html input: <div class="grid--item user-info user-hover"> <div class="user-gravatar48"> <a href="/users/22656/jon-skeet"> <div class="gravatar-wrapper-48"> ...

htmlcssbeautifulsoupcss-selectors

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Consider the following scenario; <div *ngFor="item of items; let i = index;"> <div *ngIf="variable{{i}}">show if variable{{i}} is true</div> </div> Suppose I have variables named "variable0", "variable1",... Is there a way to ac ...

javascripthtmlangular

Stop the Enter key from functioning as a mouse click

Whenever an element is focused on and a mouse click action can be triggered, I've observed that the Enter key functions as if you're clicking the mouse left button. This behavior is causing conflicts in other parts of my code, so I need to find a ...

javascriptjqueryhtml

Challenge with constructing HTML structures

I created a table in HTML: <table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable"> <thead> <tr> <th class="asc" width="30"><h3>ID</h3></th> <th width="200">&l ...

htmlcss

Choose from two dropdown lists to select values and then load the page

I am interested in creating a simple feature using PHP or JavaScript: It should either take the user to a post/page, or load the content of the post/page on the post/page itself (using AJAX or similar methods). The desired functionality is as follows: U ...

jquerylistselectloadhtml

Create a copy of the dictionary for every item in the key value pairs list

I came across a scenario where I have a Python dictionary structured like this: dicts = [{'uid':'12345', 'markets':'['UK', 'US']'}, {'uid':'55644', 'markets&apos ...

pythonlistloopsdictionary

Unable to load the CSS file

Having trouble with the folder structure in my content directory: -Content --jquery-ui-1.10.4.custom --------------------------css --------------------------smoothness ------------------------------------jquery-ui-1.10.4.custom.css ----------------------- ...

jquerycssasp.net-mvc-4

Dynamic Menu Navigation (No Bootstrap Required)

My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear u ...

javascripthtmlcss

Discovering a deeply nested div or class using Beautiful Soup

Recently, I came across this URL: All I want to do is extract the zestimate and include it in a list. The specific class where it's located is: class="Text-c11n-8-65-2__sc-aiai24-0 eUxMDw". I attempted to target it at a higher level in th ...

pythonhtmlpandasbeautifulsoup

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

This is the code I have been working on: #move{ height:70px; width:70px; border:2px solid black; border-radius:15px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" val ...

javascriptjquerycsstransform

What is the best way to incorporate API calls within a React component's return using a select statement?

Here is the current structure of my component: import React, { useEffect, useState } from "react"; import Table from "../../../../Table/Table"; import { getBalance } from "../../../../../datasource/Financials"; export default ...

javascripthtmlreactjsapi

Collapse the columns and set them to float on the left side

My current setup might not be the most visually appealing, but it gets the job done. I have several col-md-4 tags in place. The issue arises when the height of the first tag is larger than the ones next to it, causing the subsequent tag to appear in the mi ...

angularjstwitter-bootstrapcsstwitter-bootstrap-3

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

I am currently working on a project that involves laying out multiple Kendo windows in rows. Specifically, I need to display 4 windows in each row and have them shift left when closed. My framework of choice is Bootstrap 3. Everything works as expected w ...

javascriptjqueryhtmlkendo-uitwitter-bootstrap-3

Having difficulty controlling the DOM within an AngularJS template

My website utilizes AngularJS templates, specifically a Single Page Application (SPA). Within one of the templates, I am utilizing a tab control from the AngularUI library named Ui-Tabset. During the rendering process, this control generates a ul element ...

javascriptjqueryhtmlcssangularjs

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

javascripthtmlreactjsnext.js

Float two DIVs horizontally with the same height using jQuery

Having a strange issue with the website I'm currently working on and can't seem to figure out what's causing it. Something is definitely off with my javascript, but I just can't pinpoint the exact problem. Here's the situation: I ...

javascriptjqueryhtmlcss

Tips for avoiding the need to reload a single page application when selecting items in the navigation bar

I am in the process of creating a simple Single Page Application (SPA) which includes a carousel section, an about us section, some forms, and a team section. I have a straightforward question: How can I prevent the page from reloading when clicking on nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

cssformshtml-tablealignmentvertical-alignment