CODEWITHSUNDEEP
phphtml
user8548643
user8548643

Reputation:

header, footer divs placement in separate files

Given basic html structure: divs: wrapper, header, content, footer - can i separate the divs through files like:

header.php

<body>
<div id=wrapper>
<div id=header></div>
<div id=content>

index.php

footer.php

</div><!-- End of content -->
<div id=footer></div>
</div><!-- End of wrapper -->

Seems that this way I can push most of unnecessary html out of the way to focus on coding content.

The problem with includes is that my wrapper and content divs starts on one file and end on another which generates eclipse editor visual warning and annoys me with it (hey mate, there's something wrong, u need to fix this... "yellow triangle with !" symbol on all folder structure)

Upvotes: 2

Views: 591

Answers (2)

Intervalia
Intervalia

Reputation: 10935

PHP allows you to include additional files into the one currently running, with the include or require statement.

This will allow you to have a common header and footer that are included on the server so that you only have one page returned to the browser without needing to request additional HTML pages.

header.php

<header>Place your header content here</header>

footer.php

<footer>Place your footer content here</footer>

index.html

<html>
<body>

<?php include 'header.php';?>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

Upvotes: 6

Mr. Roshan
Mr. Roshan

Reputation: 1805

Load the html files for header & footer from script just shown in following example.

$("document").ready(function(){
    $("#header").load("header.html");
    $("#footer").load("footer.html");
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
     <head>
     </head>
     <body>
          <div id="header">
               <!-- Content in header goes here -->
          </div>
          <div id="Content">
                <!-- Content -->
          </div>
          <div id="footer">
                <!-- Content in footer goes here -->
          </div>
     </body>
</html>

Upvotes: 0

Related Questions