Cardeo » links http://www.cardeo.ca Ramblings on web design and social media Wed, 26 Oct 2011 17:58:45 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 2008 Safari Bookmarks Bar http://www.cardeo.ca/2008/2008-safari-bookmarks-bar http://www.cardeo.ca/2008/2008-safari-bookmarks-bar#comments Tue, 09 Dec 2008 04:47:56 +0000 admin http://cardeo.ca/?p=929 It’s always a challenge for me to keep my bookmarks bar to a manageable amount of websites. I think the bar is designed to be quick links to a few of your favorite websites, but of course I abuse it. Instead of the generic best of 2008 websites post, I thought I would share my favorite websites I have bookmarked with you over the last year. It will also give me another chance to clean it out! So in no particular order…

Twitter Search
Facebook Connect
Google Friend Connect
Behance
Get Satisfaction
Facebook
Twitter
Pool Expert
Delicious
Google AdSense
Google Analytics
Gmail
Hotmail
Mediafire
Feedburner
Hashtags
Twitturly
Digg
Uservoice
QBN
ESPN NHL Scoreboard
Amazon Associates Canada
Cardeo Astore
Cardeo Zazzle Store
CBC Hockey Pool
The Elements of Typographic Style Applied to the Web
cssTypeSet
ASCII Character Code Cheat Sheet
Google Webmaster Central
WScoop
Google AdWords
Google Blog Search
W3Schools CSS Reference
Illustration Class
Ping-O-Matic
Mofuse
Creative Commons
Serph
Crazy Leaf Design Forum
Design Forums
Designers Talk Forum
Estetica Design Forum
Lipsum Lorem Ipsum
Google Reader
Set My Browser Size
Browser Shots
Website Grader
Quarkbase
WordPress Function List
Twitterfeed
http://cardeo.ca/?p=489 Today we are going to talk about achieving active link states using CSS and a tiny little bit of HTML. The most popular use for active link states is to highlight the page you are currently viewing on your website.

For this example, let’s put together a super basic, 3-page website. Our page titles will be Home, About, and Contact. The first thing we need to do is set an ID for each of these pages in our CSS, see below:

#home {
}
#about {
}
#contact {
}

Our next step will be to setup an ID for the actual active link states. At the very minimum, all you need to do here is define the color that you would like the active link to be.

#home #home_on {
color: #c06;
}
#about #about_on {
color: #c06;
}
#contact #contact_on {
color: #c06;
}

Okay, that’s it for the CSS, let’s move onto the HTML. Open up your index.html page and insert the following code into your <body> tag:

<body id=”home”>

Now do the same thing for the about and contact page replacing home with the relevant ID for about and contact.

The final step is to insert your link ID into the link tag for each of your pages in your main navigation. That will look like this:

<a href=”index.html” id=”home_on”>
<a href=”about.html” id=”about_on”>
<a href=”contact.html” id=”contact_on>

That’s it, you’re done. Click the button below if you would like to download a copy of the source files for this tutorial.

donate
]]> http://www.cardeo.ca/2008/achieving-active-link-states-with-css/feed 0