The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Multi column table of contents
Jon Jacobs
post Dec 22 2018, 08:37 PM
Post #1





Group: Members
Posts: 2
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,
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 23 2018, 05:11 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,068
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jon Jacobs
post Dec 23 2018, 05:37 PM
Post #3





Group: Members
Posts: 2
Joined: 22-December 18
Member No.: 26,781



float: left sounds promising. I will try to find out more about it. I may end up having to ask more details, but I will try to research it first.

Thank you,
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 23 2018, 06:07 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,068
Joined: 10-August 06
Member No.: 7



Here's a good tutorial on floats: https://css-tricks.com/all-about-floats/ (though it doesn't focus on multi column layouts in particular).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aresourcepool
post Jan 14 2019, 08:32 AM
Post #5





Group: Members
Posts: 4
Joined: 14-January 19
Member No.: 26,796



The column-count property specifies the number of columns an element should be divided into.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st March 2019 - 12:19 AM