简体   繁体   中英

Is it possible to include 2 html pages in the same php file?

I have an index.php file and I'm trying to include the header and footer (html files) in it. They are both bootstrap based and I just made a few customizations in header.html . If I include only the header file there's no problems at all and index.php is displayed as expect but when I include both files (hearder/footer.html), for some reason, my css doesn't display the changes (only displays the default values of the bootstrap). This is the problem I would like to solve. I will ask another question too:

  1. I have several pages that have the same header and footer. The goal here is not repeating code. Is this the better way to include these elements (header/footer)? Am I doing it right?

    These are the files I'm using:

    • This pen shows the modifications that should be displayed in the index.php file.
    • This file represents the main file (index.php)
    • This file contains the header.html
    • This file contains the footer.html

I realized that if I comment the include of footer.html in the main file index.php it's content is displayed and everything works right.

Actually, Your footer.html also includes CSS stylesheets which override the header.html's stylesheets.

You can do something like this

*Header.html

<html>
<head>
 add all the stylesheets here or combine them
</head>
<body>
<navigation>
</navigation>

*footer.html

<footer information goes here>
add javascript here

</body>
</html>

*index.php

include ('header.html')

content goes here

include('footer.html')

Your Header and footer are resetting the CSS when loaded. You only need to link your CSS in the header. Think of it as creating 1 document out of 3, you only need to reference the material once.

Use this PHP to include your files and then fix your HTML files

<?php 
    require_once ('header.html');
?>

//do stuff

<?php 
    require_once('footer.html'); 
?>

In your header

    <!DOCTYPE html>
<html>
<head>
    <title>Header</title>
    <meta charset="UTF-8">         

    <!-- Latest compiled and minified CSS -->
    <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" type="text/css" href="../css/navbar.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-WDM-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                 <a class="navbar-brand" href="#">
                    <img alt="Brand" src="../img/fb_favicon.jpg">
                 </a>
            </div>

            <div class="collapse navbar-collapse" id="bs-WDM-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./index.php">home</a></li>
                    <li><a href="./about.php">about</a></li>
                    <li><a href="./projects.php">projects</a></li>
                    <li><a href="./contact.php">contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

HERE IS WHERE YOUR MAIN BODY CONTENT WOULD BE PLACED

//Do Stuff

In your footer

footer class="footer">
                <div class="container">
                    <div class="col-md-4">
                        <p>Copyrights</p>
                    </div>
                    <div class="col-md-8">
                        <p>links here</p>
                    </div>
                </div>
            </footer>  
        </body>
    </html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM