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

Discussion in 'Webmastering & Programming' started by djoye, Oct 5, 2017.

  1. djoye

    djoye 2[H]4U

    Messages:
    2,491
    Joined:
    Aug 31, 2004
    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!?
     
  2. Doward

    Doward [H]ard|Gawd

    Messages:
    1,499
    Joined:
    Jul 3, 2004
    Preprocessor?
     
  3. modi123

    modi123 2[H]4U

    Messages:
    3,617
    Joined:
    Sep 6, 2006
  4. michalrz

    michalrz 2[H]4U

    Messages:
    2,640
    Joined:
    Jun 4, 2012
    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