How to... create a vertical bar

On the previous page we have show how to create a horizontal navigation bar with the help of "<center>" tags around the "href"s of the sitefile. To create a vertical bar we need to build a "<table>" with the left (earlier) column to contain the navigation items and the right (later) column to contain the text content.

The trick here is the fact that mksite.sh will treat the final line containing "</body>" slightly specially - it will ensure that this line is not added to the front before the text content but it will be added after the content. It will be the only line ever moved after the text content but that is enough to create our two-column table that is the base of a vertical navigation bar layout.

  <html><head><title> my website <!--$title--> </title>
 <style>
    H4 { text-align : right ; }
    > a:link    { text-decoration : none ; color : #000080 ; }
    a:visited { text-decoration : none ; color : #200060 ; }
    p         { text-align : justify ; }
 </style>
</head><body>
<table><tr valign="top">
<td width="140" bgcolor="yellow"> <!-- navigation -->
<br><a href="index.html"> Overview </a>
<br>-<a href="loremipsum.html"> Lorem Ipsum </a>
<br>-<a href="pagename.html"> more pages... </a>
</td><td bgcolor="white"> <!-- body text -->
</td></tr></table></body></html>
          

Note that here each of the "href"s is prefixed with an explicit linebreak by means of hard <br>eaks. That will ensure the navigations items are shown vertical - if a name of a navigation item is too short than it would be set to it right. That is sometimes even intended - the tutorial subpages are shown by number and list each other horizontally. Buter after the subpages there is another <br>reak that makes seperates the next topic vertically.

A short hyphen before subpage entries can help to order subpages vertically under a leader topic. Therefore, in our example the "Overview" leads to its subpages of "Lorem Ipsum" and "More pages...".



Overview
- Lorem Ipsum
- more pages...

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore m agna 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 dia m nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et just o 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 er at, 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.