Printable View
I am trying to use an image as a background to my links to make them look like buttons. I have got background images working elsewhere but when I specify one for the link it never appears. The css I am using is:
#nav a:link, #nav a:visited {
background-image: url(/images/nrdbutton_lrg2.gif); */
}
#nav a:hover {
background-image: url(/images/nrdbutton_lrg2.gif);
}
#nav #nav a:active {
background-image: url(/images/nrdbutton_lrg_down.gif);
}
Can anybody tell me what I am doing wrong?
Thanks
I don't think that comment tag (*/) is supposed to be there.
Oops, yes that was just there as I have been messing about with various combinations thanks. Taking it out has no effect.
Well, other than that, your css seems okay (except for this: #nav #nav). Did you double check the image name?
Yes the file is definitely there and the path is correct. When I mouse over the various links I see a brief flicker so it looks like it is trying to do something. Is it possible the image is being hidden behind something else?
Could be. But that's hard to tell without html code ;).
Your hover image is the same as the link and visited image btw, so you won't see any difference even if it works (the active pseudoclass only applies between mousedown and mouseup)
Yes thanks. I'm keeping the images down to one until I find out where the problem is and can at least see a background image. Is it okay to post the html here?
Sure, although I'm off right now.
But I'm sure someone else could help you further out. Good luck.
Cheers, here is the html
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NR Designs - Home</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="generator" content="Ian Homewood" />
<meta name="description" content="NRDesigns" />
<meta name="keywords" content="good,keywords" />
<link rel="stylesheet" type="text/css" href="Styles/NRD.css" media="screen, tv, projection" title="Default" />
<!-- Navigational metadata (an accessibility feature - preview in opera) -->
<link rel="top" href="/index.html" title="Homepage" />
<link rel="up" href="/index.html" title="Up" />
<link rel="first" href="/index.html" title="First page" />
<link rel="previous" href="/index.html" title="Previous page" />
<link rel="next" href="/index.html" title="Next page" />
<link rel="last" href="/index.html" title="Last page" />
<link rel="toc" href="/index.html" title="Table of contents" />
<link rel="index" href="/index.html" title="Site map" />
</head>
<body>
<div id="page">
<div id="header"> <img src="images/mainlogo.gif" width="590" height="142" /></div>
<div id="wrapper">
<div id="content">
<div id="path"> You are here: <a href="/index.html">Home</a> »
</div>
<div id="main">
<h1>Welcome!</h1>
<p> This layout uses a graduated brown background image, to match your
PP logo, repeated across the screen.</p>
<div class="img_left"> <a href="images/house1.jpg"> <img src="images/th_House1.jpg" alt="put a good photo description in here" width="150" height="113" border="0" /></a>
</div>
<p> The navigation is located on the left in vertical format. This is
easy for the viewer to find and gives plenty of scope to add new elements
as and when required without running out of space.<br />
</p>
<h1>Split the Page</h1>
<div class="img_right"> <img src="/images/nrdbutton_lrg.gif" alt="put a good photo description in here" width="125" height="25" border="0" />
</div>
<p> </p>
<br class="clear" />
<p> Subheadings can be used if you want to split the page into separate
elements, the colour of the subheadings can be changed to whatever you
wish.</p>
<br />
<p> Images can be located in the pages and used to link to larger images
or galleries.</p>
<p> </p>
</div>
</div>
<div id="left">
<div id="nav">
<h3>Navigation</h3>
<div class="inner_box">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/index.html">New Build</a></li>
<li><a href="/index.html">Renovations</a></li>
<li><a href="/index.html">Gallery</a></li>
<li><a href="/index.html">Virtual Tours</a></li>
<li><a href="/index.html">About</a></li>
</ul>
</div>
<!-- i love clean source code -->
</div>
<div class="left_box">
<h3>Links</h3>
<div class="inner_box">
<p> <a target=_blank href="http://www.nrdesigns.uk.com/" title="Individually designed kitchens from NRDesign">NRDesigns</a><br />
<a target=_blank href="http://www.builders.org.uk/nfb/" title="National Federation of Builders">NFB</a><br />
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>
Copyright © 2006 <a href="/index.html">NR Designs</a>. Web design by <a href="mailto:ian@homewood.me.uk">Ian Homewood</a>
</p>
</div>
</div>
</body>
</html>
I've set up a test CSS with nothing in but the nav class bits and an html file with just the list of links. It still does the same thing so whatever is wrong does not appear to be related to anything else in the page.
I would really appreciate some help on this if anybody has any ideas.
Cheers
I was just looking at it and was going to suggest to remove the unrelated bit and see what happens :).
Try this code:
If that doesn't work either, I'm baffled ;). I tried this with other images and it works all right for me. If it works, it's probably something in your navigation css.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NR Designs - Home</title>
<style type="text/css">
#nav a:link, #nav a:visited {
background-image: url(/images/nrdbutton_lrg2.gif);
}
#nav a:hover {
background-image: url(/images/nrdbutton_lrg2.gif);
}
#nav a:active {
background-image: url(/images/nrdbutton_lrg_down.gif);
}
</style>
</head>
<body>
<div id="nav">
<h3>Navigation</h3>
<div class="inner_box">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/index.html">New Build</a></li>
<li><a href="/index.html">Renovations</a></li>
<li><a href="/index.html">Gallery</a></li>
<li><a href="/index.html">Virtual Tours</a></li>
<li><a href="/index.html">About</a></li>
</ul>
</div>
<!-- i love clean source code -->
</div>
</body>
</html>
No joy with that code either. Looks like I will have to create individual gifs for each button then. :(
Thanks for trying.
Something in your reply made me think it was down to the button so I have tried it with another image and it works! I'll have to take a look and see what the difference is between the gif which works and the one which doesn't, I'll post my findings here.
Okay, the problem with the original button seems to be that it was saved from PS in RGB mode not indexed mode. I changed it to indexed and it now appears, although I now have the problem of the amount of the image which shows being determined by the number of letters in the link text.
At least it is progress. I'll have to try and find out what file formats are web compatible.