I downloaded a free template, added to my project. I try to run the PHP file index.html from the template - it runs without styles:

 <?php require '/views/index.html';

The index.html file itself ( also on IDEOne ):

 <!DOCTYPE HTML> <!-- Synchronous by TEMPLATED templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license) --> <html> <head> <title>Synchronous by TEMPLATED</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href='http://f...content-available-to-author-only...s.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'> <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]--> <script src="http://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-panels.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel-noscript.css" /> <link rel="stylesheet" href="css/style.css" /> </noscript> <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]--> </head> <body class="homepage"> <div id="wrapper"> <!-- Header --> <div id="header"> <div class="container"> <!-- Logo --> <div id="logo"> <h1><a href="#">Synchronous</a></h1> <span>Design by TEMPLATED</span> </div> <!-- Nav --> <nav id="nav"> <ul> <li class="active"><a href="index.html">Homepage</a></li> <li><a href="threecolumn.html">Three Column</a></li> <li><a href="twocolumn1.html">Left Sidebar</a></li> <li><a href="twocolumn2.html">Right Sidebar</a></li> <li><a href="onecolumn.html">No Sidebar</a></li> </ul> </nav> </div> </div> <!-- /Header --> <div id="page"> <div class="container"> <div class="row"> <div class="3u"> <section id="sidebar1"> <header> <h2>Sidebar 1</h2> </header> <ul class="style3"> <li class="first"> <p class="date"><a href="#">Oct <b>03</b></a></p> <p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent urna congue rutrum. </a></p> </li> <li> <p class="date"><a href="#">Sep <b>30</b></a></p> <p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent urna congue rutrum.</a></p> </li> <li> <p class="date"><a href="#">Sep <b>27</b></a> </p> <p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent urna congue rutrum.</a></p> </li> </ul> </section> </div> <div class="6u skel-cell-important"> <section id="content" > <header> <h2>Lorem Ipsum Dolor</h2> </header> <p>This is <strong>Synchronous</strong>, a responsive HTML5 site template freebie by <a href="http://t...content-available-to-author-only...d.co">TEMPLATED</a>. Released for free under the <a href="http://t...content-available-to-author-only...d.co/license">Creative Commons Attribution</a> license, so use it for whatever (personal or commercial) &ndash; just give us credit! Check out more of our stuff at <a href="http://t...content-available-to-author-only...d.co">our site</a> or follow us on <a href="http://t...content-available-to-author-only...r.com/templatedco">Twitter</a>.</p> <p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo.</p> <p>Sed etiam vestibulum velit mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget lorem ipsum dolor.</p> <a href="#" class="button">Full Article</a> </section> </div> <div class="3u"> <section id="sidebard2"> <header> <h2>Sidebar 2</h2> </header> <ul class="style1"> <li class="first"><span class="fa fa-check"></span><a href="#">Maecenas luctus lectus at sapien</a></li> <li><span class="fa fa-check"></span><a href="#">Etiam rhoncus volutpat erat</a></li> <li><span class="fa fa-check"></span><a href="#">Donec dictum metus in sapien</a></li> <li><span class="fa fa-check"></span><a href="#">Integer gravida nibh quis urna</a></li> <li><span class="fa fa-check"></span><a href="#">Etiam posuere augue sit amet nisl</a></li> <li><span class="fa fa-check"></span><a href="#">Mauris vulputate dolor nibh</a></li> <li><span class="fa fa-check"></span><a href="#">Nulla luctus eleifend purus</a></li> </ul> <a href="#" class="button">Full Article</a> </section> </div> </div> </div> </div> <!-- Footer --> <div id="footer"> <div class="container"> <div class="row"> <div class="3u"> <section id="box1"> <header> <h2>Nulla facilisi</h2> </header> <ul class="style3"> <li class="first"> <p class="date"><a href="#">10.03.2012</a></p> <p><a href="#">Vestibulum sem magna, elementum ut, vestibulum facilisis. Nulla facilisi. Cum sociis natoque penatibus.</a></p> </li> <li> <p class="date"><a href="#">10.03.2012</a></p> <p><a href="#">Pellentesque erat erat, tincidunt in, eleifend, malesuada bibendum. Suspendisse sit amet in eros bibendum condimentum. </a> </p> </li> </ul> </section> </div> <div class="6u"> <section id="box2"> <header> <h2>Donec dictum metus</h2> </header> <div> <a href="#" class="image full"><img src="images/pics02.jpg" alt=""></a> </div> <p>Nulla enim eros, porttitor eu, tempus id, varius non, nibh. Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl.</p> </section> </div> <div class="3u"> <section id="box3"> <header> <h2>Gravida ipsum</h2> </header> <ul class="style1"> <li class="first"><a href="#">Pellentesque quis elit non lectus eleifend purus condimentum.</a></li> <li><a href="#">Lorem ipsum dolort, consectetuer adipiscing dictum metus sapien.</a></li> <li><a href="#">Phasellus nec dictum metus in sapien pellentesque congue.</a></li> <li><a href="#">Cras vitae metus aliquam risus dictum metus in sapien pharetra.</a></li> <li><a href="#">Duis non dictum metus in sapien ante in metus commodo euismod lobortis.</a></li> </ul> </section> </div> </div> </div> </div> <!-- Copyright --> <div id="copyright"> <div class="container"> Design: <a href="http://t...content-available-to-author-only...d.co">TEMPLATED</a> Images: <a href="http://u...content-available-to-author-only...h.com">Unsplash</a> (<a href="http://u...content-available-to-author-only...h.com/cc0">CC0</a>) </div> </div> </div> </body> </html>

I launch the HTML file directly in the same browser (Chrome) - styles work. I sat for a long time and tried to understand what the reason was, but it never comes to me - what difference does it, do I open it manually or does php do it. It turns out there is a difference, and in the second case, the styles for some reason are not connected.

Who knows why?

  • The manual says that it works not only with php, did you get information from the ceiling? Yes, and even if you rename the file, the styles are still not connected - lupti_du
  • php.su/require () "Thus, the require construct allows you to build PHP scripts from several separate files, which can be either html pages or php scripts." The paths are correctly registered, it starts when I manually launch this file - lupti_du
  • Uncaught SyntaxError: Unexpected token <this is what the console says - lupti_du
  • hmm, in index.html you have all references to styles and scripts relative, and where does the php file lie? - Blacknife
  • project folder, in the root project folder, and index.html and js css folders images in the same as index.html. But this is not the reason, I noticed the difference that when I launch myself, there are no errors in the console, and when I launch via php, what Uncaught SyntaxError writes: Unexpected token <skel-panels.min.js: 1 Uncaught SyntaxError: Unexpected token <init.js: 1 Uncaught SyntaxError: Unexpected token <skel.min.js: 1 - lupti_du

2 answers 2

In the console, look at all the paths and if they open the files correctly. In js, too, paths can be spelled out, and it is possible that something needs to be changed there.

    In Chrome, you can open the console and see if the links to * .css are given correctly - it is possible that the path to the style is entered incorrectly when the script is run. Change the path to the styles relative to the PHP-script, now you have it registered with respect to HTML.