Multi column table of contents |
Multi column table of contents |
Jon Jacobs |
Dec 22 2018, 08:37 PM
Post
#1
|
Group: Members Posts: 4 Joined: 22-December 18 Member No.: 26,781 |
I have a huge TOC, over 100 entries, and I think a multi-column approach would be very helpful.
Yes, I really need that huge TOC (generated by computer code). Here is a sample of the code I currently use: <h1 id="toc">Table of Contents</h1> <p class="tocnt"><a href="#001">Chapter 1</a></p> <p class="tocnt"><a href="#002">Chapter 2</a></p> Here is a segment from the CSS: p.tocnt { margin-top:0.0em; margin-bottom:0.0em; font-size: 125%; text-indent:0.0em; text-align:left; } What HTML and CSS can I use to produce a 3 column Table of Contents? I can modify my computer program to generate the new code. Thank you, |
Christian J |
Dec 23 2018, 05:11 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,671 Joined: 10-August 06 Member No.: 7 |
There are several ways to do it in CSS (with increasing complexity: "float: left", "display: table-cell" or "display: grid").
One important aspect is to avoid usability problems on mobile screens (like horizontal scrolling). When using floats, the columns will rearrange themselves below each other automatically in narrow viewports. Using the other ideas above, you may use CSS Media Queries to apply a completely different CSS layout in a narrow viewport. You could also use a dropdown navigation menu (usually done with javascript), where only one sub menu is shown at the time while the main headings of the columns are always visible. |
Lo-Fi Version | Time is now: 24th May 2024 - 12:34 AM |