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: [https://firstratefreight.net/ShippingGuide.pdf]

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…

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.firstratefreight.net%2Fshippingguide.htmll

Try it like this…

<ol>
 <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>-->
  <ol>
   <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>
  </ol></li>
 <li><a href="#bookshipment">Booking the Shipment</a><!--</li>-->
  <ol>
   <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>
  </ol></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>
</ol>

…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;
}

coothead

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 {
	list-style-type:lower-alpha;
	text-align:left;
	line-height:1.4;
	padding-left:45%;
	border:3px solid pink;
}
1 Like