Following the upload process, my webpage is mistakenly referencing the wrong directories

After completing a mock site project, I encountered an issue where the styling was perfect locally but did not show up once uploaded to my server and Github pages. Looking into the console, I found this error message:

Failed to load resource: the server responded with a status of 404 (Not Found) style.css Failed to load resource: the server responded with a status of 404 (Not Found) /favicon.png Failed to load resource: the server responded with a status of 404 (Not Found) reset.css Failed to load resource: the server responded with a status of 404 (Not Found) style.css Failed to load resource: the server responded with a status of 404 (Not Found)

Upon further inspection in DevTools, I noticed that in my "resources" directory there were two folders, CSS and CSS_reset, that do not actually exist. Additionally, the HTML references "css" instead of "CSS," causing a break in the styling. Here is a snapshot of my server's directory tree:

https://i.sstatic.net/H2BvD.jpg

Below is the HTML code referencing the CSS:

<link href="./resources/CSS_reset/reset.css" type="text/css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
  <link href="./resources/CSS/style.css" type="text/css" rel="stylesheet">
  <link rel="icon" href="/favicon.png" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css?family=Monoton%7COpen+Sans:400,600,700" rel="stylesheet">

Here is the link to the Github repository:

https://github.com/pauljhollis/jumpstart

This is the first time I have experienced this issue after uploading multiple pages to both the server and Github. Any help or suggestions would be greatly appreciated.

Edit: Issue resolved. The code was altered without my knowledge, changing "css" to "CSS" and adding "CSS_reset" which does not exist on my computer. This change occurred unexpectedly while working on a different machine than usual. Thank you for the assistance and pointing out the mistake. It went unnoticed at first.

htmlcss

Answer №1

To get started, consider:

<link href="../resources/CSS/style.css" type="text/css" rel="stylesheet">

Another option is utilizing a base tag...

<base href="https://www.[yourwebsite].com/resources/" target="_blank">

...and then referencing the resource accordingly:

<link href="CSS/style.css" type="text/css" rel="stylesheet">

It's important to pay attention to the CSS directory. Verify that it matches exactly as on the server. Some servers differentiate between uppercase and lowercase letters, so if the directory is named "css" but you refer to it as "CSS", it may not be located.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connect ng-models with checkboxes in input field

I am facing an issue with binding ng-models using ng-repeat in an input checkbox tag. Let me share my code and elaborate further. app/main.html: <div ng-repeat="feature in features"> <input type="checkbox" ng-model="features[$index].name"> ...

javascripthtmlangularjscheckboxangular-ngmodel

Dynamically loading various compositions of EDGE

I'm currently working on developing a testing system for edge-animate compositions. The goal is to be able to load different compositions and verify that they are displaying correctly, as well as make changes to their customizable fields. I attempted ...

javascripthtmladobe-edge

Grid of domes, fluid contained within fixed structures and beyond

I've been grappling with this issue for a while now, and have had to rely on jQuery workarounds. I'm curious if there is a way to achieve this using CSS or LESS (possibly with javascript mixins). The page in question consists of both fixed and f ...

javascripthtmlcssgridless

Finding the identifier of a dynamically generated text input using PHP

I am looking to create a page similar to this On this page, users can add multiple entries for date, site, start time, end time, and hours amount by clicking the + button, and remove entries using the - button. How can I retrieve the input values in PHP? ...

javascriptphpjqueryhtml

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

javascriptjquerycssanimation

Struggling to make HTML5 validation function properly

I'm struggling to make HTML5 validation work in conjunction with AngularJS. Instead of displaying the error message, the form is submitted even when a field is required. If anyone has any insights on how to successfully implement HTML5 validation wi ...

angularjshtmlvalidation

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

Eliminate any additional spacing or padding surrounding the text input field

Is there a way to adjust the inner padding of a text field? Currently, when entering text in an HTML text field, there is padding at the beginning and end. The numbers I am inputting have no more than 3 digits, and the current padding takes up about the wi ...

htmlcss

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

htmlcsstwitter-bootstrap

What is the process of incorporating HTML into a jQuery program in order to immerse the world in an element?

I am looking to utilize HTML with the value in a checkbox, After adding a shortcode: <label class="HCheck">(this is val 1 )</label> and incorporating jQuery to change it to: <label class="HCheck">(this is val 1 ) ...

javascripthtmljqueryloopsdom

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

javascriptjqueryhtmlcss

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

javascriptjquerycss

What is the method for integrating an element into a different flow using the position property?

How can I solve the following issue: I am working with a carousel markup that has the same HTML structure as shown below. <div> // Contains the carousel slide <div> <ul> <li><img src={....} /></li> <li ...

csssassscss-mixinssplidejsscss-functions

Using DataTable with backend processing

Has anyone successfully implemented pagination in DataTable to dynamically generate the lengthMenu (Showing 1 to 10 of 57 entries) and only load data when the next page is clicked? I'm currently facing this challenge and would appreciate some guidance ...

javascriptjqueryhtmljsondatatables

Tips for capturing changes in a "count" variable and executing actions based on its value

I have a counter on my webpage and I'm trying to change the style of an element based on the count variable. I tried using the .change action but I haven't been able to get it working. It might not be the right solution. Can anyone provide some ...

javascripthtmljquerycounter

Achieving proper variable-string equality in Angular.js

In my Angular.js application, I am utilizing data from a GET Request as shown below. var app = angular.module('Saidas',[]); app.controller('Status', function($scope, $http, $interval) { $interval(function(){ ...

javascripthtmlangularjs

Using AngularJS to dynamically swap out {{post.title}} with a different HTML file

I want to update the value of {{post.title}} within my HTML to redirect to another HTML file. <div ng-repeat="post in posts"> <h2> {{post.title}} <a ng-click="editPost(post._id)" class="pull-r ...

javascripthtmlangularjs

JavaScript Tutorial: Extracting the text content of a drop event

Curious about extracting the text value from a drop event, I set out to find an answer. To my surprise, I discovered that it's not as straightforward as I thought. Check out the demo below: <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtmlajax

Utilize Jquery to insert new text into a textbox and then organize the contents of the textbox using Jquery

Currently, I am utilizing the ASP.NET asp:checkboxlist control which consists of 36 listitems, displaying 36 checkboxes. The HTML representation resembles a table format. My goal is to dynamically add checked items in this div in a sorted manner. Additiona ...

jqueryasp.nethtmljquery-ui