In this brief tutorial, I define how I want my links to appear via CSS  (white text with no underline), then I define how I want the links to behave when ‘rolled over’ (text changes to gold, with a navy background).

Here is the code to define those behaviors:

#navbar a:link, a:visited {
    color: #FFF;  
    text-decoration: none;
    }

#navbar a:hover {
    color: #FC0;
    background-color: #036;
    }

I make these behaviors specific to a section on my page (within the navbar area).  If I wanted the links to take on these attributes for the entire page, I would eliminate the ‘#navbar’ in front of each of these styles.

You may download a zip file that contains two files: the css file and the html file. Feel free to explore these. See the index.htm file to see how I link to the style sheet (within the head section). I include many comments in the CSS file to explain the links behavior. Within the CSS file you will notice how I:

• set up my entire page (it is a very basic page intentionally kept simple to focus on the links behavior),
• define the navbar area
• define the behavior for the links within the navbar area

If you are familiar with CSS, some additional attributes to consider using within the CSS styles to spice up your links might be:

background-image: (url/location of  image)
font-family
font-size
font-variant (sometimes I use small caps)

If you have any questions/comments, feel free to respond. I’d love to hear from you.

Here are the basic steps.

Download the zip files.

Place the iepngfix.htc file and the blank.gif file in your website root folder.  (I did this to keep it simple. You can place them in subfolders.)

Copy and paste the following code into CSS or HTML:

<style type="text/css">
img { behavior: url(iepngfix.htc) }
</style>

You could also assign a class to this, so you can use that class for png files:

img.pngFix { behavior: url(iepngfix.htc) }

If you are using a png image as a background-image assign the behavior within that same style:

h1 {
background-image: url(../images/mctourism.png);
behavior: url(iepngfix.htc);
background-repeat: no-repeat;
height: 50px;
width: 336px;
float: right;
text-indent: -1000em;
}

This may be simplifying it too much, but, hopefully it will get you started in the right direction. The common issue I run into is the incorrect path to the .htc file. The path to the .htc file that is within the CSS style must be relative to the html file, not the CSS file (which is the ‘normal’ way of doing it). I haven’t tested this extensively, but if I was using a png image throughout the site (resulting in my html files being at multiple levels), I would try using the absolute address for the .htc file (http://www.somewhere.com/ienpngfix.htc).

The zip files contain a lot more detail and more options. Let me know how it goes!

Here are the files I use, if you want to see them.  zip file

Video:  CSS: Absolute and Relative Positioning (opens in new window)

I did some tutorials for them late last year.  Most of them are for Photoshop, but there is also one for Illustrator, and a few other miscellaneous ones. If you want to see the list of tutorials that I authored with a brief introductions to each, go here. Otherwise, click on the desired tutorial below to view it at tutorialblog.org.

Enjoy!

Here are the titles:

Keeping Perspective (manipulating images while keeping perspective)
Resize It! Part 1 (Creating an Action in Photoshop)
Resize It! Part 2 (Using an Action in Photoshop)
What’s With Metadata?
Working in Camera Raw
Using Clipping Masks to Place Images Inside Shapes or Text
Using Symbols in Illustrator*
Is Your Document Print-Ready?
Is Your Image Web-Ready?
Creating a PDF Presentation inside Photoshop
Combing Images into a Panoramic using Photomerge
Making Your Site 508 Accessible
Why I Converted to Adobe Bridge
The Web Developer Toolbar for Firefox
Using the Blending Sliders in Photoshop

* received best of the week under Tutorials at http://arbent.net/blog/arbentings-best-of-the-week-1123-1129

This wasn’t the first time I used Facebook - I’ve been on it for over 6 months - but it’s the first time I experienced its value. Maybe I’m finally getting it!

Up to this point, I haven’t been really convinced of the usefulness of Facebook. Having so many people able to invade my living space so easily, left me feeling rather exposed! But, I decided to take a different approach last evening and share, what I considered, something of value.

I had just posted by 5th entry to my relatively new blog at http://livinglifebydesign.wordpress.com.  I decided to spread the word and invite my Facebook friends to check it out. Within 1 hour, I saws the hits double. Over the last 24 hours, the # of hits have quadrupled from what they were before. Keep in mind, this is a relatively new blog and I haven’t done too much in promoting it - so the numbers are small, but to see this kind of change, tells me that Facebook works!

So, now I am pondering more ways to pass on ‘value’ to my Facebook friends.