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

Issues with Adding Grid CSS and Working with Grids

Hello!

I am actually having trouble with both Adding and Working with Grid CSS. I have watched and followed through the tutorial videos. However, I just can't get it to work.

I downloaded the project file that contains normalize.css and grid.css. However, when I begin coding in sublime text 2, and when I add the links of normalize.css and grid.css to the html file, I don't see any effect at all. I tried this using my on codes and photos, and also, tried the code as shown in the video, but I still don't get the effects I am supposed too. Can anyone please help me out?

Thank you!

11 Answers

Tricia Martin
Tricia Martin
19,604 Points

This

css/grid.css

is a relative pathway. Meaning it isn't the full pathway, it is only giving part of the information in relation to the folder that it is in.

To find the absolute pathway of the file on your Mac you can open your terminal then drag the grid.css file into that and it will show you the absolute pathway, which should look similar to this:

/Users/tricia/Desktop/websitewaters-island01-stage03/css/grid.css 

This would be different if your Web site was online, for example the absolute pathway for the treehouse forums would be https://teamtreehouse.com/forum, but since you're working with local files, it'll look more like the one above.

Here is a reference that may explain it better than I can. http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

Chase Lee
Chase Lee
29,275 Points

Can you please post your links.

Tricia Martin
Tricia Martin
19,604 Points

It might have something to do with where the files are stored. Do you have the css folder in the same folder as your index.html file?

Everything needs to be in the same folder. Like in the tutorial he has a folder called 'Web' and inside that is the 'css' folder, 'img' folder, and index.html file. If you have those files elsewhere it will change the pathname so the link "css/grid.css" would not be the path to that file.

The links i used were link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"

link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"

I place <> at the beginning and the end of the code too. Not sure why, it doesn't appear as comment when I place those brackets. Sorry if i confuse you.

And, I believe the css folder is in the same folder as the index.html file. Because when I downloaded the project file, I did not move around any files or folders.

Tricia Martin
Tricia Martin
19,604 Points

It is probably being finicky about where the file is. Treehouse is having you link to the css file using a relative pathway, instead of the absolute pathway (meaning it is relative to where the file is vs using the whole pathway.) You can try using the full pathway. Are you on using Windows or Mac?

Sorry if this is confusing.

I'm sorry but I don't quite understand about using relative and absolute pathway. I am using a Mac.

Alright, I'll definitely try it out. Thank you so much!!

Just wanted to let you all know, I managed to solve it. Really appreciate your time and help. THANK YOU !

Tricia Martin
Tricia Martin
19,604 Points

No problem. Was that what was wrong or was it something else?

Naima Arif
Naima Arif
2,596 Points

I had a similar problem. Fixed it by putting the css folder into the folder where my index.html file was located. thanks for your help :)

Lydia Tsai
Lydia Tsai
6,509 Points

Nevermind, I just had a typo. :)

I am having issues with this. I have changed the relative pathway to the absolute several times. Double checked and triple checked everything but nothing seems to work. The index.html file is in the same folder as the css folder which contains the normalize.css and the grid.css file. How is this fixed?

<link rel="stylesheet" href="/users/mac/desktop/web/css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="/users/mac/desktop/web/css/grid.css" type="text/css" media="screen">