Question

A much-loved tweak to my TWikiSite is a right justified table of contents, which was done with this snippet in TWikiPreferences :

   * *Right Justified %MAINWEB%.TableOfContents - use in lieu of the normal %<nop>TOC%*
      * Set TOC2 = <table align=right><tr><td>%TOC%</td></tr></table>

After the upgrade to CairoRelease (and subsequently, PatternSkin), my right justified TOC is now overwritten by a colored bar when using the PatternSkin.

Any suggestions for how to enhance my TOC2 in order to stop the header2 bar in it's tracks ?

Examples

Question Examples The Original TOC2 Using the Div by Itself Div Inside Table Environment Answer Test header

The Original TOC2

This is the original TOC2 that was having problems

Using the Div by Itself

This is what happens when I use Arthur's div by itself (not bundled up inside of a table). Doesn't float to the right as intended, but crashes to the left :/

Question Examples The Original TOC2 Using the Div by Itself Div Inside Table Environment Answer Test header

Div Inside Table

My best mod to bring the two together .. but still there's that nubby colored bar on the end.

Environment

-- KeithHelfrich - 15 Apr 2005

Answer

Actually, the TOC is still above the colored H2 bar. The TOC's div background color is transparent. In HistoryFlow I've given it a white background, and made a simpler float.

-- ArthurClemens - 16 Apr 2005

Arthur, thanks. When I tried your code from the HistoryFlow topic, it scrunched the TOC up on the left in a really bad way, see #Using_the_Div_by_Itself. Or, if #Using_the_Div_by_Itself looks just beautiful to you (as I suspect it may) then take a look at this screenshot of what happens on IE6, windoze 2000.

But, I got the jist of what you were intending to do, so I tweaked it a little bit.

Instead of continuing to pick on HistoryFlow, I figured we could just as easily reproduce the problem here (#Examples above). So far, the #Div_Inside_Table example is the best I've been able to come up with. But there's still that nubby little colored end. Any suggestions for how to make it perfect ?

-- KeithHelfrich - 16 Apr 2005

The H2 background extends over the topic's page margins. So you either restrict the width of the bars, or you should move the twikiToc div to the right.

The H2 background sticks out with a width of -0.7 em at both sides, but h2 font size is bigger than normal text (145% in style.css), so to correct you will need 1.45 * -0.7 = -1.015em.

Put the TOC inside a div, so the div will handle the floating and clearing of the float.

You can add this to the topic text:

<div style="float:right; margin-right:-1.015em; padding:0.5em; background-color:white;">%TOC%<p class="twikiClear" /></div>

add border to the TOC and a bit of inner padding:

<style>.twikiToc {padding:0.5em; border:1px solid #ccc;}</style>

Testing:

Test header

-- ArthurClemens - 16 Apr 2005