Is it possible to replicate this layout using HTML and CSS?
1.
1.1
1.2
2.
2.1
2.2
Can I achieve this with the <li> and <ul> tags?
Is it possible to replicate this layout using HTML and CSS?
1.
1.1
1.2
2.
2.1
2.2
Can I achieve this with the <li> and <ul> tags?
When working with CSS-compliant browsers, you have the option to implement the following code:
ul { counter-reset:item; }
ul > li { counter-increment:item; }
ul > li:before {content: counter(item); }
ul > li > ul { counter-reset:subitem; }
ul > li > ul > li { counter-increment:subitem; }
ul > li > ul > li:before { content: counter(item) "." counter(subitem); }
Unfortunately, achieving consistent styling across different browsers can be challenging.
One workaround is to use nested ordered lists:
<ol>
<li>Item 1
<ol>
<li>Subitem 1</li>
</ol>
</li>
</ol>
You can then apply different styles to each nested list:
ol {
list-style-type: upper-roman;
}
ol ol {
list-style-type: decimal;
}
I hope this solution proves helpful!
It is recommended to opt for DL/DT/DD over OL/UL and manually input the values in the DT tags.
CSS Counters offer a way to count elements in CSS. By utilizing the :before and :after pseudo-classes, you can display the counter value to automatically number headings.
Regrettably, support for this feature is lacking in certain browsers such as Internet Explorer, even in its most recent version. However, Firefox excels in its implementation. Consider using it as an enhancement that won't render your site unusable if not supported by all browsers.
http://www.w3.org/TR/CSS2/generate.html
Indeed, this method is optimized for the latest browsers. Utilizing nested OLs seems to be the most efficient approach.
Achieving this is possible using CSS Counters. Nevertheless, it may not function properly across all web browsers.
If you're looking to dynamically update a table of contents using just one line of JavaScript, it can easily be achieved with the following code snippet:
<td class="session">
<script>
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);}
</script>
</td>
The variable num should be globally declared and initialized to zero somewhere in your document before this code block. With the given code, the first instance will display as 1.1. Simply change ++num to num++ if you want it to start at 1.0 instead.
Sample html code :
<ul>
<li>1 </li>
<li>1.1</li>
<li>1.2</li>
<li>2 </li>
<li>2.1</li>
<li>2.2</li>
</ul>
Custom css code:
li { list-style:none; }
I'm attempting to create a simple mousemove event that changes the CSS filter property of my background div based on the position of the mouse. While I have successfully achieved this in the past with background-color, I am now encountering issues wit ...
Using dynamic creation, I am tasked with generating a set of boxes each with slightly varying heights and ensuring that 2, 3, or 4 of them (based on screen size) appear on the same row. Here is an example of my attempt using Bootstrap: <div class="cont ...
I'm struggling to center the jackpot-item-container div within a chart. Can anyone help me figure this out? Check out my code on CodePen. <div id="jackpot-container" class="col-sm-12"> <div id="jackpot-item-container"> <span id= ...
I added a date field to my HTML form. <input type="date" name="match_date" id="matchDate" onchange="filterMatchByDate(event)" min="2021-01-01" max="2021-12-31"> There is also an anchor tag ...
I'm running into a wall here. My issue involves using ng-repeat to populate a table with two buttons in each row - one for updating the row content and another for uploading files. The upload button triggers a bootstrap modal window where users can se ...
I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...
Struggling to vertically align multiple position:absolute divs in the middle? Even with width and height set at 100%, they still overflow. Any solutions or suggestions would be greatly appreciated. Thank you! <div class="wrapper"> <div class="w ...
Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...
While working with Bootstrap 4, I noticed that the a tag is being displayed before the button when using the following code. Can anyone explain why? <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar ...
Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...
Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...
I'm currently working on a project that involves designing a web form incorporating 3 select boxes with multiple questions. The concept is such that, if I choose the 1st Question from the 1st select drop-down, it should not be available in the 2nd sel ...
I've been tackling the alignment of elements in my menu header, but for some reason, they're not lining up horizontally as intended. Instead, they are stacked below each other. Here's the link to my jsfiddle Here's a snippet of my HTML ...
Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...
Currently, I am using my own custom theme called Total. I want to display the Sidebar Login plugin's widget in the header section of my website. I attempted to do this with the following code: <div class="login"><?php the_widget('sideba ...
I'm currently utilizing electron([email protected]) along with bootstrap([email protected]). Whenever I attempt to incorporate a dropdown or other components from Bootstrap, they simply do not function. I am unsure of what mistake I might ha ...
I recently implemented a CSS dropdown menu example that I found on a website, but it's not working with my code. I double-checked for typos but couldn't find any. Even when I tried to directly copy the code and replace the content with my own, i ...
My current class setup is as follows: <div class="photo" parameter1="custom" parameter2="custom"></div> There are a total of 4 parameters in use. I am looking for a solution to pass these parameters within my photo div for JQuery coding, whi ...
Could there be an issue with my implementation of THREE.Mesh? I'm attempting to generate a torus mesh in three.js using what I believe to be correct mathematical calculations. However, the result is only displaying a portion of the torus, and changing ...
Currently, I am developing a responsive app and I am facing the challenge of making some parts of the search bar responsive while keeping others fixed in width (like the search icon). I attempted to achieve this using the following code: .wrapper{ ...