SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Images not working on my CSS!!

    I added the following to my style.css

    #navigation {
    width: 180px;
    height: 484px;
    background-color: #7da5d8 url(C:\Documents and Settings\Bruce Canales\My Documents\Web\images\nav-bg.jpg) no-repeat;
    }

    I have the following in my .html document.

    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="C:\Documents and Settings\Bruce Canales\My Documents\Web\about Us.html">About</a></li>
    <li><a href="C:\Documents and Settings\Bruce Canales\My Documents\Web\contact.html">Contact Us</a></li>
    <li><a href="C:\Documents and Settings\Bruce Canales\My Documents\Web\imagegallery.html">Image Gallery</a></li>
    </ul>
    </div> <!--ending navigation div -->


    CSS is working because when in use the following it works:

    #navigation {
    width: 180px;
    height: 484px;
    background-color: #7da5d8;
    }

    My problem is the image (/nav-bg.jpg) does not open on my browser (IE and Firefox).

    What am I doing wrong?

    Bruce

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try

    Code:
    background-color: #7da5d8 url("C:\Documents and Settings\Bruce Canales\My Documents\Web\images\nav-bg.jpg");
    w/ quotes and semicolon.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...nothing.

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Well rather than complicating matters and typing that full file path to your user name you'd be better using a relative path. Are you following one of the Ian Lloyd's SitePoint books by any chance as that code looks familiar?

    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    If you are using that book, you will probably have a folder called "Web" and one folder inside that one called "backgrounds" where the nav-bg.jpg should go.

    Else if you are using your own directory structure then substitute the 'backgrounds' folder name for 'images' or whatever folder the image is actually residing within.

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Well rather than complicating matters and typing that full file path to your user name you'd be better using a relative path. Are you following one of the Ian Lloyd's SitePoint books by any chance as that code looks familiar?

    If you are using that book, you will probably have a folder called "Web" and one folder inside that one called "backgrounds" where the nav-bg.jpg should go.

    Else if you are using your own directory structure then substitute the 'backgrounds' folder name for 'images' or whatever folder the image is actually residing within.

    Yes! I did get it from Ian Lloyd's SitePoint books. That code is exactly what I'm trying to do. I think I had this set up incorrectly from the get go.
    I'll try to make some changes and see what happens.
    THanks let me get back to you.

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No worries, you should have mentioned you was a "newbie" working from Ian's book because a lot of the people answering here won't have that book. So will have to guess what really you were after.

    With me being orange and a lot of people asking questions on this book I have access to it for this very reason, so I can give faster replies.

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    No worries, you should have mentioned you was a "newbie" working from Ian's book because a lot of the people answering here won't have that book. So will have to guess what really you were after.

    With me being orange and a lot of people asking questions on this book I have access to it for this very reason, so I can give faster replies.
    Yes! I am a newbie!! lol!

    So I tried to set up my folders again and still nothing. The path doesn't to be clear when I write it on my css.

    Is my set up wrong?

  8. #8
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem may be that you originally wrote:
    background-color: #7da5d8 url(C:\Documents and Settings\Bruce Canales\My Documents\Web\images\nav-bg.jpg)
    When you really meant:
    background-color: #7da5d8;
    background-image: url("C:\Documents and Settings\Bruce Canales\My Documents\Web\images\nav-bg.jpg");

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good catch Allan. I don't know how I've missed that. Robert saw the problem too.

    My given code is wrong, it should be shorthand:

    Code:
    background: #7da5d8 url("C:\Documents and Settings\Bruce Canales\My Documents\Web\images\nav-bg.jpg");

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You were supposed to have written these five lines:

    Code CSS:
    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }
    Inside the 'My Documents' folder you should have a folder called 'Web' to place your HTML page and inside that folder. Make sure you have one called 'backgrounds' inside the 'Web' folder; you should have the image itself inside the 'backgrounds' folder - double-check your spellings.

    So the folder structure is a little like: My Documents > Web > backgrounds

    If you directly opened the image file itself in Firefox it probably would look like the following in the address bar: file:///C:/Documents%20and%20Settings/Bruce%20Canales/Desktop/My%20Documents/Web/backgrounds/nav-bg.jpg

    I suspect if it isn't showing you have the image in the wrong directory or have made a typo. Thus try copy-and-pasting the multicoloured "CSS Code" example here into your CSS file overwriting those few CSS lines you originally had posted in #1

    If it still doesn't work then post the full XHTML and CSS files just to make sure it is only a path issue and not a simple syntax problem elsewhere.

  11. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Success!! THanks everyone!!
    Robert, you were right. My path was not defined correctly. After straightening that out and adding the code you provided it worked.

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No worries Bruce, it's a extremely common mistake when learning XHTML and CSS and make sure you use 'relative' paths. Rather than all those pointless long user name string paths when writing the pages.

    As it is easier and shorter to write, e.g. 'backgrounds/nav-bg.jpg' and more portable should you ever want to upload or move these files to another computer or web server, etc.


Tags for this Thread

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
  •