What is the best method for creating numbered paragraphs using HTML5 and CSS3?

Currently, I am putting together a QuickBASIC 4.5 manual in HTML5 and have made progress with it. However, I am looking for a way to add line numbers or prevent text wrapping in my code snippets. The current format of my code is as follows:

1. PRINT "Hello World!"
2. INPUT "Who are you? ", myName$
3. PRINT "Hello, " + myName$
4-7. (Stuff)
8. PRINT "Did you know that " + STR$(num1%) + " + " + STR$(num2%) + " = " + STR(total%) + "?"

As you can see, when scrolling over the code, it includes a scroller. I would like to maintain this feature while also figuring out how to automatically assign numbers to the lines. Currently, the numbering appears within the < p > tags:

<p class="code">1. PRINT "Hello World!" <br />
2. INPUT "Who are you? ", myName$ <br />
(...)</p>

I am wondering if there is something I need to implement, possibly in the CSS section, to enable both scrolling and automatic numbering. If you can solve either issue, please let me know. I have researched CSS3 and found that the text-wrap property isn't supported by major browsers yet, so I may not be able to use that. Nonetheless, having scrolling capabilities would likely address that concern.


For those curious, here is the CSS code for the code class:

.code {
    font-family: Courier;
    margin-left: 35px;
    margin-right: 35px;
    background: #F0EFE9;
    border-style: inset;
    border-width: 5px;
    resize: vertical;
    overflow: auto;
    cursor: context-menu;
    /*text-wrap: none;*/ /* This doesn't work.. */
}

Answer №1

<p>Section of text </p>
<p>Another section of text </p>
<p>Yet another section of text </p>
<p>One more section of text </p>
<p>Final section of text </p>
<p>Additional section of text </p>

<style type="text/css">
body {
  counter-reset: part;      
}
p:before {
  counter-increment: part;        
  content: "" counter(part) ": "; 
}
</style>

Answer №2

Instead of using a URL, you can utilize an <ol> element. The default behavior of an <ol> is to display the numbers of the list items, unlike the <ul> element.

<ol>
<li> PRINT "Hello World!" </li>
<li>INPUT "Who are you? ", myName</li>
</ol>

Answer №3

If you want to create a list with numbers in HTML, you can use an ordered list.

For more information on how to use ordered lists, check out this helpful link: .


<ol> 
<li><p>example item 1 </p></li>
</ol>

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

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

The z-index is preventing me from selecting a certain area

I'm currently facing a challenge with a Bootsrap card that seems to be unclickable and I am unable to type input into the form inside of it. The root cause appears to be related to the z-index that I used to position the card "behind" the header and f ...

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

Refining a collection of item elements by examining a string attribute, disregarding letter case differences

I'm working on a code snippet that generates item components from my list of objects (Frivillig). <app-frivillig-item *ngFor="let frivilligEl of frivillige" [frivillig]="frivilligEl"> </app-frivillig-item> Now, I have a new requireme ...

Tips for keeping an image at a fixed size within a grid, even when the browser window is resized

As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...

How to Customize Background Colors for Blogspot Posts?

Recently, I started my own blog using Google Blogger and I've run into a minor issue. Despite applying a background image for the entire blog, all of my posts have a white background instead. I haven't used any background-color in the HTML code o ...

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

Slowly zooming background image

I've been searching all over the place but can't seem to find a clear answer on how to slowly zoom in the background image using CSS. Any help would be greatly appreciated. Currently, my code only zooms the text elements and not the background. ...

Steps to display the error message in a modal popup header using Bootstrap 5

How can I display an error message in the header section using Bootstrap 5? <div class="modal-header"> <h5 class="modal-title">Add Email Group</h5> <div class="error">Invalid data, Please contac ...

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

"Exploring ways to retrieve the selected option value in HTML by utilizing the find() function in a Node.js Express application that is

I am currently facing an issue with retrieving a specific document from MongoDB using the find() method. I'm encountering a problem where the result returned is not what I expect in the HTML file. For example, I select MALE and XL, which I know exist ...

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...

Why does jQuery's .not(this) still identify the current row selected?

I have a table populated with data, each row ending in an icon marked with the "icon-size" and "edit" classes. I am trying to implement a feature where a selected row is highlighted with special emphasis borders. However, I am facing issues with toggling t ...

Having trouble inserting a new list item within a Bootstrap tab

I have a question regarding the creation of a tabbed interface using the code below: <ul class="nav nav-tabs"> <li class="active"><a href="#">Chart 1</a></li> <li><a href="#">Chart 2</a></ ...

Troubleshooting a Label Overlapping Problem in Materialize CSS

I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...

When I click on the left side menu, it should automatically scroll upwards

How can I make the right side page scroll go up when clicking on the left side menu? Please assist me with this issue. https://i.sstatic.net/doamN.jpg ...

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...