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
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.
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. 
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(…)
[FONT=courier new]
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url([B]backgrounds[/B]/nav-bg.jpg) no-repeat;
}
[/FONT]
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.
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
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
<?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.
I can see the image on the test page.
This is my full CSS code:
/*
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;
}
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:
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.