"Include_once" makes html display differently

Question

I decided to use Include_once for my websites navbar because im constantly changing the text and links and doing it file by file is tedious.

but for some reason when I use include_once to include the navbar it makes certain elements of the website display differently, for example a table at the bottom of the page will appear stretched or a box will be twice the size it should be.

example of my include_once navbar file -

<html>
<header>
<div class="headbot">
    <div class="container">
        <div class="navbar navbar_ clearfix extra">
          <div class="nav-collapse nav-collapse_ collapse">
      <ul class="nav sf-menu">
        <li class="active"><a href="index.html"><strong class="text">Home</strong><span>Home</span></a></li>
        <li><a href="http://google.com/"><strong class="text">News</strong><span>News</span></a>
          <ul>
            <li><a href="CaseStudy.html"><strong class="text">Case Studies</strong></a></li>
            <li><a href="http://google.com"><strong class="text">Latest News</strong></a></li>
            <li><a href="Events.html"><strong class="text">Upcoming Events</strong></a></li>
          </ul>
        </li>
        <li><a href="ContactUs.html"><strong class="text">Contact Us</strong><span>Contact Us</span></a></li>
      </ul>
    </div>
        </div>
    </div>
</div>

and including it like this at the top of my index.php

<?php
include_once('includes/navbar.php');
?>

anyone have any thoughts ?

include the file in the exact location were your navigation was — madalinivascu, Nov 17 '15 at 12:05
that opening `` tag without doctype, body and head tags seems wrong to me — Elias Van Ootegem, Nov 17 '15 at 12:05
You are missing doctype, body, head. I only wonder how will the HTML be rendered. — Ashish Choudhary, Nov 17 '15 at 12:07
Yet another **HTML 101** course not being followed to a "T". — Funk Forty Niner, Nov 17 '15 at 12:08

Can O' Spam · Answer 1 · 2015-11-17T12:11:56.550

My suggestion is to add DOCTYPE, head and body tags (and to close your open tags) as follows:

<!DOCTYPE html>
<html>

<head>
    <title>My Title</title>
</head>

<body>

    <header>
        <div class="headbot">
            <div class="container">
                <div class="navbar navbar_ clearfix extra">
                    <div class="nav-collapse nav-collapse_ collapse">
                        <ul class="nav sf-menu">
                            <li class="active">
                                <a href="index.html">
                                    <strong class="text">Home</strong>
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="http://google.com/">
                                    <strong class="text">News</strong>
                                    <span>News</span>
                                </a>
                                <ul>
                                    <li>
                                        <a href="CaseStudy.html">
                                            <strong class="text">Case Studies</strong>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="http://google.com">
                                            <strong class="text">Latest News</strong>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="Events.html">
                                            <strong class="text">Upcoming Events</strong>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="ContactUs.html">
                                    <strong class="text">Contact Us</strong>
                                    <span>Contact Us</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

</body>

</html>

Or if you are including in a file with these tags already, just use the meat without html and header tags:

<div class="headbot">
    <div class="container">
        <div class="navbar navbar_ clearfix extra">
            <div class="nav-collapse nav-collapse_ collapse">
                <ul class="nav sf-menu">
                    <li class="active">
                        <a href="index.html">
                            <strong class="text">Home</strong>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://google.com/">
                            <strong class="text">News</strong>
                            <span>News</span>
                        </a>
                        <ul>
                            <li>
                                <a href="CaseStudy.html">
                                    <strong class="text">Case Studies</strong>
                                </a>
                            </li>
                            <li>
                                <a href="http://google.com">
                                    <strong class="text">Latest News</strong>
                                </a>
                            </li>
                            <li>
                                <a href="Events.html">
                                    <strong class="text">Upcoming Events</strong>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="ContactUs.html">
                            <strong class="text">Contact Us</strong>
                            <span>Contact Us</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Actually Sam. Firefox will throw a notice about `` (in source) which should read as ` `. A quick "FYI" ;-) — Funk Forty Niner, Nov 17 '15 at 12:09
I'd added that, must have missed it in the copy! Cheers for pointing out, I shall re-add it :P — Can O' Spam, Nov 17 '15 at 12:10
Stupid question, but why does "the meat" not include the `
` from the original? — Mr Lister, Nov 17 '15 at 12:11
@MrLister, the header will likely be in the source with an ID assoc to it, meaning when you call in via AJAX or `include_once` it will allow the OP to make sure the header is there where it is required and not floating somewhere random :P *and because it was missing the closing tag...* — Can O' Spam, Nov 17 '15 at 12:13
The OP did say they included the include file "at the top of my index.php", so I assumed it was the very first thing in there. You're absolutely right about the missing end tag though... — Mr Lister, Nov 17 '15 at 12:15
@Fred-ii-, sorry to be a pain and sorry mods that this is off topic, but can you direct me to the SO rules about asking a question on another persons question? — Can O' Spam, Nov 17 '15 at 13:13
@Fred-ii-, I have a person on a question that is asking a separate question about a slightly related (but off topic) thing, and I know for a fact that this is against SO terms of use, I just cannot find the corresponding rule guide for it and wondered if you could help? — Can O' Spam, Nov 17 '15 at 13:15
@Fred-ii-, also claiming that I am making it personal! (which is not true, I am trying to adhere to the rules) — Can O' Spam, Nov 17 '15 at 13:17
@Fred-ii-, if it helps, the question is [this one](http://stackoverflow.com/questions/33757067/select-in-php-display/33757219#33757219) - comments on the bottom answer — Can O' Spam, Nov 17 '15 at 13:20
@Fred-ii-, I've done just that! [Meta post](http://meta.stackoverflow.com/questions/310447/asking-an-slightly-related-but-off-topic-question-on-another-persons-question) — Can O' Spam, Nov 17 '15 at 13:30

score 0 · Answer 2 · answered Nov 17 '15 at 12:08

Just remove <html> and <header> tags from the file. And keep code clean like:

<div class="headbot">
    <div class="container">
        <div class="navbar navbar_ clearfix extra">
          <div class="nav-collapse nav-collapse_ collapse">
            <ul class="nav sf-menu">
               <li class="active"><a href="index.html"><strong class="text">Home</strong><span>Home</span></a></li>
               <li><a href="http://google.com/"><strong class="text">News</strong><span>News</span></a></li>
               <ul>
                   <li><a href="CaseStudy.html"><strong class="text">Case Studies</strong></a></li>
                   <li><a href="http://google.com"><strong class="text">Latest News</strong></a></li>
                   <li><a href="Events.html"><strong class="text">Upcoming Events</strong></a></li>
               </ul>
         <!--     </li>  --> <!-- here you have extra </li> tag  -->
               <li><a href="ContactUs.html"><strong class="text">Contact Us</strong><span>Contact Us</span></a></li>
            </ul>
          </div>
        </div>
    </div>
</div>

and include the file as:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
   <?php  include_once('includes/navbar.php');   ?>

   </body>
 </html>

"Include_once" makes html display differently

2 Answers2