Loaded styles and css but not displaying properly

So I tried to import a web HTML CSS template into my self-made MVC.
When I open the template itself it works properly. But when I access it through my controller it can not connect to CSS files and does not display proper style. Only blank HTML without any styles.
This is how I am trying to access it

class NewsController {

public function actionIndex()
$newsList = array();
$newsList = News::getNewsList();

require_once 'views/index.php';

return true;



This is code from HTML head where it links the CSS

<link rel="stylesheet" href="css/animate.css" >
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/style.css">


this is how folders are located(highlited the controller, and views folders is a full template ) folders tree:

EDIT
I checked with inspec all the elements are loaded but do not display any styles. Whats the matter?

3 Answers
3

You need to add './' at start of CSS paths. This allow browser to use absolute file path.

'./'

./ is has nothing to do with an absolute file path. It just marks the current direcory.

If you want to use the absolute filepath, do it with php or the equivalent in your template language:

<link rel="stylesheet" href="<?php echo __ DIR __ . DIRECTORY_SEPARATOR . 'blogv4' . DIRECTORY_SEPARATOR . 'views' . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR . 'animate.css'; ?>" />


?>

EDIT: Due to the image of your folder tree you can write:

<link rel="stylesheet" href="blogv4/views/css/animate.css" />


You need to enter the path from your bootstrap file (e. g. index.php), which contains your header.

__DIR__

Make sure the PHP script (in your case, the index.php handling the request) that's calling your Controllers lives in your document root where your assets are.
And, if I am the one, I'd write an helper function for handling my assets, like

<?php
function asset($resource)
$link = preg_replace('///', DIRECTORY_SEPARATOR, $resource);
return $link;

?>


Like that, you can render the absolute path of where your assets are by adding the protocol and domain prefix in front on the return value.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.