Template that has an Indented list

1

Does anyone have a template that has an ordered list?

2

You can insert this within the Inner HTML of a rectangle.

<ul>
  <li>This is item 1</li>
  <li>This is Item 2</li>
</ul>

For styling options, check this out: https://css-tricks.com/almanac/properties/l/list-style/. Any CSS you wish to use should be included in the <head> area of your document. You can edit the contents of the … of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. You may also need to uncheck ‘Protect from External Styles’ in the Document inspector as well.

1 Like
3

You may also want to look at this.

https://www.w3.org/TR/WCAG10-CSS-TECHS/#lists

This CSS

<STYLE type="text/css">
    UL, OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

as in one of the examples in above LINK shows this list type code

<ul>
     <li>Paper:
        <ul>
           <li> Envelopes
           </li><li> Notepaper
           </li><li> Letterhead
           </li><li> Poster paper 
           <span class="endoflist">(End of Paper)</span>
        </li></ul>
     </li><li> Pens:
        <ul>
           <li> Blue writing pens
           </li><li> whiteboard pens 
           <span class="endoflist">(End of Pens)</span>
        </li></ul>
     </li><li>Fasteners:
        <ul>
           <li> paper clips
           </li><li> staples
           </li><li> Big lengths of rope. 
           <span class="endoflist">(End of Fasteners)</span>
        </li></ul> 
     <span class="endoflist">(End of Office Supplies)</span>
  </li></ul>

which normally results in this

<img src="/uploads/db2156/original/2X/7/776decd32f333e2cce108ac2d341ac2200b03553.JPG" width=“390” height=285">

Changes it to this.

Screen Shot 2017-03-10 at 21.43.53.JPG786×526 59.4 KB

Pretty bloody neat…

2 Likes
4

Thanks Daniel. I will try this out

5

Thanks mark. This isn’t quite what I want… I will keep looking. In the meantime, here is a screenshot of what I want.

Neomi Vembu
neomivembu@gmail.com

6

Try using…

ul li{word-wrap:break-word; width:300px;}

Adjust the ‘width:300px’ to suit your needs

2 Likes
8

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

9

After 2 weeks of searching: I found what I wanted:
here is the code:

    Since you cannot put in header and document tags in the text boxes, you can put inline code into your text…GOod learn for all.