Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Bijan Fardjad
Bijan Fardjad
1,775 Points

my logos dont appear right in my code

this i my code for my contact page...i did the code just like the videos said i think, but my logos dont show the actual pictures for the phone and email in this code...but mjjust show weird repeating shapes across the screen. Do you think anyone can take a look at this code and tell me why the code doesnt show what I want it to show?

<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bijan Fardjad | Music / Video Game Artist </title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/responsive.css">

</head> <body> <header> <a href="index.html" id="logo"> <h1>Bijan Fardjad</h1> <h2>Video Game / Music Artist</h2> </a> <nav> <ul id="pages">

     <li><a href="index.html">Music</a></li>
     <li><a href="contact.html">Contact</a></li>
     <li><a href="gameCode.html">Game Code</a></li>
     </ul>


   </nav>
   </header>
  <div id="wrapper">
    <section>
      <img src="img/Bijan's Picture.png" alt="Picture of Bijan Fardjad" class="profile-photo">
    <h3>
      The Journey to Ultimate Knowledge / Wisdom and Beyond...
      <p>
      Hello,  I'm Bijan,  I am on a neverending journey to improve my skills in music,  programming,  video game production,  etc...
      </p>
    </h3>
    </section>
    <section>
    <h3>
      Contact Info  
    </h3>
      <ul class="contact-info">
        <a href="img/mail.png" alt="">
        <img src="img/mail.png" alt="mail"></a>
      <li class="phone"><a href="tel:415-236-0638">415-236-0638</a></li>
        <li class="mail"><a href="mailto:dudeshadowbjon@gmail.c0m">dudeshadowbjon@gmail.com</a></li>


      </ul>
    </section>
    <footer>

      <a href="https://twitter.com/DudeBjonShadow"><img src="img/twitter-wrap.png" alt="Twitter"></a>
  <a href="https://www.facebook.com/bijan.fardjad.3"><img src="img/facebook-wrap.png" alt="Facebook"></a>

       <p>&copy; 2015 Bijan Fardjad</p>
    </footer>
  </div>
 </body>

</html>

and the below code is the actual index.html page so if you need to look at that too :

<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bijan Fardjad | Music / Video Game Artist </title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">

</head> <body> <header> <ul> <div id="Bijan"> <a href="index.html" id="logo"> <h1>Bijan Fardjad</h1> <h2>Video Game / Music Artist</h2> </a> </div> </ul> <nav> <ul id="pages">

     <li><a href="index.html">Music</a></li>
     <li><a href="contact.html">Contact</a></li>
     <li><a href="gameCode.html">Game Code</a></li>
     </ul>


   </nav>
   </header>
  <div id="wrapper">
    <section>
      <ul id="gallery">
      <li>
        <a href="img/piano1.jpg">
        <img src="img/piano1.jpg" alt="">
          <p>This is a picture</p>
          </a>
      </li>
         <li>
        <a href="img/piano2.png" alt="">
        <img src="img/piano2.png" alt="">
          </a>
      </li>
         <li>
        <a href="img/numbers-02.jpg">
        <img src="img/numbers-01.jpg" alt="">
          </a>
      </li>

      </ul>
    <p>Gallery will go here</p>
    </section>
    <footer>

      <a href="https://twitter.com/DudeBjonShadow"><img src="img/twitter-wrap.png" alt="Twitter" class="icons"></a>
  <a href="https://www.facebook.com/bijan.fardjad.3"><img src="img/facebook-wrap.png" alt="Facebook" class="icons"></a>

       <p>&copy; 2015 Bijan Fardjad</p>
    </footer>
  </div>
 </body>

</html>

Bijan

Kaung Myat Lwin
Kaung Myat Lwin
1,943 Points
Kaung Myat Lwin
Kaung Myat Lwin
1,943 Points

Can you show the screenshot of the problem?

Bijan Fardjad
Bijan Fardjad
1,775 Points

its not a problem or challenge but just something I had a question on the html files i did through the videos. Bijan

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Perhaps I'm missing something here, but because your code is being displayed in multiple code outputs, I am not seeing closing tags on #Bijan or on the a tag right beneath it. Also, I don't see where your nav element is opened, but I can see where it is closed...?

Can you please display your code for each file in its own code output so we can see exactly what is going on?

1 Answer

AFIR MOURAD TAHAR
AFIR MOURAD TAHAR
3,766 Points
AFIR MOURAD TAHAR
AFIR MOURAD TAHAR
3,766 Points

Hi ,

Jake, The div for the wrapper ID is there

I think it is because you are not putting the right headers to your document.

you are starting directly with meta:

it should be:

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

....

etc

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Yes, the #wrapper div is fine. I am saying that there is no closing tag for the #Bijan div...If you look, there are two divs being opened here, but there is only one closing div tag visible...i am looking at the code for the index.html page in regard to this...not the contact page.

and yes, the head tag is not there...all the meta, title, and link information should be wrapped in a head tag