(6) project technical examples links #
printer / text mode version
mksite.sh
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-10-12 <guidod>
 Guido Draheim

How to... seperate content and navigation

In the first example we did tell you to put the target hrefs leftmost in the sitefile. That will automatically create a horizontal navigation bar at the top of each generated page. But the actual look is still somewhat scary - the reader can not quite distinguish whether this first line is content text, the pages header line, or just some other generated helper items.

So let's expand the example - first we show a longer CSS <style> block, and we move the navigation items to the <center> and <u>nderline the navigation bar so that it stands out visually from the rest of the text.

  <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>
<center>
<u>-<a href="index.html"> Overview </a> </u>
<u>-<a href="loremipsum.html"> Lorem Ipsum </a> </u>
<u>-<a href="pagename.html"> more pages... </a> </u>
-</center>
<br>
</body></html> 		          

The resulting page does look already quite promising but in the next section we will expand on this scheme to create a vertical navigation bar instead of a horizontal one.

- 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.