Is there a way to smoothly insert HTML codes into all website pages without compromising the CSS design? I've attempted using but found it messy. Is there a simpler method to insert the HTML file into other files?
The HTML file I'm trying to load in the pages is for a menu tab.
Menu Tab Code:
<nav id="tab">
<ul>
<li><a href="index.html" id="tabb">HOME</a></li>
<li><a href="codes/index.html" id="tabb">CODES</a>
<ul id="codeul">
<li><a href="codes/mirc_downloads/index.html" id="tabb">mIRC</a></li>
<li><a href="codes/batch_downloads/index.html" id="tabb">BATCH</a></li>
<li><a href="codes/samp_downloads/index.html" id="tabb">SA-MP</a></li>
</ul>
</li>
<li><a href="gallery" id="tabb">GALLERY</a></li>
<li><a href="#" id="tabb">CONTACT</a>
<ul id="contul">
<li><a href="http://facebook.com/areeb12/" id="tabb">Facebook</a></li>
<li><a href="http://twitter.com/AreebBeigh/" id="tabb">Twitter</a></li>
<li><a href="https://plus.google.com/u/0/107540768248951141539" id="tabb">Google</a></li>
<li><a href="http://instagram.com/areebbeigh" id="tabb">Instagram</a></li>
</li>
</ul>
</ul>
<div id="clear"></div>
</nav>
CSS Menu Tab Styling:
/* Styles for Nav tab */
#tab {
background-color: #000;
padding: 1px 50px;
opacity: 0.7;
position: relative;
top: 65px;
margin-top: -64px;
}
#tab ul li a {
padding: 15px 14px;
text-decoration: none;
font-weight: bold;
font-size: 24px;
background-color: black;
border-right: 1px solid white;
border-left: 1px solid white;
color: white;
}
... (CSS styling continues)
#clear {
clear:both;
}
If more information is required, visit the website at www.areeb-beigh.tk
The menu tab is currently only on the index.html page to avoid duplicating the lengthy HTML code on every single page. Editing the same code repeatedly would be tedious.
As a beginner, I appreciate simple solutions! Thank you in advance for your help.
Best regards, Areeb