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

Question

Hi fellow Treehouse students.

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

Answer 1 · 2014-05-18T17:13:32Z

May 18, 2014 5:13pm

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:

the footer anchor seems to have gotten lost
the photo it was supposed to link to has appeared on the home page,
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.

Answer 2 · 2014-05-18T19:02:36Z

May 18, 2014 7:02pm

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!

Answer 3 · 2014-05-17T23:58:47Z

May 17, 2014 11:58pm

please show us your code (see markdown cheatcheet)

Answer 4 · 2014-05-18T00:06:11Z

May 18, 2014 12:06am

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>

Answer 5 · 2014-05-18T00:27:06Z

May 18, 2014 12:27am

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

Answer 6 · 2014-05-18T00:29:47Z

May 18, 2014 12:29am

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.

Answer 7 · 2014-05-18T00:38:54Z

May 18, 2014 12:38am

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

Answer 8 · 2014-05-18T00:46:19Z

May 18, 2014 12:46am

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.

Answer 9 · 2014-05-18T00:48:00Z

May 18, 2014 12:48am

The error message reads "404 Not Found".

Answer 10 · 2014-05-18T01:06:32Z

May 18, 2014 1:06am

Hi Sean,

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

Answer 11 · 2014-05-18T01:17:27Z

May 18, 2014 1:17am

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.

Thanks guys.

Answer 12 · 2014-05-18T01:22:36Z

May 18, 2014 1:22am

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

Answer 13 · 2014-05-18T01:25:23Z

May 18, 2014 1:25am

<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

Answer 14 · 2014-05-18T02:05:28Z

May 18, 2014 2:05am

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! :)

Answer 15 · 2014-05-18T02:57:28Z

May 18, 2014 2:57am

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

Answer 16 · 2014-05-18T09:51:18Z

May 18, 2014 9:51am

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;
}

Answer 17 · 2014-05-18T18:37:34Z

May 18, 2014 6:37pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Sean Flanagan

Sean Flanagan

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

17 Answers

Xander Taylor

Xander Taylor

Xander Taylor

Xander Taylor

Xander Taylor

Xander Taylor

Donald McLamb

Donald McLamb

Sean Flanagan

Sean Flanagan

Xander Taylor

Xander Taylor

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Donald McLamb

Donald McLamb

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan

Xander Taylor

Xander Taylor

Donald McLamb

Donald McLamb

Sean Flanagan

Sean Flanagan

Sean Flanagan

Sean Flanagan