uploaded documents on the web server are not functioning as expected

I've been having issues with my school website. Everything works fine when I work on it locally using tools like Atom or Wamp, but once I upload the files to my web server (an old laptop running Ubuntu 18.04 with a LAMP server), the CSS files, images, and href links stop working. I believe this is due to a problem with file paths that work locally but don't work when uploaded to a Linux server because of the "../" directing to the root directory or something.

Here's how the index.php file looks locally: https://i.sstatic.net/nt8Tb.jpg

And here's what it looks like on the webserver: https://i.sstatic.net/B6ycQ.png

This is how my files are organized (generated using the tree command in Windows cmd):

C:.
|   index.php
|   README.md
|   tree.txt       
+---css
|       accueil.css
|       footer.css
|       header.css
|       
+---fonts
|       Lato-Black.ttf
|       Lato-BlackItalic.ttf
...

...
... more contents listed within the same format...
...

...
\---viepro
        formation.css
        formation.php
        viepro.css
        viepro.php

Below are snippets of some of my files:

index.php (in the main directory of my site)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="../IMAGES\favicon\favicon-32x32.png">
    ...
    ... 
    ... more code follows
    ...

My header file (located in /includes/header.html) - linked css is in /css/header.css

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/header.css">
  ...
  ... 
  ... more code follows
  ...

One example of a page on the site (only including one example as they all have the same layout)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="../../IMAGES\favicon\favicon-32x32.png">
    
    ...
    ... 
    ... more code follows
    ...

If anyone can provide assistance or guidance on why the CSS files, images, and fonts are not linking properly on the server after uploading, I would greatly appreciate it. Thank you for taking the time to read this!

Answer №1

It seems like using

"../../IMAGES\favicon\favicon-32x32.png"
as a file path on a web server may not work properly. If your site is xxx.com and your images are in the (webroot)/images/ directory, you should link to

/images/favicon/favicon-32x32.png

The same goes for CSS files - ensure that the directories match up correctly. For example, if you are trying to link to the webroot directory with

<link rel="stylesheet" href="connaitre_la_cftc.css">

but your CSS files are actually in a css folder, you may want to try

<link rel="stylesheet" href="/css/connaitre_la_cftc.css">

instead.

Without being able to see the live page, it's difficult to provide specific guidance. If you're unsure if something is loading correctly, inspect the page source and try accessing the file directly by right-clicking, selecting "inspect source," and clicking on the href link to see where it's trying to load from. You can then adjust the file paths on your server until everything works smoothly.

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

Double loading issue with jQuery AJAX

I'm currently working on a website and I've encountered an issue. Below is the jQuery code that I am using: $('input[type="text"][name="appLink"]').keyup(function() { var iTunesURL = $(this).val(); var iTunesAppID = $('i ...

Issues with Thunderbird not displaying copied HTML emails

Hello there amazing people at Stackoverflow. I need some assistance with HTML formatting. I am currently working on a bootstrap modal that is being dynamically modified through jQuery using the append() function. Check out the code snippet below: <div ...

Utilizing CSS to Display a Variety of Colors within a Text String

Is it possible to style different words in a sentence with various colors using only CSS, without using the span element? For instance, how can I make the word "Red" appear in red, "Blue" in blue, and "Green" in green within an h1 tag? ...

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

Browser tries to interpret Javascript code as a file organization system

Encountering an issue while trying to load my website. When I open index.html in my browser, I receive a problem loading page message. This response is puzzling as it does not indicate a file loading error. Here's a snippet of the response: Firefox c ...

AngularJs fails to apply style to dynamic content in IE8 when using HTML5

Currently, I am in the process of developing a website with AngularJs and utilizing numerous JS scripts to address compatibility issues with Internet Explorer. I have organized the data in JSON format, and each page is designed to fetch and display differ ...

Tips for managing the velocity of JavaScript navigation scrolling

Hey everyone, I recently discovered this incredibly helpful JavaScript sticky side navigation script and it works like a charm! However, since I don't know much about JS, I was wondering if there's a way to slow down the scrolling speed? functio ...

Change all lowercase characters to uppercase in the font file

: I recently created a .ttf font file, but unfortunately only included capital characters. Is there a tool or simple method I could use to automatically create lowercase versions of each letter? For instance, when typing "hello" the font should display ...

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

Creating a dynamic PHP navigation menu with Bootstrap 4 sub-menus

ORIGINAL QUESTION I am struggling with creating a navigation menu in PHP using Bootstrap 4. The issue I'm facing is that one of the <li> elements, specifically the one with the class dropdown, is not behaving as expected. Instead of turning int ...

There seems to be a glitch in the JavaScript to-do list as it is failing to append new

My attempt at creating a to-do list is not working when I try to add a new entry. Any suggestions? Also, I plan to implement a feature that can calculate the percentage of tasks completed by crossing them off the list. <html> <head> <titl ...

The navbar-fixed-top class in Bootstrap seems to be malfunctioning

As I work on expanding my portfolio website using Bootstrap, I decided to incorporate the 'navbar-fixed-top' class to make the navigation bar stick to the top of the window. I found a helpful example of this feature here: https://getbootstrap.co ...

Searching for elements in Selenium using Python without a specified name

Looking for some assistance here. I'm trying to use Selenium to access a search field, but it doesn't have a name or ID in the html code. How can I locate and interact with this search field using Selenium? View the HTML code snippet for the sea ...

Reposition various div elements within a static container

Struggling to align div boxes like the image below was exhausting: I attempted fixing it with the code provided in this JSBIN link. How can I resolve the issue and adjust the layout as desired? Any help would be greatly appreciated. Thank you in advance ...

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

What is the process for generating a HORIZONTAL navigation bar in a CGI Perl script?

Currently, I have a CGI page called Login.cgi. It features a form where I must input the correct password to be redirected to another page named Main.cgi. On this new page, my goal is to incorporate a HORIZONTAL menu containing options like UsersList, Logs ...

Creating a user authentication portal

Looking for advice on creating a basic front end HTML login. I'm new to coding and would appreciate any suggestions! Additionally, how can I link the login system to my database? ...

Angular Universal 9 disrupts the functionality of Bootstrap CSS directives

My application runs perfectly fine with npm run start. However, when I try npm run build:ssr and npm run serve:ssr, it doesn't function properly without throwing any errors. While running npm run start, there's a button with 65% opacity. The des ...

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...