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
Jane Marianne Filipiak
7,444 PointsHow to get images to display in browser?
Can anyone else see why I can't get images to display on the browser page? This isn't a trick question. Here is the code and file paths: folder(substring1)/sub-folder(css);sub-folder(images);index.html file.
`` body { padding: 0 22%; background-color: #e0eef5; color: #222; font: 1.1em/1.5 sans-serif; } ul { padding: 0; list-style-type: none; line-height: 2.5; } img { margin-right: 20px; }
/* Substring Matching Attribute Selectors */
a[href^="http://"] { color:seagreen; } a[href^="mailto:"] { color:white; background-color: tomato; padding: 4px 8px; text-decoration: none;
}
a[href$=".pdf"] { background:url('..images/pdf.png') no-repeat 0 2px; padding-left: 25px; }
a[href$=".doc"] { background:url('../images/doc.png') no-repeat 0 2px; padding-left: 25px; }
`` <!DOCTYPE html> <html> <head> <title>Substring1</title> <link rel="stylesheet" href="css/substring_startstyle.css"> </head> <body> <h1>Substring Matching</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <a href="http://www.foo.com">labore et dolore</a> magna aliqua. Ut enim <a href="foo.html">ad minim veniam</a>, exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="http://www.foo.com">Deserunt culpa qui officia</a> mollit anim id est laborum. </p> <ul> <li><a href="file.pdf">View PDF Document</a></li> <li><a href="file.doc">View Word Document</a></li> </ul> <h2>Thumbnails</h2> <img src="images/sky_thumbnail.jpg" alt="sky" /> <img src="images/forest_thumbnail.jpg" alt="forest" /> <img src="images/ocean_thumbnail.jpg" alt="ocean" /> <p> <a href="mailto:mikethefrog@teamtreehouse.com">Send me an email!</a> </p> </body> </html>
``
4 Answers
Andreaus Perkins
14,402 PointsThe url paths should begin the same (if the images are in the same folder). You appear to be missing a " / " in the line about pdf.
Here's more info about file paths: http://css-tricks.com/quick-reminder-about-file-paths/
I hope you get it figured out.
Andreaus Perkins
14,402 PointsAre all of the images not showing up, or just some?
Looking closing at your code:
a[href$=".pdf"] { background:url('..images/pdf.png') no-repeat 0 2px; padding-left: 25px; }
a[href$=".doc"] { background:url('../images/doc.png') no-repeat 0 2px; padding-left: 25px; }
You might want the file paths for the background image to have a similar path structure. That one small change may be the solution to your problem.
Jane Marianne Filipiak
7,444 PointsHi, thank you! In answer to your questions above: All the images are not showing up. How do I make the file paths for the background image have a similar structure?
Jane Marianne Filipiak
7,444 PointsThe info you sent me has been helpful. I also looked back at the first project: how to make a website. it showed me something about filepaths too. Cheers and have a great day!