www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Background-image works here but not there

  1. #1
    Join Date
    Apr 2012
    Posts
    10

    Background-image works here but not there

    First let me say that this is only my second website build so please be patient with me. I am trying to change background images of some links using p:hover. I built a test page and everything worked the way I wanted it to, but when I cut a pasted the code from the test page to the actual page they no longer came through. Anybody have any thoughts?
    here is my code the first one is the test page. The second and third are the actual page and the CSS that goes with it.

    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">
     <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <title>Blank HTML Doc</title>
      <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
      <!--<script type="text/javascript" src="/firebug-lite/build/firebug-lite.js"></script>-->
      <!--<link rel= "stylesheet" type= "text/css" href= "/styles/blankstyles.css" />-->
      <style type="text/css">
       div.links { width: 40%;
        position: absolute;
        top: 280px;
        left: 2%;  }
       div.links p img { border: none; 
        position: absolute;
        top: -29px;
        left: 5px; }
       div.links p { background-image: url("images/YellowBG.png");
        height: 37px;
        width: 510px;
        border: none;
        position: absolute;
        top: 5px;
        left: 5px;
        overflow: hidden; }
       div.links p.home { position: absolute;
         top: 0px;
         left: 0px; }
       div.links p.who { position: absolute;
         top: 50px;
         left: 0px; }
       div.links p.contact { position: absolute;
         top: 100px;
         left: 0px; }
       div.links p.what { position: absolute;
         top: 150px;
         left: 0px; }
       div.links p.FAQ { position: absolute;
         top: 200px;
         left: 0px; }
       div.links p.pics { position: absolute;
         top: 250px;
         left: 0px; }
       div.links p.pollination { position: absolute;
         top: 300px;
         left: 0px; }
       div.links p.pay { position: absolute;
         top: 350px;
         left: 0px; }
       div.links p:hover img { position: absolute;
         top: 5px;
         left: 5px; }
       div.links p:hover { background-image: url("images/BlackBG.png"); }
      </style>
     </head>
     <body>
      <div class= "links">
       <p class= "home">
        <a href="index.html" tabindex="1"><img src= "images/HomePage.png" /></a>
       </p>
       <p class= "who">
        <a href="whois.html" tabindex="2"><img src= "images/WhoIs.png" /></a>
       </p>
       <p class= "contact">
        <a href="contact.html" tabindex="3"><img src= "images/ContactUs.png" /></a>
       </p>
       <p class= "what">
        <a href="whatwedo.html" tabindex="4"><img src= "images/WhatWeDo.png" /></a>
       </p>
       <p class ="FAQ">
        <a href="faq.html" tabindex="5"><img src= "images/FAQ.png" /></a>
       </p>
       <p class= "pics">
        <a href="gallery.html" tabindex="6"><img src= "images/Photos.png" /></a>
       </p>
       <p class= "pollination">
        <a href="pollination.html" tabindex="7"><img src= "images/Pollination.png" /></a>
       </p>
       <p class= "pay">
        <a href="payus.html" tabindex="8"><img src= "images/PayUs.png" /></a>
       </p>
      </div> 
     </body>
    </html>
    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">
     <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <title>FAQ</title>
      <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
      <!--<script type="text/javascript" src="/firebug-lite/build/firebug-lite.js"></script>-->
      <link rel= "stylesheet" type= "text/css" href= "styles/style.css" />
     </head>
     <body>
        <div class= "links">
       <p class= "home">
        <a href="index.html" tabindex="1"><img src= "images/HomePage.png"  alt= "Home Page" /></a>
       </p>
       <p class= "who">
        <a href="whois.html" tabindex="2"><img src= "images/WhoIs.png" alt= "Who is BeeCharmer" /></a>
       </p>
       <p class= "contact">
        <a href="contact.html" tabindex="3"><img src= "images/ContactUs.png" alt= "Contact Us" /></a>
       </p>
       <p class= "what">
        <a href="whatwedo.html" tabindex="4"><img src= "images/WhatWeDo.png" alt= "What Does BeeCharmer Do" /></a>
       </p>
       <p class ="FAQ">
        <a href="faq.html" tabindex="5"><img src= "images/FAQ.png" alt= "Frequently Asked Questions" /></a>
       </p>
       <p class= "pics">
        <a href="gallery.html" tabindex="6"><img src= "images/Photos.png" alt= "Photo Gallery" /></a>
       </p>
       <p class= "pollination">
        <a href="pollination.html" tabindex="7"><img src= "images/Pollination.png" alt= "Pollination Services" /></a>
       </p>
       <p class= "pay">
        <a href="payus.html" tabindex="8"><img src= "images/PayUs.png" alt= "Pay BeeCharmer" /></a>
       </p>
      </div>
     </body>
    </html>
    Code:
     
    /*  POSITION AND STYLE LINKS  */
    div.links { width: 40%;
     position: absolute;
     top: 280px;
     left: 2%;  }
    div.links p img { border: none; 
      position: absolute;
      top: -29px;
      left: 5px; }
    div.links p { background-image: url("images/YellowBG.png");
      height: 37px;
      width: 510px;
      border: none;
      position: absolute;
      top: 5px;
      left: 5px;
      overflow: hidden; }
    div.links p.home { position: absolute;
      top: 0px;
      left: 0px; }
    div.links p.who { position: absolute;
      top: 50px;
      left: 0px; }
    div.links p.contact { position: absolute;
      top: 100px;
      left: 0px; }
    div.links p.what { position: absolute;
      top: 150px;
      left: 0px; }
    div.links p.FAQ { position: absolute;
      top: 200px;
      left: 0px; }
    div.links p.pics { position: absolute;
      top: 250px;
      left: 0px; }
    div.links p.pollination { position: absolute;
      top: 300px;
      left: 0px; }
    div.links p.pay { position: absolute;
      top: 350px;
      left: 0px; }
    div.links p:hover img { position: absolute;
       top: 5px;
       left: 5px; }
    div.links p:hover { background-image: url("images/BlackBG.png"); }
    Thank you for any help that you can give.

  2. #2
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    WEll links arent controlled by the p tag at all. You need to be using a:link a:hover a:visited and a:active. Those are what you are going to define in your css to style links. not p:link there is no such thing.

    Also div.links {} is saying that you are creating a class called links. That is not saying you are styling the links themselves. http://www.w3schools.com/css/ Read this and go through them all. It will help alot
    Last edited by PBSWebDesign; 04-22-2012 at 02:29 PM.

  3. #3
    Join Date
    Apr 2012
    Posts
    10
    Yes, I understand that, but I am changing the background of the <p> containing the <a>

  4. #4
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Quote Originally Posted by beewrangler View Post
    Yes, I understand that, but I am changing the background of the <p> containing the <a>
    For what reason? Html and CSS dont provide a way to change the background of an element like that on hover. You need javascript for that. Only links that get hovered over can have the styles changed in CSS and HTML. Javascript would be able to change the entire p element on hover with the mouse.

  5. #5
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    The way you based your question above was that you wanted to only change the backgrounds of the links which is easy to do. But now you are saying you want to change the entire background of the p element that happens to hold the links and/or other text inside. I think once we find out exactly what you are wanting it will be easier to diagnose what you need to do.

  6. #6
    Join Date
    Apr 2012
    Posts
    10
    At this point I think the hover part of this page is irrevelent. I'm not getting any background image in the <p> element on the actual page. It is working just fine on the test page. I have validated everything with W3C and tried IE7 IE8 and current release version of Chrome. All act the same.

  7. #7
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Well if you are just wanting a background on just the p element then in css do
    Code:
    p {
    background: url(path/to/image.jpg);
    }

  8. #8
    Join Date
    Apr 2012
    Posts
    10
    I have done that. As you can see here.
    Quote Originally Posted by beewrangler View Post
    Code:
     
    div.links p img { border: none; 
      position: absolute;
      top: -29px;
      left: 5px; }
    div.links p { background-image: url("images/YellowBG.png");
      height: 37px;
      width: 510px;
      border: none;
      position: absolute;
      top: 5px;
      left: 5px;
      overflow: hidden; }
    my question is why does it work on my test page but not on the actual page.

  9. #9
    Join Date
    Aug 2006
    Posts
    1,930
    Do you have this page up live somewhere we could see it? Would take 2 seconds to spot the issue with Firebug...

    Dave

  10. #10
    Join Date
    Apr 2012
    Posts
    10
    I don't have it live, but I will gladly send you all the files that go with it if you can tell me where to send them.

  11. #11
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Send me the files so that I can clean up the code and take a look at all of the source. Send them as a zip to PBSWebDesign@gmail.com Thanks

  12. #12
    Join Date
    Jun 2007
    Location
    Winnipeg, MB CANADA
    Posts
    128
    try changing your links in the background declarations on your CSS page to:

    background-image: url("../images/YellowBG.png");


    the images are probably in another directory, and you moved your CSS into a different directory but did not update your CSS to reflect the move.

  13. #13
    Join Date
    Apr 2012
    Posts
    10
    PBSWebDesign

    I have sent you a copy of all my files in a .zip
    I thank you for all your help.

  14. #14
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Alright sent them back to you. It is working now.

  15. #15
    Join Date
    Apr 2012
    Posts
    10
    Thanks PBSWebDesign

    That is exactly what I was want it to do. I will consider the PHP includes and the offer that you made me in your e-mail.

    Can you tell me why it wasn't working the way I had it? Why did changing background-images { url("images/YellowBG.png"; } to background-image { url(".../images/YellowBG.png"; } fix the problem?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles