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

Posted by Eric Hartman
Eric Hartman
708 Points

Apple Search Bar

I integrated code I found at, http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/, to add a search bar to the "Smells Like Bacon" site. In the demo, they use <style> tags to add the css directly to their HTML page. I tried to remove these tags and place the code in a separate CSS file; however, when i do this I get a broken link for the images.

I have tried placing the images in multiple different file locations and no matter what I do the image does not work unless i define the CSS classes in the main HTML file using the <style> tag. Does anyone know why?

2 Answers

Noah Cooke
Noah Cooke
2,608 Points
Noah Cooke
Noah Cooke
2,608 Points

Did you link to the extra stylesheet from the index.html?

Eric Hartman
Eric Hartman
708 Points

Yup, i tried this. Its the last <link rel> in the header. Let me know if you cant see the below code.

<link rel="stylesheet" href="css_files/searchbar.css" type="text/css" media="screen">

Andrey Soloviev
Andrey Soloviev
1,501 Points
Andrey Soloviev
Andrey Soloviev
1,501 Points

Eric,

In your CSS file, instead of: url(search-dark.png)

Try this: url(../search-dark.png)

It might solve your problem.