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
Denise Diaz
7,103 PointsCSS not showing up on page
On the video "details" for some reason the CSS won't work on the new webpage. The CSS works on the previous webpages however it won't work on the new one. What could cause this?
2 Answers
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,175 PointsIt sound strange for me that CSS works on one page, but does not work on another...
I can tell you things that you have to check, to make CSS work, but otherwise, the only way I can help you if you share a project on a GitHub and share a link here, so that I can take a look
1. Set publicFileLocation in Main.java
public class Main {
// code
public static void main(String[] args) {
// This line means whatever you put in
// "src/main/resource/public" will be available on the web
staticFileLocation("/public");
// code
}
}
Compare your file to Craigs Main.java
2. In .hbs file where CSS broke, use {{> base.hbs}}
So for example in youridea.hbs CSS does not work.
Make sure that you have that line at the very bottom.
{{> base.hbs}}
Here is idea.hbs from Craigs repo.
3. in base.hbs link to CSS should be right
The last thing to check is whether the CSS is actually included in the file.
{{#block "header"}}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{#block "title"}}Welcome to Course Ideas{{/block}}</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<!-- Other code -->
PS.
You can also compare your files and Craigs repo or to re-watch video.
But it is pretty strange that CSS does not work on one page.
The only reason that comes up, Maybe, you forgot to include {{>base.hbs}.
Otherwise, have to see the code
Kareem Jeiroudi
14,984 PointsHad the exact same issue, was going crazy, and couldn't tell where the problem is. Thanks a lot for posting it 👍!
Denise Diaz
7,103 PointsDenise Diaz
7,103 PointsThank you for your response. My problem was that I had this:
href="css/main.css">
rather than having this: href="/css/main.css">
I still don't know why this would cause the CSS to only appear on the previous pages.
Alexander Nikiforov
Java Web Development Techdegree Graduate 22,175 PointsAlexander Nikiforov
Java Web Development Techdegree Graduate 22,175 PointsGreat!
I was able to reproduce the error!
Relative path leads to error
Indeed when you write
<link rel="stylesheet" href="css/main.css">Spark will find CSS for ALL following pages with ONE slash, i.e.
http://localhost:4567/ideashttp://localhost:4567/http://localhost:4567/whateverHowever when you go to
detailpage with TWO slashes:http://localhost:4567/ideas/qwewqewIt will NOT work, because Spark uses relative paths, i.e. he is looking for
http://localhost:4567/ideas/css/main.cssIndeed if you go to Developer Tools, you can see picture like this with error
https://drive.google.com/open?id=0B-PasBhXWCeES1Rxb2N3MHM4MFE
Absolute path solves the problem
When you use
<link rel="stylesheet" href="/css/main.css">He is looking for
http://localhost:4567/css/main.cssAnd that is exactly where your static files lie.
PS. Using Developer Tools
If you want to dive into Web Development, start learning to use Browser Developer Tools
Craigs has made a nice Workshop about it check it out.
Mastering this tool will help you debug Web App much faster!