Differences

This shows you the differences between two versions of the page.

--- tips:toc_use_position_fixed [2011-05-14 11:49] – Restructuring lupo49
+++ tips:toc_use_position_fixed [2014-05-10 18:17] (current) – [What we want (if we want it :)] 91.42.157.30
@@ Line 21: / Line 21: @@
 We want to do the horrible tricks of the fixed div...Why horrible? Because it is not recommended.
-Look to this horrible implementation: [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]
+Look to this horrible implementation: [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]]FIXME
 The implementation of the TOC in DokuWiki actually is good, it is just for special use that you can use this trick.
@@ Line 27: / Line 27: @@
 ===== What we have to do =====
-Just replace the declaration of "div.dokuwiki div.toc" in the design.css of your template folder.
+Just add the declaration of "div.dokuwiki div.toc" in your conf/userstyle.css.
-(For instance: lib/tpl/default/design.css"
 <code css>
-/* ---------- table of contents ------------------- */
-/*
 div.dokuwiki div.toc {
-  margin: 1.2em 0 0 2em;
+    /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
-  float: right;
+    margin: 1.2em 0 0 2em;
-  width: 200px;
+    position: absolute;
-  font-size: 80%;
+    right: 20px;
-  clear: both;
+    top: 100px;
-}
+    z-index: 10;
-*/
+    width: 13%; /* could be improve */
+    height: 60%;
-div.dokuwiki div.toc {
+    overflow: hidden; /* When the toc is too big ... */
-	/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
+    opacity: 0.7; /* Transparency level of the TOC */
-	margin: 1.2em 0 0 2em;
-  	position: absolute;
-	right: 2px;
-	top: 100px;
-	z-index: 10;
-	width: 18%; /* could be improve */
-	height: 80%;
-	overflow: auto; /* When the toc is too big ... */
 }
 body > div.dokuwiki div.toc {
-  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
+    /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
-  	position: fixed;
+    position: fixed;
 }
 <!--[if gte IE 5.5]>
 <![if lt IE 7]>
 div.dokuwiki div.toc {
-  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
+    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
-  	 position: absolute;
+    position: absolute;
-  	right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+    right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
-  	top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+    top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
-	z-index: 10;
+    z-index: 10;
-	overflow-Y:scroll;
+    overflow-Y:scroll;
 }
 <![endif]>
@@ Line 75: / Line 62: @@
 </code>
-I use in the [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]] the cool and beauty template [[http://www.dokuwiki.org/wiki:tpl:templates?s=dark%20dokuwiki#dokuwiki_dark|dokuwiki dark]], to well implant the TOC i put this in layout.css :
+I use in the [[http://jm.massou.free.fr/dokuwiki/doku.php?do=show&id=blogw%3Atoc|horrible implementation]] FIXME the cool and beauty template [[template:dokuwiki_dark|dokuwiki dark]], to well implant the TOC i put this in layout.css :
 <code css>