Check this out:
|Styling the Bottom Nav Bar|
Next, we will be working with our site templates to visually set the signature and the bottom navigation bar.
The three views of the nav bar and signature (at right; click to enlarge) show the progression from unstyled to completely styled (note: the "Site Map" link is in the hover state, bottom graphic).
To create this set of "faux buttons" in css, you will be working with the four css pseudo classes
Placing these pseudoclasses in the correct order in your css file is critically important. An easy way to remember them is this acronym: LoVeHAte
To make these css buttons work, you will create a style class .botnavbar
and attach it to your bottom navigation h6 tag.
You might find this graphic model at the left to be useful in understanding the css rule hierarchy as it relates to the html 5 "container" concept (click on graphic to enlarge).
This model represents the styling of the top navigation bar, which right now in your template is a simple unordered list. I think you will find this whole styling activity to be fun and an instructive introduction to your next challenge--the top navigation button bar:
Garrick Chow, from Lynda.com, has a nice review on Creating pseudo class selectors with Dreamweaver
. Feel free to watch this tutorial to reinforce what we will learn in class about css pseudoclasses and design.
If you have questions, just e-mail me at firstname.lastname@example.org
. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below. Note also that each announcement has a permanent link, available through the announcement title and posting date.
Labels: botnavbar, bottom navigation bar, css buttons, Dreamweaver, hover state, LoVeHAte, pseudo class