Load page styles after php inserts html

StackOverflow https://stackoverflow.com/questions/22433493

  •  15-06-2023
  •  | 
  •  

Question

I have my index.php call to insert a html section during the page load:

index.php:

<html>
  <head>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <!-- navigation -->
    <?php include 'navigation.html'; ?>
  </body>
</html>

navigation.html:

<div>
  <p class="paragraph-inline">Welcome to the amazing navigation system!</p>
</div>

Ok, it's an simple example, the jist of the matter is that at the moment the navigation.html is rendered entirely before being inserted into the page. This means the css is not being called and can only be called if I include the css within the html blob.

I would prefer not to include css into every blob (footer, header, etc...)

So how can I force the site to load the html and apply the styles afterwards? I only want one css link at the top of the main page.

Was it helpful?

Solution

Your navigation should be .php as well. I'm not sure if there are options as far as syntax, but I write it like this <?php include("whatever-partial.php"); ?> This has never been an issue for me. I usually make a head.php with the boring stuff, and then include that in the header.php - and then an index.php - which pulls in header.php and footer.php for example. The server reads all that php - and spits out an html page that is served to your browser and applies the styles. It's not dynamic.

OTHER TIPS

Make sure your include is a php file - then it will be inserted into the page before the browser gets ahold of the page and renders the css. Should be simple as that.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top