Many web designers still use tables to format their Back and Forward buttons at the bottom of their web pages. Tables on your web pages are fraught with problems, including some serious accessibility issues.
Example of Back and and Forward Links
I have coded a couple of simple CSS (Cascading Style Sheets) solutions to this problem.
Back and Next Link Formatting
This solution uses a simple unordered list to create the back and forward buttons. This solution actually degrades very well if CSS somehow breaks because it will just show up as an unordered list within the flow of the webpage, and when it degrades the links appear to go together because they show in an unordered list.
You start by creating a simple unordered list with the ul tag.
However, the links need to have large right padding to create large padding between links. I have set that rule as a CSS rule for the li tag.
Notice that this unordered list is also wrapped with an id of navcontainer. This gives tag separates the buttons from other content so it is not easily confused by your users.
<div id="navcontainer"> <ul id="navlist"> <li><a href="page1.htm">Back</a></li> <li><a href="page2.htm">Forward</a></li> </ul> </div>
The CSS required for these buttons is actually quite straightforward. It involves some simple settings are resets the list items to display in-line rather than block; this is important to allow the horizontal button layout.
#navcontainer { text-align: center; clear: both; margin-left: auto; margin-right: auto; width: 620px; } ul#navlist { margin: 0; padding: 0; } #navlist li { display: inline; list-style-type: none; padding-right: 150px; //Set at size you need for formatting }
Include the Home Link Formatting
You can easily add a Home link by just adding it as another list item.
<div id="navcontainer"> <ul id="navlist"> <li><a href="page1.htm">Back</a></li> <li><a href="index.htm">Home</a></li> <li><a href="page2.htm">Forward</a></li> </ul> </div>