Website css and javascript are not accessible within their respective folders

Question

My school offers a free website space for each student. I created a website with the following structure

 - index.html
 - main-site/
  - css/
     - bootstrap.css
     - style.css
  - img/
  - js/
 - help-docs/
 - template/

When I visit the site on my home machine, everything loads fine and the css is applied to the pages.

I then upload the folder to the root of my website for the school. I replace the default index.html with mine and place the folders in the same structure as before. But the problem is that when I open the page from the new endpoint, the css is not applied. None of the images are loaded and the website just looks bare.

I've tried changing the permissions of the folders and files to make them accessible but this does not seem to work. I even changed everything to 777 and it does not make a difference. I got one of my friends to try my website on his page and everything seems to be working well for him. So at this point I'm not sure what the problem is.

I should also add that the webserver is apache

So far, in my .htaccess file, I have the following:

DirectoryIndex website.html

I have also changed index.html to website.html and now accessing the website by using website.html rather than index.html still works fine apart from the inability to load css or js files.

Is this something that can be solved using a .htaccess file? If so, what could I add to it to make this work? Other solutions are welcome, although it should be noted that I do not have root access

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->

  <title>Light Wave Template | DesignBootstrap</title>
  <!-- BOOTSTRAP CORE CSS -->
  <link href="main-site/css/bootstrap.css" rel="stylesheet" />
  <!-- CUSTOM CSS -->
  <link href="main-site/css/style.css" rel="stylesheet" />
  <!-- HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
  <!-- HEADER SECTION START-->
  <section id="header">
    <div class="container">

      <div class="row text-center">

        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
          <h1>Light Wave Template </h1>
          <p>
            <strong>6 Style </strong> Versions
          </p>
          <h4>Click on the image to see demos</h4>
        </div>

      </div>
    </div>

  </section>
  <!-- HEADER SECTION END-->
  <!-- PREVIEW SECTION START-->
  <section id="preview">
    <div class="container">
      <div class="row text-center">

        <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 ">
          <h1>SEE DEMOS</h1>
          <h3> <a href="help-docs/index.html" target="_blank">See Document</a></h3>
        </div>

      </div>
      <div class="row">

        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/blue.html" target="_blank">
              <img src="main-site/img/previews/1.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Blue Color Version ( With slider background )
              </p>
            </a>
          </div>


        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/green.html" target="_blank">
              <img src="main-site/img/previews/2.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Green Color Version ( With slider background )
              </p>
            </a>
          </div>


        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/red.html" target="_blank">
              <img src="main-site/img/previews/3.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Red Color Version ( With slider background )
              </p>
            </a>
          </div>


        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/yellow.html" target="_blank">
              <img src="main-site/img/previews/4.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Yellow Color Version ( With slider background )
              </p>
            </a>
          </div>


        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/solid-black.html" target="_blank">
              <img src="main-site/img/previews/5.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Black Background Version ( With solid background )
              </p>
            </a>
          </div>


        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="preview-wrapper">
            <a href="template/solid-red.html" target="_blank">
              <img src="main-site/img/previews/6.png" class="img-responsive" alt="" />
              <hr />
              <p>
                Green Background Version ( With solid background )
              </p>
            </a>
          </div>


        </div>
      </div>

    </div>
  </section>
  <!-- PREVIEW SECTION END-->
  <!-- YES SECTION START-->
  <section id="yes">
    <div class="overlay">
      <div class="container">
        <div class="row text-center">
          <div class="col-lg-12 col-md-12">
            <span class="text-yes">Yes , You heard right !
                            <br />
                            its'free and with documentation</span>
          </div>

        </div>

      </div>
    </div>
  </section>
  <!-- YES SECTION END-->

  <!-- BOTTOM SECTION START-->
  <section id="bottom">
    <div class="container">

      <div class="row text-center">

        <div class="col-md-12">
          <h3>Want Some More ?</h3>
          <h4>EXPLORE : DesignBootstrap.com</h4>
        </div>
      </div>
      <div class="row text-center">

        <div class="col-md-12 ">
        </div>
      </div>
    </div>
  </section>
  <!-- BOTTOM SECTION END-->
  <!-- FOOTER SECTION START-->
  <footer>
    <div class="container">
      <div class="row text-center">
        <div class="col-md-12">
          &copy; 2015 <a href="http://www.designbootstrap.com/" target="_blank">DesignBootstrap.com </a>
        </div>
      </div>
    </div>
  </footer>
  <!-- FOOTER SECTION END-->
  <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
  <!-- CORE JQUERY SCRIPTS -->
  <script src="main-site/js/jquery-1.11.1.js"></script>
  <!-- BOOTSTRAP SCRIPTS -->
  <script src="main-site/js/bootstrap.js"></script>
</body>

</html>

I don't think this has to do with .htaccess. It sounds like a path problem. Can you post your index.html? — Brandon Smith
– Brandon Smith, Commented Feb 22, 2016 at 0:19
@BrandonSmith I just posted it. Like I said, my friend was able to do the same thing I did and his worked. So I don't think its a path issue — smac89
– smac89, Commented Feb 22, 2016 at 0:25
Have you tried reaching those files directly? What happens if you go to [path]/main-site/css/style.css in your browser? — BSMP
– BSMP, Commented Feb 22, 2016 at 0:26
@BSMP I get the error You don't have permission to access /~aaa111/main-site/css/style.css on this server. Wierd part is that if I replace my id with my friends', it works. So I think this is a problem with the way my files are configured on the main server — smac89
– smac89, Commented Feb 22, 2016 at 0:28
Are you sure that the permissions are 777? How about the directories? What permissions do they have? — Brandon Smith
– Brandon Smith, Commented Feb 22, 2016 at 0:28

Brandon Smith · Accepted Answer · 2016-02-22 00:38:07Z

1

Try creating a new directory outside of main-site and moving the files to that directory. This may fix the problem that you are experiencing.

Sounds like there may be a problem with file or directory ownership, but without being able to see it, I'm not exactly sure.

answered Feb 22, 2016 at 0:38

Brandon Smith

2401 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smac89 Over a year ago

That was great! Thank you!

smac89 · Accepted Answer · 2016-02-22 00:46:10Z

1

In addition to Brandon's answer, I found that the actual issue was that the directories I had copied over did not have the right permissions associated with them. After creating a temporary directory, I noticed that the folder had the permission 755

ls -ld tempdir
drwxr-xr-x 2 aaa111 student 4096 Feb 21 18:34 tempdir

Whereas the other folders had only permission 700

To fix, this I ran this command:

find main-site template help-docs -type d | xargs chmod 755

And now everything works well

answered Feb 22, 2016 at 0:46

smac89

43.8k15 gold badges150 silver badges204 bronze badges

Collectives™ on Stack Overflow

Website css and javascript are not accessible within their respective folders

Index.html

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Index.html

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related