Insert an HTML file with internal CSS into another HTML file

I have created a separate HTML file with internal CSS for my Navigation Bar. I want to incorporate the same in all the other pages on my website. I tried <object data="./nav.html"></object> but it doesn't work properly. This is how my Navigation Bar should look like and this is how it looks when incorporated in another HTML file. Is this possible without jscript or any other file format?

Code - nav.html

<html>
<style>
body{
   font-family: Georgia, 'Times New Roman', Times, serif;
   background-color: whitesmoke;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}
.navbar{
   overflow: hidden;
}
.navbar a{
   float: left;
   font-size: 16px;
   color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}
.dropdown{
   float: left;
   overflow: hidden;
}
.dropdown .dropbtn{
   font-size: 16px;  
   border: none;
   outline: none;
   color: black;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn{
   background-color: #ddd;
}
.dropdown-content{
   display: none;
   position: absolute;
   background-color: whitesmoke;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a{
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}
.dropdown-content a:hover{
   background-color: #ddd;
}
.dropdown:hover .dropdown-content{
   display: block;
}
.underline{
   text-underline-offset: 3px;
}
</style>

<body>
<div class="navbar">
 <a class= "active" href="#dashboard"><u 
 class="underline">Dashboard</u></a>
 <a href="#add_task"><u class="underline">Add Task</u></a>
 <div class="dropdown">
  <button class="dropbtn"><u class="underline">Masters</u></button>
  <div class="dropdown-content">
    <a href="#users"><u class="underline">Users</u></a>
    <a href="#clients"><u class="underline">Client</u></a>
    <a href="#projects"><u class="underline">Project</u></a>
  </div>
</div> 
<div class="dropdown">
  <button class="dropbtn"><u class="underline">Reports</u></button>
  <div class="dropdown-content">
    <a href="#tasks"><u class="underline">Tasks</u></a>
    <a href="#hourly"><u class="underline">Hourly</u></a>
    <a href="#log"><u class="underline">Logs</u></a>
  </div>
 </div> 
</div>
</body>
</html>

Code - list page

    <html>
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    td{
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    th {
      border: 1px solid #dddddd;
      text-align: center;
      padding: 8px;
    }
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    button {
      background-color: #050e6f; 
      width: auto;
      color: white; 
      padding: 8px; 
      margin: 8px 0px; 
      border: white; 
      cursor: pointer;
      font-family: Georgia, 'Times New Roman', Times, serif;
      border-radius: 5px;
    }
    button:hover {
      opacity: 0.5;
    }
  </style>

  <body>
    <object data="./nav.html"></object>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Name</th>
          <th>Email ID</th>
          <th>Mobile Number</th>
          <th>Role</th>
          <th>Status</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>21/09/2022</td>
          <td>Arzan Malegamwalla</td>
          <td>arzan@datavoice.co.in</td>
          <td>9702011122</td>
          <td>Manager</td>
          <td>Enable</td>
          <td>
              <center><button type="submit">Edit</button></center>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Insert an HTML file with internal CSS into another HTML file

0 Answers