Best Way to Position Left-Justified List for Table of Contents

Hi all,

I am back with another inquiry about my Shipping Guide page.

The current item I am plugging away at is the table of contents, and what I want to do is to have the nested <ol> justified along the same line but also positioned close to the center of the page. text-align:center will not suffice.

Here below is a graphical representation:

Also, this can be seen in my PDF copy of the text version: []

Shall I just use margins and padding? That doesn’t seem like it would position reliably for different sizes of viewports. Or another nested div?

-ty :smashy:

Hi there etidd,

your code does not validate…

Try it like this…

 <li><a href="#intro">Introduction</a></li>
 <li><a href="#glossary">Glossary of Essential Terms</a></li>
 <li><a href="#trailertype">Determining the Trailer Type</a></li>
 <li><a href="#getready">Getting Ready to Ship</a><!--</li>-->
   <li><a href="#choosehandling">Choosing a Handling Unit</a></li>
   <li><a href="#packingfreight">Packing Your Freight</a></li>
   <li><a href="#weighingmeasuring">Weighing &amp; Measuring the Shipment</a></li>
 <li><a href="#bookshipment">Booking the Shipment</a><!--</li>-->
   <li><a href="#specialservices">Are Special Services Required?</a></li>
   <li><a href="#selectbroker">Selecting a Broker &amp; Carrier</a></li>
   <li><a href="#schedulepickup">Scheduling the Pickup</a></li>
   <li><a href="#documentation">Shipping Documentation</a></li>
 <li><a href="#tracking">Tracking &amp; Delivery</a></li>
 <li><a href="#claims">Claims, Damages, &amp; Shortages</a></li>
 <li><a href="#international">International Ocean &amp; Air Shipping</a></li>
 <li><a href="#conclusion">Conclusion</a></li>

…and change this CSS…

ol > ol {
    list-style-type: lower-alpha;
    text-align: left;
    line-height: 1.4;

…to this…

ol   ol {
    list-style-type: lower-alpha;
    text-align: left;
    line-height: 1.4;


1 Like

Hi again, @coothead !

Ah, I forgot that the <li> elements need to remain open until any nested elements are closed.
(and I should probably validate the code before posting)

Do you think I should move forward with a nested div for this positioning question?

I went ahead with the below for now. It looks like it can work along with some additional lines in the media queries.

ol ol {
	border:3px solid pink;
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.