PHP Versions Question posted in
You can find a list of all versions here.

Why does the PHP version of an HTML file not show all the elements? – PHP Versions

I am converting a bunch of HTML files into their PHP equivalents for a University assignment gaming site. Currently I have an HTML file called "featured.html" and a php file called "featured.php". I use an echo statement to replicate the content of the html file and use a style.css for styling.
When I open the php file, it only shows the first 15 or so elements (out of approx 50). All the elements are present when I use the Inspect Element tool but it seems that I cannot scroll down in the php to see all the elements. Why does this happen?

I have looked at the questions Why does my PHP code not repeat HTML elements and Why does my form with php not show all the content?, but couldn’t get a satisfactory answer from either.

Below is the original html "featured.html":

<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
<!-- ...there are about 50 of these "item" divs, not the best way of going about it, but I have to build on previous work...-->
                <div class="item">
                    <a href="https://www.callofduty.com/"><img src="./img/giphy.gif"></a>
                    <span class="caption">Call of Duty Cold War | Dev: Activision | Genre: Shooter | Platform: All | Released: 2009/03/01 </span>
                  </div>
                </div>
         </section>
    </body>
</html>

And below is the featured.php file:

<?php

include './header.php';
include './footer.php';

echo '<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
             <!-- The rest of the echo statement contains the same content as the html and so is omitted -->            <div class="item">
              <a href="https://www.nomanssky.com/"><img src="./img/giphy.gif"></a>
              <span class="caption">No Mans Sky | Dev: Hello Games | Genre: Adventure | Platform: All | Released: 2016/10/09 </span>
            </div>   
        </div>
        </section>
    </body>
</html> ';
?>

Is there any explanation as to why this would happen? The echo statement contains an exact replica of the html code and all the other styling elements seem to work. Any help would be greatly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, so I've managed to fix the problem by moving the "include './header.php'" and "include './footer.php'" to where the header and footer would occur within the html at @pavel's suggestion. I thought that it wouldn't matter since their positions are defined within the style.css, but this was not the case. So the updated featured.php file now looks as follows:

    <?php

echo '<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    ';
    include './header.php';
    echo '
    <body>
        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
<!-- ... --> 
            <div class="item">
              <a href="https://www.nomanssky.com/"><img src="./img/giphy.gif"></a>
              <span class="caption">No Mans Sky | Dev: Hello Games | Genre: Adventure | Platform: All | Released: 2016/10/09 </span>
            </div>   
        </div>
        </section>
    </body>
    ';
    include './footer.php';
    echo '
</html> ';

?>

  2. 0

    Only use PHP where needed

    PHP files can handle mixed output and php tags. Maybe that is not the problem, but can make finding the solution easier.

    <!DOCTYPE html>
<html>
    <head>
        <script src="jquery-3.6.0.js"></script>
        <script src="api-control.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title> Convergence Gaming | Welcome </title> 
        <link rel="stylesheet" href="./css/style.css"> 
        <meta name="viewport" content="width=device-width">
    </head>
    <body>

<?php include './header.php'; ?>

        <section id="featuredpage">
            <div class="myGallery">
                <div class="item">
                  <a href="https://www.monsterhunter.com/rise/us/"><img src="./img/giphy.gif" /></a>
                  <span class="caption">Monster Hunter Rise | Dev: Capcom | Genre: Action | Platform: Nintendo | Released: 2012/06/02 </span>
                </div>
                <!-- The rest of the echo statement contains the same content as the html and so is omitted -->
                <div class="item">
                    <a href="https://www.nomanssky.com/"><img src="./img/giphy.gif" /></a>
                    <span class="caption">No Mans Sky | Dev: Hello Games | Genre: Adventure | Platform: All | Released: 2016/10/09 </span>
                </div>   
            </div>
        </section>

<?php include './footer.php'; ?>

    </body>
</html>

    Is doctype the problem?

    The only real difference is the declaration of the doctype at the beginning of your PHP code: <!DOCTYPE html>. That is probably not your issue..?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search