First time visitor? The tutorials start here.

Ask Lesa

If you have a question about xHTML or CSS that you don’t see answered on this website, please ask in a comment below.

If you have simply overlooked it, I will give you the link to it. If it’s something that can be answered in a short sentence or two, I will post the answer in a reply here.

If I feel that it warrants a whole new tutorial, I will write one, then post the link to it in a reply here. 🙂

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (43)

JSproulJune 9th, 2009 at 4:02 pm

I have a question regarding link hover effects.

Your awesome tutorial shows how to use one image as a background for each link in an unordered list, which changes position when the mouse hovers over it.

What I am attempting to do is to use a different image for each link and somehow achieve the same effect. The list items are the images themselves rather than a text link. I am using this method because the words in the image are decorative and use a non-standard font.

Is there a quick way to do this with CSS or do I need to redesign the buttons?

LesaJune 9th, 2009 at 5:38 pm

First of all, thank you for the great compliment. It’s much appreciated. 🙂

Yes, you can use three separate images — or even 4, if you want to use a:active. Instead of changing the background-position of the same image for each link state, you would define a different background-image for each, along with the same positioning… center or top left, for example, as it won’t matter as much if the width and height of the element are the same dimensions as your background-image.

Going with this image rollover example, instead of:

ul li a { 
   background: #000 url(button1.png) center top no-repeat;
}

… and redefining the position for each state, it would look more like this:

ul li a:link { 
   background: #000 url(button1.png) center top no-repeat;
}
ul li a:visited { 
   background: #000 url(button2.png) center top no-repeat;
}
ul li a:hover { 
   background: #000 url(button3.png) center top no-repeat;
}

Now, you said the text is already on those images, which is fine. You should still put the text in your xHTML, but give it a negative text-indent so it isn’t visible on the page. For example:

text-indent: -10000px;

This way, your links will still be readable by search engines and aural screen readers. To be sure the xHTML is coded correctly, you should bookmark this link: disable style sheets, then use it while you’re viewing your finished page. Feel free to click on that link here too, to see how plain it looks without CSS. 🙂

I hope this helps! 😀

JSproulJune 9th, 2009 at 8:10 pm

Ah, I was unclear…

What I meant to say was, each link uses a separate image, so for example:

<a href="home.html" rel="nofollow"></a>
<a href="about.html" rel="nofollow"></a>
etc.

Each of these images has a “top” and “bottom” and I would like the top to display normally, and the bottom to display as the hover effect, just like in your tutorial but a different image for each link.

Would I have to give each link a unique ID/class and code separate a:link and a:hover for each?

e.g. in the HTML:
<a href…
and in CSS:
ul li#link1 a:link {background…

(apologies if the code is wrong, I’m still learning and may need a refresher on some things…)

Thanks for the tip about the negative text indent, that hadn’t occurred to me 😀

JSproulJune 9th, 2009 at 8:15 pm

😡

The comments use html code. Good to know.

To clarify the above:
Example 1:

<a href="home.html" rel="nofollow"></a>
<a href="about.html" rel="nofollow"></a>

Example 2:

<a href…

*crosses fingers and submits*

LesaJune 9th, 2009 at 8:21 pm

I fixed it for you, using &lt; and &gt; for the brackets. 🙂

To answer your question, I’ll first need to know if these images are transparent so a background image can show behind them.

You’re welcome for the negative text-indent tip. 🙂

JSproulJune 9th, 2009 at 8:27 pm

😡 😡

Well, that didn’t work either.

Let me put this all another way, then, since the gods of comment boxes seem to hold me in disfavor.

I am going to try giving each list item a unique ID, and use separate a:link and a:hover effects for each one, specifying a different background image each time. The code, then, would be:

HTML
<li id=”link1″><a href…>Home</a></li>

CSS
#link1 a:link {
background: #000 url(button1.png) center top no-repeat;
}
#link1 a:hover {
background: #000 url(button1.png) center bottom no-repeat;
}

Would that be correct?

JSproulJune 9th, 2009 at 8:28 pm

Haha thanks!

LesaJune 9th, 2009 at 8:37 pm

You’re welcome. 🙂

Sorry, I wasn’t thinking clearly earlier, then went even further off track with my 2nd response. Yes, assuming I’m understanding you correctly now, that would be the way to do it. 🙂

JSproulJune 9th, 2009 at 9:23 pm

Ok, I messed up somewhere 🙁 Not working for me at all. Thank you for your help.

LesaJune 9th, 2009 at 9:28 pm

Did you turn your links into block-level elements, define their width and height, etc, according to the original tutorial? If so, have you run the CSS through w3c’s validator to make sure there wasn’t any missing punctuation or anything like that?

If that doesn’t help and you have it online somewhere, I’ll be happy to take a look. 🙂

JSproulJune 9th, 2009 at 9:45 pm

http: //gunkystests.bullseyepaintball.ca/index.html

http: //gunkystests.bullseyepaintball.ca/yh_styles.css

Yeah, I must be missing something.

Oct 30, 2013 edit by Lesa: Made links non-clickable because site no longer exists.

LesaJune 9th, 2009 at 9:51 pm

Off the top of my head, try changing ul.linkpanel li to ul.linkpanel a here:

ul.linkpanel li {
display: block;
width: 150px;
height: 50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
text-decoration: none;
}

JSproulJune 9th, 2009 at 10:27 pm

By Jove, that did it.

Thanks again for the help! Your site is immensely helpful and I’ve learned tons of new tricks!

LesaJune 9th, 2009 at 10:30 pm

You’re very welcome, Jeff, and thank you for the kind words. 🙂 And I will add, I’m quite pleased to see you implementing the equal-height columns. Well done! 😀

saycheesesarahNovember 26th, 2009 at 5:53 pm

The stylesheet I am using calls for all links to be the color white. However for links existing within the tag, I want them to be a different color. I could do this by defining a separate class and using a span tag, however I opted instead not to add additional html and go with the code below in my style sheet.

The issue ….. it works perfectly in FF 3.x however in IE7, the link is still white and when I hover over it, it is a very light yellow which I do not have defined anywhere.

Here is the code … would appreciate any thoughts … and a Happy Thanksgiving to you and yours!

p {
padding-left:10px;
padding-right:10px;
}

p a:link, a:hover,a :visited {color: #c00000; text-decoration: none
}

– Sarah

LesaNovember 26th, 2009 at 6:19 pm

Happy Thanksgiving, Sarah. 🙂

Are you wanting one color inside paragraphs, and another color outside of paragraphs?

p a:link targets non-visited links, only when they are inside <p> tags.

a:hover targets all links that are hovered on, regardless of whether they are in a <p> tag or not.

a :visited shouldn’t target anything, because there is a space between a and :visited. If it were to read a:visited without a space, it would target all visited links, whether they are in a <p> tag or not.

I hope this helps. If not, then feel free to post a link to your style sheet, or post all link-related CSS here in the order it’s listed, and I can help you further from there. 🙂

Edit to add: As for the yellow color, that must be defined elsewhere in your style sheet. Once I see the rest of your link-related CSS, I should be able to help you find it.

saycheesesarahNovember 26th, 2009 at 9:24 pm

Thank you for those details. What I am dealing with is that I have a dark image beneath the footer, thus I set all links for the entire page to white as there will be few other links but where they exist, YES…. they will be inside of paragraphs such as:

Click Here to view the page where the “Click Here” will be the link.

Again Firefox displays what I want currently … it is IE7 that does not … and I have yet to check IE6/8.

What I have determined is that while Firefox is picking up the style sheet addtion I made of……..

p a:link, a:hover,a :visited {color: #c00000; text-decoration: none
}

….. IE7 is not. Instead it is picking up the default colors …. and I did find the yellow …. which I have at the very end of the style sheet as follows:

.footer {
float:left;
width:100%;
padding-top:10px;
padding-bottom:0;
text-align:center;
background:#000 url(“images/footerbkgrnd.png”) repeat-x;
color:#ffffff;
}

a:link, a:visited {
color:#ffffff;
text-decoration:none;
}
a:hover {
text-decoration: underline;
color: #f4f268;
}

/*EOF*/

******* SO ……. it all comes down to how do I get IE7… and IE6/8 which I have not tested yet… to recognize the “p a:link”

P.S. – This is what one does when suffering from a miserable cold on Thanksgiving !!

Thanks again,
Sarah

LesaNovember 26th, 2009 at 9:50 pm

I hope you feel better soon, Sarah. I’m taking advantage of this 4-day weekend to try and work out my first video tutorial for this blog, but I’m sure they’ll get easier with time. 🙂

Based on the information you’ve given me so far, I don’t see any reason why p a:link shouldn’t be working in IE7. This tells me there is more than likely a parse error or lexical error in the CSS that precedes it.

Try running all of your CSS through this validator, and fix any errors it points out. If my hunch is correct, we can then move on to why a:visited is white and a:hover is whatever color you changed the yellow to.

See also: Easily Find and Correct Errors in Your CSS

saycheesesarahNovember 26th, 2009 at 10:02 pm

Have uploaded the complete style sheet to <link removed>. Will appreciate anything you may identify.

Will also definitely run through the validator you recommend as well.

Thanks Lesa !

LesaNovember 26th, 2009 at 10:28 pm

It certainly validates. Does your HTML also validate?

HTML validator

saycheesesarahNovember 26th, 2009 at 11:08 pm

Yes. The only thing that validator found was my using old code for an ampersand. Fixed even though knew it would not resolve the issue.

Cannot for the life of me figure this one out.

I do have another thought ….. since the only place I need the white colored links are for the footer, is there a way I can add to the .footer class the a:link and a:hover settings ?

Am going to call it a night. Thanks again. Hope we can do something via the footer and also … best of everything with your video tutorials.

**** Would appreciate your removing the link I provided in my last post as while I will remove the file, would prefer the link does not remain in the public area. Thanks.

LesaNovember 26th, 2009 at 11:19 pm

You’re welcome, Sarah. 🙂

Maybe I need a “Stump Lesa” section. 😆

Yes, if those links are all in a .footer class, you can target them like this:

.footer a:link
.footer a:visited
.footer a:hover

Please let me know if this solves your problem. If not, maybe you can upload the page and post a link to it, along with a re-post of the CSS. Since posts containing links require moderation before they’re posted publicly, I can just grab the links and look at them without letting the public see the urls. That said, I removed the link to your CSS, per your request.

Have a good, healing sleep tonight. 🙂

saycheesesarahNovember 27th, 2009 at 8:12 am

Figured It Out ….. well … lets say I resolved it because I think you and I both are still going to question why the validated code did not provide the desired result before … and …. this whole issue is probably related to IE7 somehow considering Firefox responded throughout.

What I did was below the body tag in the style sheet, listed exactly this:

a:link {color: #054e98; text-decoration: none}
a:visited {color: #054e98; text-decoration: none}
a:hover {color: #054e98; text-decoration: none}

and then directly below the footer class in the style sheet I listed exactly this:

.footer a:link {color: #ffffff; text-decoration: none}
.footer a:visited {color: #ffffff; text-decoration: none}
.footer a:hover {color: #ffffff; text-decoration: none}

NOW it works as expected in both browsers … again though should not have been this difficult.

Thanks for all of your help…… now I am off to play with your CSS Photo Gallery with default files of 233×182 and hovered versions of 699×564 …. which is what I originally came to your site to check out. I was so impressed with your site and background, that I immediately began with what we have been working on. THANKS AGAIN !

LesaNovember 27th, 2009 at 12:28 pm

You’re welcome, Sarah, and thank you. 🙂

You should be able to combine that CSS with:

a:link, a:visited, a:hover {color: #054e98; text-decoration: none}

and

.footer a:link, .footer a:visited, .footer a:hover {color: #ffffff; text-decoration: none}

After yesterday’s oddity, I can understand why you might not want to fix what isn’t broke. 😆

Come back any time you have a question or comment, or just to say hi. I’d love to know how your gallery turns out. 🙂

saycheesesarahNovember 27th, 2009 at 9:37 pm

Thought you might be interested …. I could not let the CSS thing go … I figured out what was necessary to get IE to read as FF did ….. the links within the tag.

If you put the “p” before each link type such as below, IE will see this. You can then leave body as it is. I even added a line similar to below but for “h1” and all coexist beautifully. FF saw it either way.

p a:link, p a:hover, p a:visited {color: #00c000; text-decoration: none
}

LesaNovember 27th, 2009 at 11:20 pm

Thank you for the update, Sarah. 🙂

I thought it was p a:link you were concentrating on, which is why I didn’t push the point further on the missing p with a:hover and a:visited (see my initial response). I’m glad you figured it out, and if you need an explanation for why it works that way, please let me know.

LesaNovember 27th, 2009 at 11:24 pm

Sarah wrote:


Appreciate that and you are right, why mess with a good thing. I actually kept it separate in case I decide to change one or the other and makes it easier for me this way.

So I worked with the photo gallery and for images of the right size, it is great. In my case, hovered images are to be at least 505×474 and in some cases more like 750×550.

Also, the gallery must fit within another div so it cannot be wider… well maybe 10-15% wider than it is accoring to the css edits I made. The images when hovered in many cases do not allow the visitor go to the next image over and of course go over to where they would need use a scroll bar in some case but this again would take them off the image.

I may have to just go straight html page for each image via direct link from each thumbnail.

You can see test page at <snipped>


I figured you might not want your link here, so I quoted you instead. Yes, the large images do make it difficult to hover on thumbnails. Perhaps a compromise would be good? You could make the hovered images a smaller size (using CSS to re-size them), then let people see the full-sized versions when they’re clicked on?

saycheesesarahNovember 28th, 2009 at 4:56 pm

Considering the constraints of the div for which the images needed to fit, and taking into account that the only important thing was the clear display of the larger image….. I went old school with individual html pages and made each photo click back to the main gallery page.

P.S. – Just try to make me throw away my rotary dial phone! 🙂

** Thanks for quoting …. would also appreciate removal of link from Nov 27th at 4:55pm that I included.

LesaNovember 28th, 2009 at 8:09 pm

Lol, I could never go back to a rotary phone. Those things take way too long to dial. 😆

No worries on the link. I quoted you without making your post public, so you and I are the only two who have seen it. I actually didn’t realize you would see it, as it was the first time I had done that, so it took me a while to figure out which post you were referring to. 😀

Old school can work for that, although there is a way to use one php page instead of several different pages to handle all of your images that way. Perhaps I should create a tutorial on that soon…

Thanks for that idea, Sarah. 🙂

clabbybirdcatMarch 21st, 2011 at 7:17 pm

Dearest LG,

It is I clabby. I have an issue I am not able to resolve. I’ve recently revamped my website, TheRabidReader.com. I’ve tested it in IE and FF and ran it through an online emulator for MAC and it works fine. However, I’ve recently had a user contact me who uses Google Chrome, which I didn’t think I’d have an issue with, they say that the left index does not work. I checked it myself by downloading chrome and it doesn’t. Specifically the login and the skinchange is in the left side index in the HarryandSeverus skin and just the login in the DracoluvsHarry skin. I’m not sure what’s wrong as I ran both the skins with the issue through CSS and HTML validator and they checked out fine. Is chrome not using the Web standards, cause I thought they were compliant and didn’t bother to check?

Your advice would be much appreciated.

Thanks!

Clabby is the Original Birdcat

LesaMarch 24th, 2011 at 5:06 am

Hi Clabby! It’s good to see you here!

I’m so sorry for the late response, and for the fact that I won’t be able to figure it out right now. I’ve been up all night (it’s 5am now), and am just now about to go to bed.

I did take a quick peek, and can tell you that your main content is overlapping the areas you say aren’t working. It’s not that they’re not working; it’s that the main content div is acting as a barrier between the forms and your cursor. I’ll check out the code tomorrow, but before I do, I assume you ran your HTML and CSS through the appropriate validators to make sure it’s not caused by an error?

HTML Validator
CSS validator

clabbybirdcatMarch 24th, 2011 at 5:27 am

Thanks LG! I did run both the css and the html through the validators. I was thinking of changing the format of those two skins to match the new default skin and having just the two indexes. But I didn’t want to confuse those who are happy with the skins.

LesaMarch 24th, 2011 at 6:54 pm

Hi Clabby,

Your problem is due to an unfinished </div>, here:

<div class="lblock">

		<div class="tl"><div class="tr">
		<div class="title">Links</div>
		</div></div>
		<div class="content">...</div>
        </div

Also, you might want to run that page through the markup validator again, because it shows other errors, including more </div>s than <div>s. Also, since your doctype says you’re using html, you need to remove the space and slash from your favicon tag, and change the <br />s to <br>.

clabbybirdcatMarch 24th, 2011 at 7:04 pm

😕 I ran it through the validator! *grumbles* I DID! But I’ll do it again and it’s odd cause I was so worried about IE that I kept validating every time I made a change. Thanks so much Lesa!

LesaMarch 24th, 2011 at 8:21 pm

You’re welcome, Clabby. 🙂

I wonder if you had the old code and the new code opened at the same time, then accidentally ran the old code through the validator? I don’t think I’ve ever done that specifically, but there have been times when I’ve edited a file, refreshed, wondered why my changes weren’t showing up, then realized I was editing or refreshing the wrong file. 😕

kittyf64August 23rd, 2011 at 2:52 pm

Lesa,

I just finished viewing your PHP (Server side instructions) and interested in converting all my .html files to .php files. Would you know how this going to effect my site? Will everyone looking for my .com site still be able to view it? Is there anything i will need to do to not lose traffic?

Thanks,

Kittyf64

LesaAugust 23rd, 2011 at 3:40 pm

Hi Kitty,

Much will depend on the URLs and links (whether on your site or external links) to those pages. If they are all named index.html, in their own folders, and you link to them like http://mysite.com/directory/, then you won’t really have to worry about it.

Chances are, though, that you probably have several pages in one directory with different file names. In this case, you’ll want to change all the links on your site to the new URLs, as well as add a 301 redirect for each new address via htaccess. The 301 will automatically redirect people and search engines from your old links to your new ones, and also tells search engines that your page has moved permanently to the new address, keeping the same ranking those pages had before.

Since I haven’t written an article on 301 redirects, here’s the first result I found in Google that will explain it: How to Redirect a Web Page Using a 301 Redirect.

Important note: If your site already has an .htaccess file and you’re using an FTP program, you might not see the .htaccess file, depending on your FTP program’s settings. If you can’t figure out the settings but you have access to the files via a control panel on your host’s site, this is a safe way to see if one exists. Before you upload an .htaccess file via FTP, make absolutely certain you’re not overwriting an existing one, because it can mess some things up on your site.

I hope this helps! 😀

OldWarriorJuly 12th, 2015 at 5:20 pm

Hello, Lesa,

I am curious as to whether you recommend any specific php tutorial(s). I am interested especially in FREE, but I would also consider low-priced reference material.

Thanks.

LesaJuly 12th, 2015 at 11:01 pm

Hi OldWarrior!

I don’t know where the best place to learn php is, but w3schools is a good resource for a few different coding languages.

OldWarriorJuly 14th, 2015 at 1:08 am

Thanks for the suggestion, Lesa.

LesaJuly 14th, 2015 at 1:09 am

You’re welcome, OldWarrior. I hope it’s helpful. 🙂 Are you working on any site in particular, or just wanting to learn?

bchitalaAugust 26th, 2015 at 10:51 pm

Hi Lesa,

Is your website still active?

Thanks,

bchitala

LesaAugust 27th, 2015 at 2:51 am

Hi bchitala,

I haven’t posted any new articles in quite some time, as you can see but I do still monitor comments.

Thanks for reading!

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.