Blog 3- CSS Techniques

It took me a long time to settle on a site to analyze for this week because, let’s face it, code is hard to understand. Especially when you have a limited knowledge as a beginning student. I settled on trying to find a minimalistic site that was still elegantly designed. This was because one, it was easier for me to follow the coding and two, I prefer a simple design aesthetic anyway. I settled on a photography portfolio for Steffen Knudsen Allen.

Untitled

The design element that most intrigued me is a relatively simple one. On the navigation menu, the active page will have a small, gray arrow by it indicating where the user is on the site map. The arrow moves depending on which page the user visits. This effect was achieved by using a ‘current’ tag for the list item in the CSS. The current tag contained a background image of the arrow, placed to the right of the text, obviously still within the navigation div. I’ve copied the coding below so you can all see how simple it is, at least in theory.

#nav li li.Current {

background: url(/_images/arrow.gif) no-repeat right 8px;

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s