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 elissachapman
elissachapman
2,987 Points

Losing CSS styling in relative file paths-TextWrangler

Hi there. My apologies if this question is formatted incorrectly. I am using TextWrangler. I have 5 main pages for my site with file names such as "index.html", "Packing.html", "about.html" etc. In the "Packing.html" file I have put in relative links which go to files located in a folder named Gear. For example I have: <a href="Gear/Kindlereview.html">and this successfully links to the file "Kindlereview.html", located inside folder named "Gear".

However, the CSS styling is lost. If I take the file "Kindlereview.html" out of "Gear" and just link it as: <a href="Kindlereview.html"> then I don't have this problem, all the styles are there.

Can somebody please help me understand why this happens and how to fix it?

Many thanks in advance. Elissa

2 Answers

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I might know what's causing the problem but to give you helpful answer I need some more information maybe your question formatted wrong is creating some missing link.

So you put "Kindlereview.html" file in your "Gear" folder and your link between CSS file and "Kindlereview.html" is gone?

But when you put it out from "Gear" folder it worked again? That means you are not adjusting your relative path correctly.

Try adding ../ before your original relative path.

To address accurately I might need more precise information such as where is your CSS file reside in? Is folder containing your html files top level directory?

elissachapman
elissachapman
2,987 Points

Hi Gunhoo, Thank you very much for your answer. I have edited my original question so that the syntax appears correctly!

I have already tried adding it as: <a href="../Gear/Kindlereview.html"> But this way, it does not link to the file at all. The CSS file is in the top (root?) folder named "Website". This folder contains the index.html file, the CSS file plus other main pages. It also contains the folder named "Gear" which contains a number of other pages including "Kindlereview.html". I am trying to organise my pages into folders this way.

I hope this makes it clearer. Elissa

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

Well you are trying to target CSS file but you are using "../Gear/Kindlereview.html"???

Is this your file structure? (I'll only point the key ones)

|Website| --|
            |-- main.css
            |
            |-- index.html
            |
            |-- |Gear| -- |
                          |--Kindlereview.html

Troublesome file: Kindlereview.html (can't link to main.css)

Your Kindlereview.html head should contain this line

Kindlereview.html 
<head>
  <link rel="stylesheet" href="../main.css"> <!--This line-->
</head>
elissachapman
elissachapman
2,987 Points
elissachapman
elissachapman
2,987 Points

Gunhoo, Thank you very much. I did not know that if I moved "Kindlereview.html" down one directory I would need to change the stylesheet link.

Many thanks! Elissa

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

NP. Just need to remember importing external CSS file to current html file requires $lt;link$gt; not $lt;a$gt;.