SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image for link not appearing

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that comment tag (*/) is supposed to be there.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, yes that was just there as I have been messing about with various combinations thanks. Taking it out has no effect.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, other than that, your css seems okay (except for this: #nav #nav). Did you double check the image name?
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, although I'm off right now.

    But I'm sure someone else could help you further out. Good luck.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  9. #9
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, here is the html

    <!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> &raquo;
    </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>&nbsp; </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>&nbsp;</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 &copy; 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>

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just looking at it and was going to suggest to remove the unrelated bit and see what happens .

    Try this code:

    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>
    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.
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No joy with that code either. Looks like I will have to create individual gifs for each button then.

    Thanks for trying.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •