CODEWITHSUNDEEP
phphtmlcss
noblerare
noblerare

Reputation: 11893

Why is my PHP website not rendering any CSS nor links?

I had a personal website a while back (2016-2018) running on PHP 7.1 and everything was going fine. Recently, I spun it back up again to make some changes, upgraded my local PHP web server to 7.4 and I come to find out that for some reason, none of my CSS renders on the page. They appear to be loaded via the <head> tag. In addition, when clicking on any of my links which ought to take me to other internal pages just gives me a 404 error. Finally, none of the images will load either. However, if I navigate to the path directly, the images and css files are all there.

Let's say I'm running my PHP server on http://localhost:8080. If I navigate to http://localhost:8080/img/mylogo.png, I can see the picture but on the website itself, I don't.

I took a look at my production site being hosted on a web hosting platform. Everything actually appears fine (CSS and images render nicely). However, the links are still broken. Why is that?

Can anyone help me out?

header.php

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">


        <script src="https://use.fontawesome.com/8c321ca885.js"></script>

        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700" >
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700" >
        <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" href="css/header.css">

        <link rel="shortcut icon" href="img/logo.png" type="image/x-icon">

index.php

<?php include ('header.php'); ?>

        <title>My Homepage</title>
        <link rel="stylesheet" href="css/index.css">

    </head>

    <body>
            <?php include ('titleNav.php'); ?>

            <div class="row">
                <div>
                    <a href="mypage1">
                </div>

                <div>
                    <a href="mypage">
                </div>

                <div>
                    <a href="mypage3">
                </div>
            </div>

            <?php include ('footer.php'); ?>
        </div>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="js/index.js"></script>
    </body>
</html>

EDIT:

When opening the developer tools console, I get a whole bunch of 404 Not Found errors like so:

GET http://localhost:8000/img/mylogo.png 404 (Not Found)

Upvotes: 0

Views: 112

Answers (1)

dylzee
dylzee

Reputation: 421

Had this issue recently. In my case, I needed to move the entire project up one directory. So depending on what you're using as your local server and how your directories are set up, my guess is that's where the problem lies, not necessarily the code which looks fine.

Upvotes: 1

Related Questions