Help with modular page elements (PHP or CSS?). Need search terms.

djoye

djoye

2[H]4U
Joined
Aug 31, 2004
Messages
3,114
I'd like to learn more about what I would call 'modular' web page elements, but I don't know what search terms to use. For example, I'd like to be able to have a navigation bar that isn't hard-coded in each page, but is loaded from another single source. I've read that PHP could insert code from a specified HTML file and I've seen some page elements, such as images, defined in CSS files and then called in the HTML file so I assume I could define an entire nav bar in a CSS element and then reference the element in the web page. I would rather use the CSS method, but whatever works is good.

At this point, I don't know what to search for to figure out how to properly implement something like this. What is this called!?
 
CSS would let you apply style to your navbar but you'd still need the html markup for it included in each page along with the CSS file. You could also place the CSS inline, in HEAD, like below:

Code: 
<html>
   <head>
      <style type='text/css'>
         .navbarContainer{
             height:5em;
             font-weight: bold;
             width: 90%;
             border: 1px solid red;
             margin:auto;
             text-align:center;
         }
      </style>
   </head>

   <body>
       <div class='navbarContainer'>
            <p>Choose your destiny</p>
            <a href='somewhere.html'>Somewhere</a>
       </div>
   </body>
</html>

Now, to avoid repeating, you'd want to use php and include like modi123 said.

The <?php include('somewhere.html'); ?> call would go below the navbar markup, as the 'content'.

The navbar (<div class='navbarContainer'>) can just be cut and pasted into a file called, say, navbar.html or navbar.php and inserted the same way as shown above.

Also, the CSS (without the <style> tag) can be thrown in a separate file like style.css and placed next to the main html page.

Then, you just place the following in your HEAD:
Code: 
<link rel="stylesheet" type="text/css" href="style.css">

You dig? :D

If the <?php blocks fail to execute and are simply printed out, try changing your html file's extension to .php
 
  • Like
Reactions: djoye
like this
Thanks, folks. I'll likely use the php include since that will likely offer the most portable solution.
 
How about using Client-side JavaScript/JQuery ? I use that snippet below on hard-dc.com to load the footer for each page; and will also change the bootstrap-navbar similar. This allows to an easy way to define the header/footer only once (or few versions) and load as needed. I have yet not seen negative impact due to this (cross-site constraints sure apply; but file comes from the same server)


<footer class="harddc_footer" id="harddc_footer"></footer>

<script>

// load the footer on each page
$(function()
{
$("#harddc_footer").load("../harddc_footer.html");
});
</script>
 
djoye said:
I'd like to learn more about what I would call 'modular' web page elements, but I don't know what search terms to use. For example, I'd like to be able to have a navigation bar that isn't hard-coded in each page, but is loaded from another single source. I've read that PHP could insert code from a specified HTML file and I've seen some page elements, such as images, defined in CSS files and then called in the HTML file so I assume I could define an entire nav bar in a CSS element and then reference the element in the web page. I would rather use the CSS method, but whatever works is good.

At this point, I don't know what to search for to figure out how to properly implement something like this. What is this called!?
Click to expand...

You could create a text file that has your links for the nav bar in an unordered list using HTML and wrapped in <? php ?> tags. Then all the pages you want to have the nav bar use PHP to include that .php text file. You can further use CSS to style those HTML list elements.
 
  • Like
Reactions: djoye
like this
I'll throw my 2 cents here, take it for what it's worth;

I use a templating system called "smarty". I highly recommend a templating system to anyone who is outputing html from their php scripts.
 
You must log in or register to reply here.
Back
Top