Alternative Layout 1
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...
- Change one thing in the page or style sheet.
- Save the page or style sheet.
- 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.