I am very new to web design and am following exercises in the book build your own website the right way. I have made a file for pictures called gallery as instructed but when I come to put the pictures in the gallery only the first picture will load, all the others have the alt. text. What am I doing wrong?
I also found when I did the border round the pictures and tried to remove it from the one on the home page by putting the instruction in the style sheet it would not go away ?
Hi Carole_Rodgers, and welcome to the forums.
Have you checked that the names of your pictures exactly match the filenames you’ve used in your code? Capitalisation and extension must be exactly the same. e.g. If you call a file picture.jpg, but refer to it in your code as picture.jpeg, it won’t work.
If you’re sure it’s not something like that, then please post the relevant section of your code here, so we can have a look and see what’s going awry.
(If you need help posting code, try this: Forum Posting Basics - #6 by James_Hibbard)
We need more information.
What languages are you using?
To me, this almost sounds like a problem with a loop in your code if you are using something like PHP.
As Carole_Rodgers says she’s a beginner, and I believe the book she’s referring to is this one, I don’t think the issue is as complicated as that.
I think you meant you created a “folder” called “gallery”.
Make sure you understand the difference between “relative” and “absolute” references.
If you have multiple pages, that could affect how you do the code.
Without a sample of your code it is nearly impossible to guess where the issue is.
Paste youd code here between the tags [ code ] [ /code ] but leave out the spaces between [ and code for example.
Mods: It would be nice if your toolbar allowed for bbcode like the rest of the planet uses!! 
Off Topic:
On the whole, bbcode will work, but Discourse (the platform on which the forums are built) favours Markdown. I linked in my first post to a reference for posting code on the forums, which includes using the toolbar button. If you want more information about Markdown, you can find a link from this post: Discourse Cheat Sheet
I see that [ code ] works, but when I have tried [ html ] or [ php ] it doesn’t work here.
<img src="gallery/edgeog.JPG" width="300" height="170"
alt="An edgeog"/>
<p> This is a banksia nut before turning</p>
</div>
<div class="galleryphoto">
<img src=="gallery/dotty-pot.JPG" width="300" height="170"
alt="a dotty pot"/>
<p> This is a cleverly made dotty bowl</p>
</div>
<div class="galleryphoto">
<img src="gallery/maseur-birch.JPG" width="275" height="170"
alt="a small masuer birch pot"/>
<p> A beautiful piece of maseur birch turns into a dinky pot</p>
</div>
<div class="galleryphoto">
<img src="gallery/lovely-bowl.JPG" width="350" height="190"
alt="a beautiful bowl" />
<p> This bowl is a wondrous sight to behold
with its beautifully polished finish
it will brighten up your sideboard.</p>
</div>
<div class="galleryphoto">
<img src="gallery/2-tone-bowl.JPG" width="300" height="170"
alt="a two toned bowl"/>
<p> Two different woods stuck together to make
this attractive bowl which would grace any home</p>
</div>```
This is the code I put in following the book but having to use some pictures of my own as I am unable to download the code archive from the site as it doesn't seem to exist any more. I am looking at it in IE7 but only the first picture appears as it should ........the rest come up with the alt words and a small square with a cross in. I have looked to make sure that pictures are enabled to be seen and they are.
The trouble seems to be something to do with the gallery folder as anything else I try to do concerning this doesn't seem to work either??If the path and CaSe are correct it might be the image files are corrupt. Do they open OK locally?
There’s a typo in this line:
<img src=="gallery/dotty-pot.JPG" width="300" height="170"
alt="a dotty pot"/>
There shouldn’t be two = signs in there. src==
Offhand, I don’t see anything else wrong. You’re sure the actual pictures have the .JPG extension, not .jpg? Can you test in another browser?
Just to be clear, edgeog.JPG displays but the rest don’t - correct?
Edit: I’ve tested your code, substituting my own pictures, and apart from the one with the double ==, it works as expected. However, I don’t have IE7 to test on. It’s very old, so it’s possible that it’s just choking on that error and not managing to display any of the pictures after that. Fix the typo and see if that fixes everything. If not, then as I say, try to view it in a different browser and see if that works.
ooooops sorry didn’t spot those 2 -= but it makes no difference I just deleted one and tried it again. The pictures had .JPG ,I had .jpg first and then changed it to match pictures after you said it had to be exactly the same ,but it made no difference. I seem to be able to load pictures if I just have them all separately in the web folder but not if they are in a gallery folder in the web folder.
So, you have a web folder with your HTML pages in it, and inside that is another folder called “gallery”, which contains these images, right? And edgeog.JPG, which is inside the gallery folder, displays correctly, but none of the others do. Correct? Very weird - it ought to work, as far as I can see. Did you manage to try with a different browser?
(BTW, I’ve located the code archive for the book at http://www.sitepoint.com/store/build-your-own-website-the-right-way-using-html-css-3rd-edition/ if you want to try using those pictures - but it really shouldn’t make a difference, as long as your file names match exactly.)
Just downloaded chrome and looked at them in that and the same thing happens. Does it matter if the y are not in a gallery folder though …can I just have them all loose in the web folder?
Using a folder for the images is more a case of good housekeeping than anything else - it keeps things tidy, makes it easy to find the relevant images if you want to change them - that kind of thing. Once the site gets beyond a certain size, just having everything loose gets messy and confusing.
There must be a reason why there’s a problem here, and it shouldn’t be hard to fix. Your folder is definitely called gallery, not Gallery? And it’s inside your web folder? (Those are the two most obvious reasons I can think of for the images not displaying - but then, if one image from that folder displays, they all should. )
Can you upload the code for your full page here, so we can see if there’s anything else wrong that could be causing this. Alternatively, you could check the code in the W3C Validator (always a good thing to do), which will pick up any errors*. The section you posted above is error-free, apart from the ==.
*If you need help interpreting/fixing the results, just ask.
I just downloaded the code archive and replaced all my pictures with the ones on there and they all worked so it obviously my pictures> The only thing I can think of is should I make them smaller them before I try to put them in the folder? I was using them at the normal size and just putting the smaller numbers in the html.
Oh, brilliant - I’m glad it’s working.
Yes - asking the browser to resize an image is a lot of work, and the results are often less than optimal, so you should always resize your images for the web. It also saves a great deal on bandwidth. If you have several full-sized images on a pages, at maybe 2MB each, that’s a lot to download to display a page. Reduce them to size and optimise them, and they’ll probably each be under 30kb.
Thanks for your help I will just have to try to get my head round shrinking them now 
Well - if you need any assistance with that, you know where to come.
Your source has two equal signs.
Also, I recommend you use an absolute file reference by adding a slash before your directory like this…
<img src="/gallery/dotty-pot.JPG" width="300" height="170"
alt="a dotty pot"/>
Already pointed out.
OP is just learning, probably building locally, so best not to advise that at this stage, as it won’t work without a local dev environment.
1 Like