Styling ordered lists and list items using CSS margins and paddings

I am facing some issues:

Currently, I am implementing something similar to the following code:

<ol>
  <li>Title</li>
  <ol>
    <li>Content</li>
    <li>Content</li>
  </ol>
  <li>Title</li>
  <ol>
    <li>Content</li>
    <li>Content</li>
  </ol>
</ol>

At present, I am using a padding of 70px and a margin of -30px on all titles. This setup works well as long as the content does not exceed one row or three rows. However, when there are only two rows, the number from my ordered list container is incorrectly positioned.

I understand if these details are insufficient to diagnose the issue, but any solutions or explanations you may have would be greatly appreciated.

Thank you

Edit:

I apologize for the confusion earlier, as I identified my mistake shortly after seeking help. The error was not in the HTML code, which was generated by a program I am utilizing. I required the negative margin to create an anchor on my website so that clicking on a specific link would take you to that location with a margin at the top. Ultimately, I resolved this by creating an invisible div container that I moved to that position.

Sorry for any inconvenience caused

csshtml

Answer №1

For properly structured HTML, it is important to nest the OL tags within your LI tags as shown below. Give it a try and see if it resolves the issue.

<ol>
  <li>Title
      <ol>
        <li>Content</li>
        <li>Content</li>
      </ol>
  </li>
  <li>Title
      <ol>
        <li>Content</li>
        <li>Content</li>
      </ol>
  </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

The button press does not seem to be functioning

I am facing an issue with a button located on a modal pop up window. The click event of the button does not seem to be firing. This button is placed within a gridview. Strangely, when I place the button outside the gridview it works perfectly, but inside ...

c#javascript.netasp.nethtml

Tips on linking CSS files within a jade layout

I am having trouble referencing custom.css and bootstrap.min.css in my jade layout file that refers to views. It seems like the references are not working correctly. Can somebody please review my code to see if there is any issue? Jade Layout doctype htm ...

cssnode.jspug

Tips for opening a local HTML file in Internet Explorer

Is there a way to make an HTML file saved on the desktop open in Internet Explorer instead of Chrome as the default browser? Alternatively, is it possible to set Microsoft Word hyperlinks to open website links in Internet Explorer? Thank you! ...

javascripthtmlms-office

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

javascripthtmlcsspolymerpolymer-3.x

What is the best way to open up a parent CSS accordion when the child accordion's border is covering the parent's border?

Exploring Options and Background https://example.com/jsfiddle I have been experimenting with creating an expandable/collapsable accordion for displaying restaurant food choices, envisioning a digital menu akin to Just-Eat or Hungry House. My attempt inv ...

javascriptjqueryhtmlcssaccordion

Perform a toggle action on the first row when clicking within the current row using Jquery

I've been grappling with the idea of creating a function that can display and hide a comment field when a button is clicked. The challenge here is that there are multiple line items with their own comment boxes. I want to find a way to achieve this wi ...

javascriptjqueryhtmlcss

utilizing the data provided by a user in the "prompt" window within my HTML code

Looking to utilize user input from the prompt window. This is my custom JavaScript form: var answer; function load() { answer=prompt("what is your name?", "Write your name here"); return answer; } function hideNsee() { var HNS = docume ...

javascripthtml

Steps for clearing the chosen input data

I am currently developing an Angular 6 application and I am working on implementing a multiple select feature using just an input box without relying on any third-party plugins, jQuery, datalist, or select boxes. The solution needs to be purely input box b ...

javascripthtmlangulartypescriptmulti-select

Apply CSS3 attributes in real time

The for loop I have is functioning properly: <div id="page1div"></div> <script> list = " "; for (var i = 0 ; i < length ; i++) { list = "<h1 class='entriesdisplayed'>" + item(i) + ...

jqueryhtmlcss

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Hey there, I'm currently working on implementing error validation handling for a custom form that I've created. I'm looking to display the error messages in a designated div rather than using the standard browser alert box. Since I'm fa ...

javascriptphphtmljqueryajax

Tips for retaining the original size of an image in HTML5 canvas drawImage

function getBase64ImageData(_id) { var canv = document.createElement('CANVAS'); var context = canv.getContext("2d"); var imageElem = document.getElementById(_id); context.drawImage(imageElem, 0, 0); var dataURL = canv.toDat ...

javascripthtmlimagecanvas

What is the best way to position elements in a horizontal line?

I am trying to align three elements (DIVs) horizontally using Bootstrap's guidelines, but it doesn't seem to be working. This is the desired layout: https://i.sstatic.net/7lPKU.png However, this is what it currently looks like, aligned to the ...

htmlcssbootstrap-4

Ways to compel links to open in Internet Explorer

In one of my chatbot messages, I have included a link to a web app that is only compatible with Internet Explorer. My chatbot runs on Google Chrome, so when the user clicks on the link, it opens in a new Chrome tab instead of in IE, where it should open f ...

htmlinternet-explorer

Concerns with the dimensions of HTML thumbnails

view image description here I seem to be having an issue with the size of thumbnails on my website. The problem arises when a thumbnail with a long title is displayed, as it ends up taking up more space and affecting the layout. Is there a solution to ens ...

htmlcss

php code to present hierarchical information in HTML

Can someone help me figure out how to represent this array structure ($title, $depth) using <ul><li>? $title($depth) //////////////////////////////////// ELECTRONICS(0) TELEVISIONS(1) TUBE(2) LCD(2) PLASMA(2) PO ...

phphtmlhierarchical

Javascript Steps to trigger a function when selecting the Stay on Page option in Google Chrome

If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...

javascriptjqueryhtml

Retrieve a HTML element's tag using jQuery

I have a search bar with two tabs to choose from for the type of search. I am looking to assign the .active class to the list item whose search_type matches a parameter from a request (e.g., params[request_type]). <ul data-tabs="tabs" class="tabs"> ...

jqueryhtml

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Combining various functions into a single button

I am currently working on creating a full-screen menu that functions like a modal. Everything seems to be working fine, except for the fadeOut animation. Can someone please help me understand what is causing issues with my scripts/codes? I want the content ...

javascripthtmlcssanimation