Client Layout Version 3

This version of clientlayout centers buttons in the navbar. This is tricky because you need to know the width of the navbar ul, put it inside a div, then center that div.

As you'll see in the source code for clientlayout3.htm I enclosed the navbar ul in a new div named innderdiv.

In the layoutsyles3.css style sheet I created a new style rule for innerdiv. I figured out the width of the innerdiv, and set its width accordingly. Then I used margin:0 auto; to center innderdiv.

The margin:0 auto property doesn't work in some older browsers. So I added text-align:center; to the parent container's style rule (#navbar) to cover older browsers.

With the left-aligned navbar, we didn't really need to worry about a left border on the first navbar item. But in a centered navbar, leaving that off doesn't look quite right. So in clientlayout3.css I added a style class named .firstbutton that defines a left border that has the same style as the right border on other navbar buttons.

Then in this page (clientlayout3.htm) I added class="leftbutton" to the Home link's <a> tag to make it show that left border. I also made News the selected link because you really can't see that new left border when Home is the selected link.