View Single Post
Old 03-17-2022, 10:33 AM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,361
Karma: 20212223
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Here are two options I came up with. The first uses embedded/nested ordered lists <ol>, the second uses divs <div>. There are some limitations and benefits to each.
However, not all ePub devices/reading apps treat ordered lists like they should and you may run across some that'll make your display ugly. If you use the <div> then you can type in exactly what you want to see.

I second Kevin's aversion to using empty <p> or <br> tags just to create space...that is what your css styling is for.

Ordered List:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    .lvl1 {list-style-type: decimal}
    .lvl2 {list-style-type: lower-alpha}
    .lvl3 {list-style-type: lower-roman}
    .lvl1 li {margin-top:1.5em}
    .lvl2 li {margin-top:.5em}
    .lvl3 li {margin-top:.5em}
</style>
</head>

<body>
  <ol class="lvl1">
   <li>Fruits 
    <ol class="lvl2">
      <li>apple</li>
      <li>mango</li>
      <li>grapes</li>
    </ol>
   </li>

   <li>Vegetables
    <ol class="lvl2">
      <li>tomato</li>
      <li>pumpkin</li>
      <li>broccoli
       <ol class="lvl3">
        <li>prevents cancer</li>
        <li>good for digestion</li>
        <li>prevents cancer</li>
       </ol>
      </li>
    </ol>
   </li>

   <li>Fast Food
    <ol class="lvl2">    
     <li>burger</li>
     <li>chips</li>
     <li>rolls</li>
    </ol>
   </li>
  </ol>
</body>
</html>

Div:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    p   {margin:0}
    div.lvl1 {margin:1em}
    div.lvl2 {margin:.5em 1em}
    div.lvl3 {margin:.5em 1em}
</style>
</head>

<body>
  <div class="lvl1">
    <p>1. Fruits</p>
    <div class="lvl2">
      <p>a) apple</p>
      <p>b) mango</p>
      <p>c) grapes</p>
    </div>

    <p>2. Vegetables</p>
    <div class="lvl2">
      <p>a) tomato</p>
      <p>b) pumpkin</p>
      <p>c) broccoli</p>
      <div class="lvl3">
        <p>i) prevents cancer</p>
        <p>ii) good for digestion</p>
        <p>iii) prevents cancer</p>
      </div>
    </div>

    <p>3. Fast Food</p>
    <div class="lvl2">
      <p>a) burger</p>
      <p>b) chips</p>
      <p>c) rolls</p>
    </div>
  </div>
</body>
</html>
Attached Thumbnails
Click image for larger version

Name:	ol.png
Views:	201
Size:	39.5 KB
ID:	192821   Click image for larger version

Name:	div.png
Views:	207
Size:	42.7 KB
ID:	192822  
Turtle91 is online now   Reply With Quote