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
Stetson Robison
1,906 PointsImages not showing up.
I used my own images. But then i went through and just used Nick's instead. But now none of my images are appearing when i preview it. Any help would be great!
Stetson Robison
1,906 Points/*************************************** 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%;
}
h3 { margin: 0 0 1em 0; }
/*************************************** 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: 'Changa One', 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; }
.social-icon { width: 20pox; height: 20px; margin: 0 5px; }
/*************************************** PAGE: REVIEWS ***************************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
/*************************************** PAGE: ABOUT ***************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/*************************************** COLORS ***************************************/
/* site body */ body { background-color: #000; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav backgroun on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
4 Answers
Stetson Robison
1,906 Pointshonestly, it might just be Workspace. Since i started off with other pictures and stuff, and now I'm trying to change it all up. It might just not do it correctly. If i just create an .html on notepad and open it, it works just fine. So...i think it's just workspace.
Jose Mendoza
UX Design Techdegree Graduate 19,788 PointsYeah.. try refreshing, or even closing and reopening it again. I've had workspaces mess with me too, recently. It would just stop making changes. But I found that if I restart (close and reopen) workspaces, everything goes back to normal. I know it can be frustrating.
Jose Mendoza
UX Design Techdegree Graduate 19,788 PointsHey Stetson,
I noticed in your gallery that some of your list items do not have any ending list tags. Make sure that all of your list items close.
Stetson Robison
1,906 Pointsyeah i actually just noticed that, i closed all of the list items. but it's still not showing the pictures :/
Michael Loschiavo
7,267 PointsHey Stetson Robison ,
I noticed that your image tags are not closed properly. You must put a / at the end of the tag (before >). Here is an example:
<img src="myExample.png" alt="Closed_on_right" />
Also, I noted that you are missing body and head tags. Not sure if this is snip-its from your code or what you have in your workspace.
Let me know if this helps
Stetson Robison
1,906 PointsStetson Robison
1,906 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stetson's Gallery | Photos</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Stetson Robison</h1> </a> <h2 id="logo">Gallery</h2> <nav> <ul> <li><a href="index.html" class="selected">Gallery</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="numbers-01.html"> <img src="img/numbers-01.jpg" alt=""> </a> <p>1st Picture</p> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> </a> <p>2nd Picture</p> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> </a> <p>3rd Picture</p> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> </a> <p>4th Picture</p> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> </a> <p>5th Picture</p> </li> </ul> </section> <footer> <a href="https://facebook.com/stetzor"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a> <a href="https://twitter.com/stetsoncrobison"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a> <p>© 2016 Stetson Robison.</p> </footer> </div> </body> </html>