So I'm new to webdesign, really new.

I recently started trying to follow tutorials about it but I'm having a hard time. I'm following one of those photoshop to html/css guides and even right at the beginning already having trouble.

The guide says to insert the image that you saved and do it like so.


<img src=”images/name of image.png” alt=”name of image” />

For my image it's like this.

<img src=”images/light-box.png” alt=”light-box” />

And it never shows up, it's just a broken image. It appears like this with any image I put in.

My folder structure is like this.

Images
Index.html
style.css

I've tried other browsers and it's the same thing.

What am I doing wrong here?


This is the code from the guide. Basically this guide in this part is trying to get you to insert a logo from a sliced up psd and the logo will be a link to the home page.


<div id=”container”>
<div id=”header”>
<ul id=”nav”>
<li id=”li_home” class=”selected”></li>
<a href=”index.html”>Home</a>

<li id=”li_work”><a href=”work.
html”>Work</a></li>

<li id=”li_about”><a href=”about.
html”>About</a></li>

<li id=”li_contact”><a href=”contact.
html”>Contact</a></li>

</ul>

<div id=”slogan”>

<h1><a href=”index.html”>Light Box</a></h1>


<img src=”images/light-box.png” alt=”Light Box” />

<p>Hi, we’re LightBox, a completely
made up design agency that specializes in fresh, clean web
design and graphics. <a href=”about.html”>Find out more.

<a></p>
</div><!-- end slogan-->
</div><!-- end header-->

So what exactly is the issue, did he miss a step? This guide is from jeff way from nettuts an established designer so I cant see that he missed something simple like this.

Add a forward slash to the image path to make it root relative.

/images/

That does nothing either.

Correct the case of the path to /Images or change the foldername to images

I don't understand what you mean by correct the case of the file path. I posted my directory of my folders and files, what is the issue of the file path?

I have a images folder containing my images, than a index and css file above it.

How do I get these images to show? I tried just about everything and nothing is working.

Originally Posted by jesbweb

correct the case of the file path

Upper case / Lower case. The directory structure you listed showed your images directory is "Images" whereas the file path (the src attribute in the img tag) is to a directory called "images". As ChrisHirst said you have to rename one or the other so that they match.

it's always better to keep everything lower case and don't have spaces in filenames (you can use names-like-this.html or names_like_this.html)

I'm sorry for the confusion, but I actually do have all my files and everything in lower case. My post wasn't typed out right, but that's not how I saved them. Everything is saved in lowercase, I'm aware of that being the best way of saving everything.

ah ok

I can think of 2 possible reasons why your page isn't linking to the image

Possibility #1
the quotes in index.html are as they appear in your post, ” instead of "
Solution: search and replace all instances of ” with "

Possibility #2
light-box.png is not in the images folder, it's been saved somewhere else instead
Solution: hmm, maybe save it in the right folder?

Better still


provide a LINK so we can stop guessing at what might be wrong

Originally Posted by Kelpie

I can think of 2 possible reasons why your page isn't linking to the image

Possibility #1
the quotes in index.html are as they appear in your post, ” instead of "
Solution: search and replace all instances of ” with "

Possibility #2
light-box.png is not in the images folder, it's been saved somewhere else instead
Solution: hmm, maybe save it in the right folder?

It's not the either of the two. Everything is in lowercase. And light-box.png is in the images folder. But I tested other images in the folder and they don't show up either, it's not an issue of the image not in the right folder.

What exactly can I link you to?

This is my mark up.

<div id=”container”>
<div id=”header”>
<ul id=”nav”>
<li id=”li_home” class=”selected”><a
href=”index.html”>Home</a></li>
<li id=”li_work”><a href=”work.
html”>Work</a></li>
<li id=”li_about”><a href=”about.
html”>About</a></li>
<li id=”li_contact”><a href=”contact.
html”>Contact</a></li>
</ul>
<div id=”slogan”>

<h1><a href=”index.html”>light-box</a></h1>
<img src="light-box.png" alt="light-box" />

<p>Hi, we’re LightBox, a completely
made up design agency that specializes in fresh, clean web
design and graphics. <a href=”about.html”>Find out more.
</a></p>
</div><!-- end slogan-->
</div><!-- end header-->

Here is my directory structure.

images
index
css

What exactly can I link you to?

A web page on a web server.

yes

Originally Posted by PaulW

What exactly can I link you to?

A web page on a web server.

Just make sure it is your page on your server that shows us the problem.

I think when you put link on your image you not give the value of border

for example : <a href="example.html" alt="example">Your image.png</a> (this can cause your image broken)
you should <a href="example.html" alt="example" border="0">Your image.png</a>

I hope this can help

Originally Posted by gongpex

I think when you put link on your image you not give the value of border


I hope this can help

How would adding an invalid attribute to the a href tag improve things?

when you using image as link for example:

<a href=yourlink">YOUR image</a>
withour border="0" it can cause underline at the image,

but in chrome it can't cause the underline.

But in firefox and opera it can

How does setting border width to zero affect the underlining of image elements???

you can try it using firefox browser. use image in JPG or PNG
when I still study, I had ever tried to make animation using PNG or JPG image that using margin taq,

and the results can cause underline that same as text when you not use CSS style
text-decoration:none;
--------------------------------------------------------------------------
By the way, why when I post my new thread it always deleted?
please give me answer or explanation