project
- summary
- tutorial (2) (3)
(4) (5) (6) (7) (8) (9)
- usage (2)
technical
- reasoning
- two passes
- still tiny
- sitemaps
- variables
- accessibility
WAI SubSects
examples
- horizontal
- vertical
- tabbed (2)
- multi section
- printer style
links
- some hints
- faq&issues
- all features #
- about me
- our sitemap
- download
(C) 2004-04-22
Guido Draheim
new Tabbed Vertical Navigation Bar
<html><head><title>common title prefix <!--$title?--></title>
<style>
a:link { text-decoration : none ; color : #000080 ; }
a:visited { text-decoration : none ; color : #200060 ; }
body { background-color : white ; }
.body { background-color : white ; }
.navtable { background-color : #E0F0FF ; }
.navsect { background-color : #F8F8FF ; }
.navlist { width : 9em ; volume : soft ; }
H3 { text-align : right ; }
</style>
</head><body>
<table cellspacing="0" cellpadding="4" width="100%" class="navtable"><tr>
<td class="navsect" align="center"><a href="site.html"><b><!--$selected--></b></a></td>
<td class="navsect" align="center"><a href="index.html">Overview</a></td>
<td class="navsect" align="center"><a href="examples.html">Examples</a></td>
</tr><tr><td rowspan="2"> <small><small> </small></small>
</td><td colspan="2"></td></tr>
<tr><td class="body" colspan="2"></td></tr>
<tr valign="top"><td class="navlist">
<hr><a href="index.html">Overview</a>
<br>-<a href="intro.html">Introduction</a>
<br>-<a href="where.html">Related Work</a>
<hr><a href="examples.html">Examples</a>
<br>-<a href="loremipsum.html">Lorem Ipsum</a>
<br>-<a href="nietzsche.html">Nietzsche</a>
<hr><a href="impressum.html">Impressum</a>
<br><a href="site.html">sitemap</a>
</td><td class="body" colspan="2">
</td></tr></table></body></html>
While looking on these webpages with a Microsoft Internet Explorer
I had to notice some differences - foremost the the tabbed style
was broken since the
<tr colspan="3"><td>
did turn out to be rendered with a single-pixel height. This is
violating the `cellpadding="4"` given in the table head.
Furthermore, using a little non breakable spacer turns out making the
tabb ruler (below the actual tabbs) too big and destroying the look.
Anyway, here is a new variant that uses a little trick - for the
tabbed lower ruler we draw in fact two table rows - the leftmost
cell(s) are combined via rowspan="2" and filled with a
little (non erasable) whitespace. The righthand cells below the
tabbs are not combined (only horizontally via colspan="2")
whereas the upper part is drawn in tabb color and lower part is
drawn in body color.
That has a number of advantages - first of all, the tabb ruler is
really half the size of the spacer. Secondly, the body area is
set off by half a line as well - which is a good idea from a
typography point of view. And techniqually we are easier with
the "colspan"s which now take each the exact same value - in the
presented example always colspan="2"
matching exactly the number of visible tabbs above (minus the
leftmost area atop the vertical navigation bar).
| - | common title prefix - lorem ipsum | - |
| Lorem Ipsum | Overview | Examples |
|
Overview -Introduction -Related Work Examples -Lorem Ipsum -Nietzsche Impressum sitemap |
Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |