Question 303264 in Html Question posted in
Some basic documentation can be found here.

I have a problem merging navigation bar and footer html file together in my base html

I’ve been trying to figure out how to include the two templates in my base html and I found no success. I’m not certainly familiar with {% include %} and {% extends %} function and I believe I am not using it correctly to fix problem.

With that being said, I added my navigation bar html using {% include %} on my base html along with my footer html also using with {% include %} as shown. The result is only the footer html appeared meanwhile the navigation bar html only resulted to a horizontal line beneath the search bar.

{% load static %}
   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>home</title>
      <link rel="stylesheet" href="/static/css/homestyle.css">
   </head>
     <body>
        {% include 'webapp/templates/pages/navbar.html' %} <!-- navigation bar html -->
        {% include 'webapp/templates/pages/footer.html' %} <!-- footer html-->
     </body>
   </html>

<!--navigation bar html -->
    {% load static %}
    <!DOCTYPE html>
    <html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>navbar</title>
      <link rel="stylesheet" href="/static/css/navbar.css">`

 `  </head>
      <body>
        <nav class="login_nav">
          <p> login </p>
        </nav>
       <hr class="solid">
        <nav>
          <img src="/static/images/user_logo.png">
            <ul class="nav_links">
              <li><a href="http://127.0.0.1:8000/artists/"> apple </a></li>
              <li><a href="http://127.0.0.1:8000/gallery/"> banana </a></li>
              <li><a href="http://127.0.0.1:8000/about/"> grape </a></li>
           </ul>
        </nav>
      <hr class="solid">
      </body>
    </html>

[`<!--footer html -->
     {% load static %}
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <title>footer</title>
         <link rel="stylesheet" href="/static/css/footer.css">
      </head>
     <body>
     <nav>
         <p class="a"> Google </p>
         <p class="b"> 1600 Amphitheatre Parkway, Mountain View, CA </p>
     </nav>
    </body> 
    </html>`]

I want to merge this two together in my base html for it to have a navigation bar and footer below.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
</head>
   <body>
       <div class="navbar">
            <link rel="stylesheet" href="/static/css/navbar.css">
      <nav class="login_nav">
          <p> login </p>
      </nav>
      <hr class="solid">
      <nav>
          <img src="/static/images/SALVALOZA_logo.png">
          <ul class="nav_links">
              <li><a href="http://127.0.0.1:8000/artists/">artists</a></li>
              <li><a href="http://127.0.0.1:8000/gallery/">gallery</a></li>
              <li><a href="http://127.0.0.1:8000/about/">about</a></li>
          </ul>
      </nav>
     <hr class="solid">

       </div>
       <div class="footer">
           <link rel="stylesheet" href="/static/css/footer.css">
    <nav>

    </nav>

       </div>
   </body>
</html>

    Here's my page source


  2. 0

    In your included pages you are including an entire HTML page. You only want to be including the HTML tags that fit inside the overall template as you are including a subsection of the page, not IFRAMEing in an entire page – so basically remove everything except what’s within your body tags in the included pages (remove the body tag as well).

    You’ll need to switch the CSS in the included pages to the initial template <head> section.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search