Template that has an Indented list


(Neomi Vembu) #1

Does anyone have a template that has an ordered list?


List with indented bullets that wrap
#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.


(Mark Hunte) #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.

Pretty bloody neat…


(Neomi Vembu) #4

Thanks Daniel. I will try this out


(Neomi Vembu) #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


(Greg) #6

Try using…

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

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


#8

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


(Neomi Vembu) #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.