logo Alternative navigation

Alternative Layout 2

This page puts the navbar inside the branding bar, rather than below it. I also shifted the navbar over to the right a bit.

This layout also uses a smaller font size from the get-go, by setting the font size to 80% in the body style rule rather than in the navbar. That makes it a little easier to control pixel slop among different browsers when doing advanced styles with navbars and drop-down menus.

This page is layoutAlternative1.htm. Its style sheet is layoutStylesAlternative1.css.

Tweaking

When tweaking layouts, always...

  1. Change one thing in the page or style sheet.
  2. Save the page or style sheet.
  3. View or refresh the page in the browser.

It's a better way to learn because you get immediate feedback on the effect of every change. If you just arbitrarily change a bunch of stuff without knowing what you're doing, you could end up with a big mess on your hands and no way to undo the mess.

bird

This is a sample para­graph in the left­column division. You can put any text you want here.