<!-- Kills the blogger nav bar. Also needs the css nodisplay style rule above --> <meta http-equiv="refresh" content="1;url=http://www.wjbuchholz.com/?m=0"> </head>

IDCC 370 Announcements

Thursday, October 11, 2012

Creating Pseudo Class Selectors with Dreamweaver, 10/11/12

Check this out! Check this out:

Styling the Bottom Nav Bar
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:
  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
Placing these pseudoclasses in the correct order in your css file is critically important. An easy way to remember them is this acronym: LoVeHAte (LinkVistedHoverActive).

To make these css buttons work, you will create a style class .botnavbar and attach it to your bottom navigation h6 tag.
CSS rule hierarchy for Buttons: 3 containers

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:
Navigation barGarrick 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 wbuchholz@bentley.edu. 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: , , , , , ,

posted by WJB at

Top of page.top of page


Blogger Andrew Parksons said...

This is great and especially helpful for those who need a quick way to fix a stylish hover effect using only HTML and CSS. I’ve been studying advanced CSS lately and jumping in, from time to time, to basic jQuery animations to satisfy my taste for effects on a web page. That being said, the hover event in jQuery can be used for the same purpose, though will offer you a way to create and animate the hover effect yourself, best for advanced coders.

ijobasia.com - website design and development company based in Florida.

November 23, 2012 at 10:50 AM  
Blogger Rahul said...

Thank you for this detailed article. It has been really helpful for my web designing institute in Chennai.

October 20, 2015 at 5:58 AM  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home

Announcements powered by Blogger.com.

Bentley University, Waltham, MA