[rporteous]

Hello,

I am building some advanced multi-page templates using Advanced PDF/HTML… I am looking for CSS code examples, at the moment particularly for styling lists… Does anyone have any examples they would be happy to share? I am particularly interested in styling the Terms & Conditions numbered list including a list style like;

1 HEADING

1.1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1.2 Pellentesque quis velit consequat nisl venenatis molestie.

1.3 Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.

a) Ut imperdiet quam at elementum vehicula.

b) Duis id leo pharetra, accumsan ex vitae, consequat purus.

c) Nunc fringilla sapien dictum lacus euismod rutrum.

1.4 Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.

I look forward to hearing any working examples…

Thanks.

Russ
This is a cached copy. Click here to see the original post.

[rporteous]

Ok… After a LOT of toying around, I have started to sort our a few of the style and display issues I had wanted fixed…. Here are a few things I learned;

https://jsfiddle.net/rport/0fcygcq6/1/

LIST STYLE CSS

The default style for me was terrible… I had to do a little CSS reset that worked for me to get a basic list going;

HTML Code:
ol {
margin: 1em 0 0 1.5em;
padding: -1em 0 0 0;
}
li {
margin: 0 0 0 1em;
padding: 0 0 0 0;
}
For lists, I had to go to the BFO manual and this is how to get a the list style I was looking for;

HTML Code:

1. HEADING
   1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   2. Pellentesque quis velit consequat nisl venenatis molestie.
   3. Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.
      1. Ut imperdiet quam at elementum vehicula.
         1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         2. Duis in dui lacinia, consequat leo sit amet, laoreet augue.
         3. Cras et neque et diam dictum maximus.
      2. Duis id leo pharetra, accumsan ex vitae, consequat purus.
      3. Nunc fringilla sapien dictum lacus euismod rutrum.
   4. Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.
2. HEADING 1
   1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   2. Pellentesque quis velit consequat nisl venenatis molestie.
   3. Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.
      1. Ut imperdiet quam at elementum vehicula.
         1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         2. Duis in dui lacinia, consequat leo sit amet, laoreet augue.
         3. Cras et neque et diam dictum maximus.
      2. Duis id leo pharetra, accumsan ex vitae, consequat purus.
      3. Nunc fringilla sapien dictum lacus euismod rutrum.
   4. Fusce tempor eros eu ipsum euismod, auctor commodo nulla interdum.

[Author]

Posts