Jump to content

ordered list

Ovaire d'Oz

Recommended Posts

It is possible, however it may be difficult.

The margin and padding of the list are dependent on the number of list-items that you are using. In this case, we are using 10 items, so you can see that our bottom-margin is -10em, while our top-padding is 10em. You will see more comments within the code for explanation.
ol#reverse {margin-bottom: -10em; /* number of items */padding-top: 10em; /* number of items */}ol#reverse li {position: relative;/* this creates the ability to keep the list items apart more */margin-bottom: -0.2em;/* fixes a bug in Firefox with non-collapsing margins */border-bottom: 1px solid transparent;}/* IE won’t do transparent borders */* html ol#reverse li { border-bottom-color: #FFF; }

That Mozilla/Firefox non-collapsing margin is very confusing to me. If anyone would like to investigate it, I challenge you to do so. And since we are creating a transparent border, we need to degrade that for Internet Explorer by using the * html hack.Specific CSSNow, for each list-item, we need a different top relative position. I wrote a short PHP snippet to automate this action for me, but the math is actually pretty simple.Each item is relatively positioned by the following formula:

-(((item_number – 1) *2) + ((item_number + 3)/10))

From http://paularmstrongdesigns.com/weblog/reverse-ordered-lists
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...