Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Creating HTML Content Build the Footer

Sean Flanagan
Sean Flanagan
33,232 Points

My photo won't show when I click on the link in my footer.

Hi fellow Treehouse students.

Is there any reason why my photo won't show when I click on the footer link please?

17 Answers

do you have a file named "Sean.jpg" located in a folder named "img" that is at the same level as the html file that this code is saved in? Because that is what your "src" for your <img> is looking for. Is the picture still not displaying? If so, I would check that your capitalization of sean matches the file, also that the file extension .jpg is lowercase because some applications make it caps (.JPG) and that throws things off sometimes.

As I understand it, these are your questions:

  1. the footer anchor seems to have gotten lost
  2. the photo it was supposed to link to has appeared on the home page,
  3. the text colour of the anchors appears to have changed to grey

I'm not sure what you mean by #1. Your code makes the image a link, in a section called footer. Do you mean that it's not "linking" to the place you want it to? That's what the "href" attribute of the anchor tag does so think about where you have that pointing.

Likewise, I'm confused about what your problem is for #2. You have only shown us html for one page, looks like the file is index.html. Is that what you are calling home page? Is your issue that the image you want to appear in the footer is showing up somewhere else besides the footer?

The third point is easily answered. Look at your "footer" css rule again. You have changed font color in the footer to #ccc but you did not stipulate that you want that color to govern text that is in a paragraph tag inside of a footer. So, as you noticed, the cascade tells the browser that your paragraph should get styled like all other paragraphs on the page, grey. Can you see what the correction needs to be there? I don't want to just tell you the answer but if you need more help, let me know.

It's no problem Mr. Flanagan! I'm glad I can help. As you might already know, we never really understand a thing until we try to teach it! That's why I try to spend as much time on the forums as possible because it helps me too! Also because tons of people have helped me over the last year so I want to try to give back.

Keep thinking hard and asking questions! Feel free to tag me anytime. I'll try to help whenever I have the know-how!

please show us your code (see markdown cheatcheet)

Donald McLamb
Donald McLamb
2,867 Points

Hi Sean,

As Xander mentioned it is hard to help without seeing the code.

Your link should look something like this:

<a href="img/image.jpg">
    <img src="img/image.jpg">
</a>
Sean Flanagan
Sean Flanagan
33,232 Points

Sorry for the delay chaps, I haven't had the chance to reply. Which code? HTML, CSS or both?

you probably only changed the CSS right? For us to best be able to help you, copy and paste the question, the error message (what it tells you about why you're not passing) and the code you wrote/changed. it doesn't show up in the forum automatically so we're shooting in the dark until you show us.

Sean Flanagan
Sean Flanagan
33,232 Points

Okay I'll send both sets of codes, just for the sake of thoroughness.

Here's my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sean Flanagan | Medical Records Clerk</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,900|Roboto+Condensed' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sean Flanagan</h1>
        <h2>Medical Records Clerk</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="Selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with colour and texture.</p> 
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
            </a> 
          </li>
          <li>
            <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repetition.</p>
            </a> 
          </li>        
        </ul>
      </section>
      <footer>
        <a href="img src="img/Sean.jpg" alt="">
        <p>&copy; 2014 Sean Flanagan.</p>
      </footer>
      </div>    
    </body>  
  </html>

Next, the CSS:

/********************
General
********************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}
/***************************
Heading
***************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Roboto', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/***************************
Navigation
***************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/***************************
Footer
***************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

/***************************
Page: Portfolio
***************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/***************************
Colours
***************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* blue header on teal border */
header {
  background: blue;
  border: 3px solid teal;
}

/* navigational background on mobile */
nav {
  background: red;
}

/* magenta links */
a {
  color: magenta;
}

nav a, nav a:visited {
  color: white;
}

/* selected navigational link */
nav a.selected, nav a:hover {
  color: #0000ff;
}

I know this is a ton of code, but I hope this helps. Thank you. :-)

Sean

Sean Flanagan
Sean Flanagan
33,232 Points

I replaced Nick Pettit's footer link with a link to my own photo. And since I'm not on Facebook or Twitter, I've removed their icons from my page.

Sean Flanagan
Sean Flanagan
33,232 Points

The error message reads "404 Not Found".

Donald McLamb
Donald McLamb
2,867 Points

Hi Sean,

I don't see a footer tag or any anchor tags in your html.

Sean Flanagan
Sean Flanagan
33,232 Points

I'll try again. This time I'll type it instead of copying and pasting it, as every time I've copied and pasted here from Workspaces, the html gets distorted. And I'll limit it to the footer to save time.

<footer> <a href="img/Sean.jpg" alt=""> <p>© 2014 Sean Flanagan.</p> </footer>

Thanks guys.

Sean Flanagan
Sean Flanagan
33,232 Points

Is it showing up all right? Because I've typed the anchors in and they don't show on my screen.

Sean Flanagan
Sean Flanagan
33,232 Points
<footer>
<a href="img src="img/Sean.jpg" alt="">
<p>&copy; 2014 Sean Flanagan.</p>
</footer>

My fault for not reading the Cheat Sheet. I didn't include the back-ticks. Can you see the code now?

It's 2:52 in the morning here and I can't keep my eyes open so I'd better get some sleep. I'll respond to any subsequent replies at a more civilised hour, I promise. Thanks :-)

Sean

if you want to include an image, use the <img src="#" alt=""> tag. You are mixing links and images. They're not the same thing. You can mess around with this JS Fiddle I made that uses placeholder images if you need some more practice.

Let me know if you need more help. And get some sleep! :)

Donald McLamb
Donald McLamb
2,867 Points

Hi Sean,

I was having issues pasting code earlier as well when I was trying to give you a suggestion.

<a href= "img/image.jpg" >
    <img src= "img/image.jpg" >
</a>

the href needs to equate to the file of what is being linked, you have it equating to part of an html tag, so it just needs to be restructured a little.

<a href= "img/Sean.jpg" >
    <img src= "img/Sean.jpg" >

</a>

Also links need a closing tag:

</a>

Hope that helps

Sean Flanagan
Sean Flanagan
33,232 Points

Hi Xander and Donald. Just keeping my promise to respond to future messages on this thread.

Okay, I've surrounded the previous code posted to this thread with three back-ticks either side. As for the page, the footer anchor seems to have gotten lost, the photo it was supposed to link to has appeared on the home page, and the text colour of the anchors appears to have changed to grey, the same as the plain text. I've no right to ask, after all the help you've given me, but am I still doing something wrong? Thanks and I hope I haven't exhausted your goodwill. :)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sean Flanagan | Medical Records Clerk</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,900|Roboto+Condensed' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sean Flanagan</h1>
        <h2>Medical Records Clerk</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="Selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with colour and texture.</p> 
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
            </a> 
          </li>
          <li>
            <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repetition.</p>
            </a> 
          </li>        
        </ul>
      </section>
      <footer>
        <a href="img/Sean.jpg"><img src="img/Sean.jpg" alt=""></a>
        <p>&copy; 2014 Sean Flanagan.</p>
      </footer>
      </div>    
    </body>  
  </html>
/********************
General
********************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}
/***************************
Heading
***************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Roboto', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/***************************
Navigation
***************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/***************************
Footer
***************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

/***************************
Page: Portfolio
***************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/***************************
Colours
***************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* blue header on teal border */
header {
  background: blue;
  border: 3px solid teal;
}

/* navigational background on mobile */
nav {
  background: red;
}

/* magenta links */
a {
  color: magenta;
}

nav a, nav a:visited {
  color: white;
}

/* selected navigational link */
nav a.selected, nav a:hover {
  color: #0000ff;
}
Sean Flanagan
Sean Flanagan
33,232 Points

Hi Xander. I'm sorry for not mentioning at the beginning of this thread that I have a mild form of high-functioning autism and this makes communication and interaction difficult for me. Consequently, unfamiliar situations can be a trifle stressful for me, as I find them hard to make sense of.

I've deleted the photo of me from the footer in my Portfolio page and restored the footer anchor. The photo is now on my About page. I started my name with a capital S, the same as on my desktop, and this file is in my img folder. The tutor didn't mention case-sensitivity (to my memory) so I assumed it wouldn't be a problem. And I've changed the anchor text back to magenta.

After all this perseverance, I think I've fixed it now. I clicked on the footer anchor and now my photo is showing up there, as intended. And using "border-radius" I've stuck the same photo on my About page, only it's circular as I expected.

You've been very patient under these circumstances and I'll never forget it. Thank you Xander. :)

Sean