navigation-console.html

<footer class="site site-footer">
<div class="inner">
<nav class="console"
style="display: table; margin: 0 auto; text-align: center;">
<div>
<a href="/" class="arrow previous" title="Previous Page">
<span class="icon icon-left">‹</span>
</a>
<a href="/#" class="arrow next" title="Next Page">
<span class="icon icon-right">›</span>
</a>
</div>
<div>
<a href="/" class="arrow home" title="Home">
<span class="icon icon1x1 icon-home">H</span>
</a>
<a href="../" class="arrow middle up" title="Up One Directory">
<span class="icon icon-up">^</span></a>
<a href="/site/" class="arrow next" title="Site Information and Map">
<span class="icon icon-site">S</span></a>
</div>
</nav>
</div>
</div>
</footer>

This is an attempt to create a "generic" navigation "console" that looks and functions similar to the manual gear shift on a car. The trick here is to get it to display centered (which has to be controlled by CSS), while retaining a minimum of styling so that it doesn't "fall apart" if the main stylesheet is misplaced or damaged. That is, it is still readable as a navigation console, with the minimum of (inline) styling used here.