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

CSS

Posted by Noah Teitelbaum
Noah Teitelbaum
203 Points

fixing the folder structure in my text editor to allow normalize.css to run properly

I'm using sublime text 2 and can't seem to replicate the file structure I see demonstrated (cupcake project). My main tab--index.html-is listed above all the folders.

The effect seems to be that for images I need to put in the entire path to each image (C:/users...). That's OK (though I'd like to fix that), but now I'm trying to use normalize.css and while it's saved on my computer, and shows up in the text editor, It's not linking.

Here's the relevant code:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Smells Like Bakin' Cupcake Company</title>
<link rel="stylesheet" href=css/normalize.css type="text/css" media="screen">
</head>
<body>

And my file structure looks like this: OPEN FILES x index.html FOLDERS css img grid.css normalize.css style.css

I think all I need to do is reorganize this file structure, but I haven't been able to figure out how to do that. Thanks for your help.

Ibrahim Rodrí­guez
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points

Hey Noah, do you have a screenshot of your structure? Basically normalize.css should be inside the folder 'css'.

Noah Teitelbaum
Noah Teitelbaum
203 Points

Sure, but let's see if I can figure out how to load an image here!

Fixed?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Noah Teitelbaum - I fixed the syntax of for your image link, but it looks like the link is broken.

Noah Teitelbaum
Noah Teitelbaum
203 Points

Thanks, finally figured that out. Now onto the real issue!

3 Answers

J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points

Hi Noah,

It appears that normalize.css is inside of your 'img' folder, which is inside of your 'css' folder. In your code, you've got the stylesheet linking from "css/normalize.css." You can fix this using one of two methods:

  1. Move the normalize.css file from within the /css/img/ folder to just the /css folder. Note that you have 2 img folders - 1 is in the root and one is within your css folder. If you just move the normalize.css file so that it is a direct child of your css folder, your issue will be fixed.

  2. I don't recommend this method, but you can change the path in your code from

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

to

<link rel="stylesheet" href="css/img/normalize.css" type="text/css" media="screen">

This same concept should apply to your img tag issue - just move or copy whatever images you want to use in your code to your img folder, and then in the code type the path to the image relative from the index.html file.

Example:

You have an image called 'texture.png' in your /css/img/ folder. Since your index.html file is in your / folder (root), the code to link to 'texture.png' would look like this:

<img src="css/img/texture.png" />

Hope this helps. J.C.

Noah Teitelbaum
Noah Teitelbaum
203 Points

Thanks. That makes total sense (though I'm not seeing any of the code you wrote).

I simplified the folder structure:

But am still not able to get this to work. Argh! (This seems so unimportant to what I'm supposed to be learning, but it's making it difficult to continue.)

When i compare what I have to what I see in the lessons, I don't have my index file in the general folder structure, but the model does. I can't drag it around. Am I right that that is the issue? If so, how the heck do I fix it? Thank you.

J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points

Sorry about that Noah, I fixed my last post so you could see the code. Check out this screenshot. This is how your file structure should look:

http://d.pr/i/jm66/4usQXDIr

Noah Teitelbaum
Noah Teitelbaum
203 Points

JC, thanks for your help - I'm afraid your image isn't showing up.

If you're about to show me that index.html should be in the folder structure, not above it, I agree. I'm just not sure how to get it there.

J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points

Sorry about that - click the link in the post and you will be able to see the image.

Basically,

  1. Make a new folder.
  2. Move all files out of whatever folders they are currently in and into the new folder so that the structure looks something like this: -New Folder -index.html -normalize.css -grid.css -imagefile.jpg -imagefile2.png
  3. Then, create a folder called 'css' inside the 'new folder'.
  4. Create a folder called 'img' inside the 'new folder'.
  5. Move all your css files into the css folder from the new folder.
  6. Move all your image files into the img folder from the new folder.

  7. In your markup, you can then reference them in index.html:

    <link rel="stylesheet" href="CSS/normalize.css" type="text/css" media="screen" />

J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points

<link rel="stylesheet" href="CSS/normalize.css" type="text/css" media="screen" />

J.C. Hiatt
J.C. Hiatt
9,393 Points
J.C. Hiatt
J.C. Hiatt
9,393 Points 
<link rel="stylesheet" href="CSS/normalize.css" type="text/css" media="screen" />