I am looking to accomplish something similar to this...
My guess is that the images should be stored in an array in Javascript with the image links. However, I am uncertain if this can be done using only HTML and CSS.
I found a solution on this thread, which utilizes the ":before" pseudo element. But I am wondering if there is a more universally supported solution available?
One approach is to utilize standard <ol> tags and incorporate a background-image resembling a red circle onto every item in the list.
Reasons for Using an Image:
<style type="text/css">
body {
background:#333;
color:#FFF;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
.number-list {
list-style-type:none;
margin:0px;
padding:0px;
}
.number-list li {
width:100%;
float:left;
margin-bottom:10px;
line-height:35px;
font-size:16px;
}
.number-list li .order-number {
background:#900;
color:#FFF;
width:35px;
height:35px;
text-align:center;
line-height:35px;
float:left;
margin-right:15px;
-webkit-border-radius:35px;
-moz-border-radius:35px;
-ms-border-radius:35px;
-border-radius:35px;
border-radius:35px;
}
</style>
</head>
<body>
<ol class="number-list">
<li>
<span class="order-number">1</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
</li>
<li>
<span class="order-number">2</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
</li>
<li>
<span class="order-number">3</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
</li>
<li>
<span class="order-number">4</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar velit in lectus suscipit elementum luctus in dolor. Fusce eu neque suscipit, egestas nisi et, aliquam est. Pellentesque ac justo a mauris pretium sollicitudin. Maecenas tempus sodales semper.
</li>
</ol>
Users of IE 8 < may see a square instead of a circle, which is appropriate
My objective is for the video to automatically start playing when it enters the viewport, even if the play button is not clicked. It should also pause automatically when it leaves the viewport, without the need to click the pause button. <script src=& ...
I am currently trying to make a GET request to Yelp's API for a simple search using Express and Node.js, but I am struggling with setting the request header with the provided API key. Despite following the documentation by passing basic authentication ...
I am attempting to construct a graph similar to this: https://i.sstatic.net/USdyj.png. The graph represents a dependencies tree where each node has a list of elements it depends on as children (in a list), or a simple JSON structure with name and size info ...
After successfully hosting my website, I encountered an issue where it opens the index of the website (a list of files added via FTP) instead of the Index.html page. Can you advise on how to resolve this? Your assistance is greatly appreciated. ...
My media query seems to be behaving oddly. @media only screen and (max-width: 1200px) { .tool-panel { margin: 0px 24px 0px 0px; } } It is getting applied at 1183.20px instead of 1200px. This discrepancy is consistent across all browsers ev ...
Currently working on a project that involves searching for a music track on Spotify. The idea is to input the track name in the text area and generate a list of matching Track IDs along with Artist Names, Album Names, and Artwork. I have made some progress ...
{ "Items": [ { "location": "bakery", "item1": "milk", "item2": "bread" } ], } Currently, I am encountering difficulties in parsing a JSON object and receiving the following error: Error: Unca ...
FORM : <form id="approvalPenambahanUserInt" name="approvalPenambahanUserInt" action="" method="post"> <div class="form-group"> <div class="col-sm-12"> <label for= ...
What is the recommended method for adding borders between children of various elements within a div? In the example below, there should be borders between p,div and div,img. <div id="list"> <p>child 1</p> <div>child 2</ ...
I am looking to revamp my current sign-in page by transitioning it into a material UI style login page. Displayed below is the code for my existing sign-in component named "Navbar.js". This file handles state management and includes an axios call to an SQ ...
Check out this snippet of code: req.Course.find({}).populate('students', 'username firstName lastName registered').populate('teacher', 'image mID firstName lastName').sort({title: 1}).exec(function(err, courses){ ...
The Issue Currently working on a project using Next.js and facing a challenge: needing to hide or replace content based on the selected category without reloading the page or navigating to another route. Furthermore, ensuring that when the page is reloade ...
How to export a function as a class property from a module? Even if modifiers such as public are added, when a class property points to a function within a module, it behaves as though it is private. There are multiple ways to define a property (a, b, c ...
As someone working in DevOps, I have encountered a situation where our developers are claiming that the Node.js software they wrote can only point to a single backend server due to Node.js limitations. This assertion seems unbelievable to me. How is it eve ...
I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...
I am currently utilizing Flask to generate an HTML form (specifically a dropdown menu) with values retrieved from a list output by a Python function. The variable in the Python app.py code is called "two_dimensional_list". Here are some sample values: [[&a ...
I am encountering an issue with a specific part of my program and although I have identified the problem, I am unable to find a solution on my own. Therefore, I am reaching out for your assistance. It seems like the problem does not lie within the serialp ...
After working smoothly with create-react-app, I encountered an issue when attempting to create a build. Following the command: npm run build The build was successfully created. However, upon downloading and uploading the build file to a shared server via ...
I utilized Tinybox from this source for launching a popup webpage. I am hoping that when I click the links on the webpage, the popup will close itself and redirect to the link's URL. Here are my JavaScript and HTML codes: <script type="text/java ...
I've been struggling to eliminate the background color of the nav-link hover by setting it to transparent, but it still displays a background when hovered. I want to change the hover color for the text only, similar to the nav-brand, but I can't ...