I would like to get advice here on easy and most efficient way to have a generic or global header and footer for an html code.
Below is my html code - I have different CSS files for styling. In the middle section - there are different header tabs and sub-headers within each header tab, this then takes you to a specific page.
I have different files for each page - I'd like to have same header and sub-header on each page such that, if there is a need to correct anything within the header section, I can just adjust in one file without having to go through the pages to update.
I have tried .js and php but to no success, perhaps it's my code.
<!DOCTYPE html>
<html>
<head>
<title>wwwpanysite</title>
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/content.css">
</head>
<body>
<div class="header">
<div class="left-section">
<img class="company-logo" src="icons/company new logo.png">
</div>
<div class="middle-section">
<div class="navbar-header">
<a href="#home">Home</a>
<div class="subnav">
<button class="subnavbtn">About<i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="pages/about-business-goals-values.html">Business Goals & Values</a>
<a href="etc">etc1</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Candidates<i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="pages/candidate-feedback.html">Feedback</a>
<a href="pages/candidate-subit-cv.html">Submit CV</a>
<a href="etc">etc2</a>
</div>
</div>
</div>
</div>
</div>
<div class="right-section">
<button>Submit CV</button>
</div>
</div>
</body>
I would like to get advice here on easy and most efficient way to have a generic or global header and footer for an html code.
Below is my html code - I have different CSS files for styling. In the middle section - there are different header tabs and sub-headers within each header tab, this then takes you to a specific page.
I have different files for each page - I'd like to have same header and sub-header on each page such that, if there is a need to correct anything within the header section, I can just adjust in one file without having to go through the pages to update.
I have tried .js and php but to no success, perhaps it's my code.
<!DOCTYPE html>
<html>
<head>
<title>wwwpanysite</title>
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/content.css">
</head>
<body>
<div class="header">
<div class="left-section">
<img class="company-logo" src="icons/company new logo.png">
</div>
<div class="middle-section">
<div class="navbar-header">
<a href="#home">Home</a>
<div class="subnav">
<button class="subnavbtn">About<i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="pages/about-business-goals-values.html">Business Goals & Values</a>
<a href="etc">etc1</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Candidates<i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="pages/candidate-feedback.html">Feedback</a>
<a href="pages/candidate-subit-cv.html">Submit CV</a>
<a href="etc">etc2</a>
</div>
</div>
</div>
</div>
</div>
<div class="right-section">
<button>Submit CV</button>
</div>
</div>
</body>
- 1 This question is similar to: Common Header / Footer with static HTML. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Filburt Commented Mar 29 at 16:53
1 Answer
Reset to default 0You will need some server-side code to put your page together. A PHP example:
<!DOCTYPE html>
<html>
<head>
<title>wwwpanysite</title>
<?php
foreach ($links as $link) {
?>
<link rel="stylesheet" href="<?php echo $link; ?>">
<?php
}
?>
</head>
<body>
<div class="header">!-- Header stuff here --></div>
<?php
echo $body;
?>
</body>
</html>
Of course, this page needs to get an array called $links that will contain the URLs of the links you want to load and a $body to represent the structure. I did not delve too much into the second one, as we speak of the header mainly. You will have some other PHP file that prepares the variables you need and you can include the layout.php (the content above from that one).