SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Chapter 5 Page 218 (Building Your Own Website Using HTML & CSS)

    Hi

    I am very much a beginner so please excuse me for any lack of understanding, I am trying to learn web design through your book.

    I am on chapter 5, page 18, where it asks me to put in 'height: 484px; background: #7da5d8 url(backgrounds/nav-bg.jpg) no repeat;' which I have done, but instead of putting a photo in the navigation bar, it removes the differing background colouring that it originally had.

    I know it is something obvious I am not doing with the image, and it is probably staring me in the face but I cannot work out what it is...help?!

    Thanks
    James

  2. #2
    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)
    James, I assume you are actually referring to page [214] in the Third Edition of the book.

    Are you saying the photo nav-bg.jpg doesn't actually display?

    I'd hazard a guess the image path you have is wrong (or the photo is in the wrong folder) if it's just a case of no navigation background image showing.

    Therefore double check where the files reside and if it still doesn't work there is a good chance you have a typo somewhere else. In which case it might be helpful if you post a copy of what markup and CSS you have written so far in this thread. If you have a slightly different issue try to elaborate the best you can and we'll persevere.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your response, yes it is page 218, 2nd edition.

    The book offers no instruction as to where to file the image, so I initially filed it in the folder with all my web pages, which didn't work, and then I created a folder called 'backgrounds' in this folder, similar to the gallery one, and put a copy in there, still no luck.

  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)
    So you are using the older second edition; the easy way to determine which folder the image should be in, is to look at the page of the book in question and the CSS URL value in that code sample, i.e. url(...)

    Code:
    #navigation {
      width: 180px;
      height: 484px;
      background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }

    The folder containing the image 'nav-bg.jpg' should be in, is one called: backgrounds as is highlighted above. That folder should reside inside of the folder you have the actual webpage inside of. So make a new folder within your folder you probably called 'Web' that contains the webpage.

    If that doesn't work post your own HTML and CSS code here so we can spot any possible errors you might have made. Albeit usually the main culprit for a missing image; is isn't in the correct directory or there is a typo somewhere else in your CSS.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have a folder called backgrounds with the image called nav-bg.jpg inside it. This is in my web pages folder.

    The CSS styling code is:

    #navigation {
    width: 180px;
    height: 484px;
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
    }

    Can you spot anything I have done wrong?

    Thanks
    James

  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)
    You'll probably have to post the full XHTML and CSS code you wrote as there is nothing wrong with that specific part, which means the errors are somewhere else in the syntax or the image is misplaced, etc.

    What happens if you create the following new file call it; test.htm or something and place it in the same folder as the other webpage - just copy-and-paste and create the file called: test.htm

    HTML Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!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>
        <title>
          Image path test
        </title>
      </head>
      <body>
        <h1>
          Lorem
        </h1>
        <div>
          <img src="backgrounds/nav-bg.jpg" alt="An Image" title="This is a test image" />
        </div>
      </body>
    </html>
    If you don't see that image (in this test file) either your folder structure is wrong or the image misplaced; if you see that image in this test file then your code has error elsewhere. Then we'll need to see the whole shaboodle to pinpoint on what line you have the error.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I can see the image on the test page.

    This is my full CSS code:

    Code css:
    /*
    CSS for Bubble Under site
    */
    body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #e2edff;
    line-height: 125%;
    padding: 0;
    margin: 0;
    }
    h1, h2, h3 {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    }
    h1 {
    font-size: x-large;
    background-color: navy;
    color: white;
    padding-top: 2em;
    padding-bottom: .2em;
    padding-left: .4em;
    margin: 0;
    background: navy url(backgrounds/header-bg.jpg) repeat-y right bottom;
    }
    h2 {
    color: navy;
    font-size: 130%;
    font-weight: normal;
    padding-top: 15px;
    }
    li {
    font-size: small;
    list-style-type: none;
    }
    p {
    font-size: small;
    color: navy;
    }
    #tagline p {
    font-style: italic;
    font-family: Georgia, Times, serif;
    background-color: #bed8f3;
    border-top: 3px solid #7da5d8;
    border-bottom: 3px solid #7da5d8;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    margin: 0;
    background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
    }
    em {
    text-transform: uppercase;
    }
    a {
    font-weight: bold;
    color: black;
    }
     
    a {
    font-weight: bold;
    }
    a:link {
    color: black;
    }
    a:visited {
    color: navy;
    }
    a:hover {
    text-decoration: none;
    color: white;
    background-color: navy;
    }
    a:active {
    color: aqua;
    background-color: navy;
    }
    .fun {
    color: #339999;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }
     
    #navigation {
    width: 180px;
    height: 484px;
    background colour: #7da5d8 url(backgrounds/nav-bg.jpg) repeat-y right bottom;
    }
     
    #header {
    border-top: 3px solid #7da5d8;
    }
     
    h2, ul {
    margin-top: 15px;
    }
    .galleryphoto img {
    border: 15px solid white;
    }
    .galleryphoto p {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0;
    width: 430px;
    line-height: 1.4em;
    }
    .photocredit {
    font-weight: normal;
    color: gray;
    }
    .galleryphoto {
    padding-bottom: 20px;
    border-bottom: 1px solid navy;
    margin-bottom: 10px;
    }
     
    /*
    This section deals with the position of items on the screen.
    It uses absolute positioning - fixed x and y coordinates measured
    from the top-left corner of the browser's content display.
    */
    #navigation, #bodycontent, #header {
    position: absolute;
    }
    #navigation, #bodycontent {
    top: 107px;
    }
    #bodycontent {
    left: 200px;
    }
    #header {
    width: 100%;
    }
    .feature {
    float: right;
    margin: 10px;
    }
    Last edited by ScallioXTX; Oct 13, 2011 at 11:51.

  8. #8
    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)
    I'll have to assume your XHTML is correct thus the reason you cannot see your image applied is because you have an erroneous 'colour' word in the CSS. Also note for CSS colour is written color like in the US spelling and its confusing the browser - it halts on that line.

    The sample you posted above #7 differed to the other previous snippet for the #navigation on line 85 of your CSS file.

    Error for #navigation: background colour: #7da5d8 url(backgrounds/nav-bg.jpg) repeat-y right bottom;

    Because you are using the CSS shorthand you should have had the following line:

    Corrected line:
    Code css:
    background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;

    Somehow you duplicated some rules for by accident too regarding the repeat so just replace the line with the error; for my fixed line and it shalt work (and look like post #4) assuming everything else is in order, etc.


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
  •