Help with pictures missing from site

Get Started
1

I am very much a novice, and have recently worked most of my way through the title ‘Web Site the Right way using HTML & CSS’. On doing that I wanted to produce a simple web layout until I gain some more knowledge. When checked in firefox, safari etc it all appears as it should. I also went to the w3c validation for all pages in my site, all ok. But when I down loaded the files and viewed them, I am missing a small horse picture at the top of each page - it should appear in the header opposite the logo(jpg). Also throughout the site some pics are missing. Within the web folder containg html/css/images I have a folder called backgrounds this holds the jpg image that should appear opposite the logo. For the 4 gallery pics there is also a folder called gallery. I think my CSS is at fault as I am not too confident with it, and would very much appreciate some help.

The site is www.equiserveborders.co.uk

Plus this is my CSS for it


/*
CSS for Equiserve - grassland management for horses
*/
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", Arial, Helvetica, sans-serif;
}

h1 {
  font-size: x-large;
  background-color: green;
  color: white;
  padding-top: 0em;
  padding-bottom: .2em;
  padding-left: .6em;
  margin: 0;
  background: white url(backgrounds/g-horses3.jpg) repeat-y     right;
}

h2 {
  color: green;
  font-size: 130%;
  font-weight: normal;
  padding-top: 15px;
} 

li {
 font-size: small;
 list-style-type: none;
}

p {
  font-size: small;
  color: black;
}

#tagline p {
  font-style: italic;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-top: 3px solid #c8ffb0;
  border-bottom: 3px solid #c8ffb0;
  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
  background: white 
}

em {
 text-transform: uppercase;
}

a {
  font-weight: bold;
  color: black;
}

a:link {
  color: green;
}

a:visited {
  color: black;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: green;
}

a:active {
  color: lime;
  background-color: green;
}

.fun {
  color: green;
  font-family: Verdana, Helvetica, Arial, sans-serif;

  letter-spacing: 0.05em;
}

blockquote.fun {
  font-style: italic;
}

#navigation {
  width: 180px;
  height: 484px;
  background: #c8ffb0; 
}

h2, ul {
  margin-top: 20px;
}

#header {
  border-top: 3px solid #A8FF90;
}

img.feature {
  float: right;
  margin: 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: 13.54em;
}

#bodycontent {
  left: 200px;
}

#header {
  width: 100%;
}

.galleryphoto img {
   border: 15px solid white;
}

.galleryphoto p {
 font-size: 65%;
 font-weight: bold;
 margin-top: 0;
 width: 430px;
}

.photocredit {
 font-weight: normal;
 color: gray;
}

.galleryphoto {
 padding-bottom: 20px;
 border-bottom: 1px solid navy;
 margin-bottom: 10px;
}
2

Morning Tarn

OK, so you have a folder structure something like:

public_html
|
|–CSS
|–backgrounds

in which case you need to tell the css file to go UP one level and in to the backgrounds folder to find the correct image.

so instead of


background: white url(backgrounds/g-horses3.jpg) repeat-y     right;

change to


background: white url(../backgrounds/g-horses3.jpg) repeat-y     right;
3

Im very sorry but I don’t understand your question.

If any help the image is not mentioned in my html files only in my css file. The jpg is in a folder called backgrounds within my web folder.

4

After staring at the gallery image and trying your suggestion I realised that the .jpg part was in caps. I changed it to lower case and my image came up on line - Hallelujah! I then looked at the other pages that were missing pics and they too had images with caps for .JPG. It seems to be ok but have not had time to check other servers at moment, but thank you very much for all your help. And, I certainly will not forget this in a hurry. Best wishes.

5

Your path to the image for the background is incorrect.
If you go directly to: http://www.equiserveborders.co.uk/backgrounds/g-horses3.jpg there is nothing there.
What is the correct path to the image if you were going straight to it?

6

Hi again, and thank you for trying to help. I did what you asked and still no horse pic appearing on top right of web site. Also, after making the change I viewed it offline and the image has now gone from there too!