Alternate CSS

– (sidebar between wiki button bars)

CSS UPDATED.

The CSS should now be proof against wiki content elements which use clear:left or clear:both. Modified (and more robust) CSS is shown below.

CSS code


The CSS for the example (no other code was changed) …

/* CSS Document */
 
h1, h2, h3, h4, h5 { }
div.toc {}
 
/* dokuwiki containers & styles */
#jlk_dokuwiki {position:absolute; margin:0; padding:0; width:100%; min-width:100%; height:100%; min-height:100%;}
#content-main {background-color:#faf4d4; margin-top: 0; padding-left: 2px;}
#jlk_wikiheader {}
#jlk_wiki {}
 
#wiki_navigate {float:left; width:180px; margin:0; padding:2px; border-width: 0;}
#wiki_navigate {background-color: #ffffff; border-width:1px 2px 2px 1px; border-style:solid; border-color:#999999}
#wiki_navigate {font-size:10px;}
#wiki_navigate a {color: black;}
#wiki_navigate a.wikilink2 {color:#999999;}
#wiki_navigate a.wikilink2:hover {text-decoration:none; cursor:default;}
#wiki_navigate h1 {font-size:140%; margin-left: 2px; padding-left: 2px; font-weight:bold; padding-bottom:0; background-color:#99cc99;}
#wiki_navigate h2 {font-size:120%; margin-left: 4px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h3 {font-size:120%; margin-left: 8px; font-weight:normal; padding-bottom:0;}
#wiki_navigate h4 {font-size:100%; margin-left: 12px; font-weight:bold; padding-bottom:0;}
#wiki_navigate h5 {font-size:100%; margin-left: 16px; font-weight:normal; padding-bottom:0;}
#wiki_navigate .toc {display:none;}
 
/* reduced section indentation */
#wiki_navigate div.level1 {margin-left: 2px;}
#wiki_navigate div.level2 {margin-left: 6px;}
#wiki_navigate div.level3 {margin-left: 10px;}
#wiki_navigate div.level4 {margin-left: 14px;}
#wiki_navigate div.level5 {margin-left: 18px;}
 
.header { line-height:normal;}
.pagename {font-size:160%; font-weight:normal; color:#999999;}
.logo a:link, .logo a:visited, .logo a:hover, .logo a:active { color:#a0b4bc; font-size:100%; font-variant: small-caps; letter-spacing: 2pt; text-decoration: none; }
.logo a:hover {color:#ff9900;}
div.page p, div.page li {text-align: left;}
 
/* fix to contain effects of clears within div.page (so sidebar isn't cleared) */
div.page {overflow:auto;} 
 
/* IE fixes */
* html div.page {overflow:visible; height: 1%; }  /* Sidebar only fix */
* html .page .toc {height:1%}   /* General Dokuwiki fix. IE needs this to always display TOC contents */
* html pre {width:95%;}         /* General Dokuwiki fix - very important for Sidebar. IE needs this to get the overflow:auto style to kick in */
 
/* end doku wiki stuff */

Side Effects

  • Side effect of float changes seems to be erratic positioning of ToC block and section edit buttons. *fixed, CSS updated*
  • occasional disappearing text in IE, fixed by adding position:relative to div.page style declaration.
 
tutorials/navigation_sidebar_2.txt · Last modified: 2005/04/26 13:12 (external edit)
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki