Reusing a footer among multiple HTML pages - html

I am working on a web template which provides 5 HTML pages. I was surprised that inside each page there is the same footer section, as follow:
<footer>
<div class="footerrow1">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<a class="smallogo" href="index.html"><img src="img/logosmall.png" alt=""></a>
<ul class="social_icons clearfix">
<li><img src="img/follow_icon1.png" alt=""></li>
<li><img src="img/follow_icon2.png" alt=""></li>
<li><img src="img/follow_icon3.png" alt=""></li>
<li><img src="img/follow_icon4.png" alt=""></li>
<li><img src="img/follow_icon5.png" alt=""></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5>our Location</h5>
<div class="smalladdress">
<p class="mainaddress">9870 St Vincent Place,<br>Glasgow, DC 45 Fr 45.</p>
<p>Freephone:<span>+1 800 559 6580</span></p>
<p>Telephone:<span>+1 800 603 6035</span></p>
<p>FAX:<span class="marginfax">+1 800 889 9898</span></p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5>Overview</h5>
<ul class="list5">
<li>what we do</li>
<li>sales for services</li>
<li>Development Process</li>
<li>Clients</li>
<li>our team</li>
<li>Blog</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5 class="mbotform1">newsletter</h5>
<form id="form1">
<div class="success">Your subscribe request<br> has been sent!</div>
<fieldset>
<label class="email">
<input type="email" value="Enter Your Email">
<span class="error">*This is not a valid email address.</span></label>
<br class="clear">
<div class="btns">Submit</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="footerrow2">
<div class="container">
<p class="footerpriv" style="text-align:center">© <span id="copyright-year"></span> <img src="img/linefooter.png" alt=""> <a class="privacylink" href="index-5.html">Privacy Policy</a></p>
</div>
</div>
</footer>
If I need to modify it, I need to modify each of the 5 HTML pages. I am an ASP.net MVC web developer where i can easily handle this by defining a layout view which each contain all the shared sections.
So my question is how I can manage this inside my web template's HTML pages?

The answer is no* (with an asterik).
*There is some support in HTML5 for include-able HTML but it is very limited.
So little support, in fact, that Firefox ..."has no plans to support HTML imports"...
You may have luck using the Web Components Library to enable cross-browser support, but that may be more trouble than it is worth for a 5 page template.

Related

<div> on same blocks but with spacing

I have a footer I am working on called <footer class="site-footer">, inside this footer there is a container <div class="container"> and inside this container, 3 divisions. col-sm-12 col-md-6 and col-xs-6 col-md-3 (2 of col-xs-6 col-md-3).
What I am doing here is making these 3 divisions on the same block. but with spacing.
I used :
.row{
display: flex;
}
row class is the class that contains these 3 divisions.
The picture below shows what I am asking, I need to make distance between the About, Hot Offers and Links sections. On the other hand the social profiles below should be on the right.
The full code of the footer is:
.row {
display: flex;
}
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
If you want to add space between your blocks you can add padding on your element (your 4 columns).
With Bootstrap you can add (for example) the class "px-2" to each of your column. Like :
<div class="col-xs-12 col-md-3 px-2">
This will add 0.5 inner space on right and left of your column.
Using spacing with Bootstrap : https://getbootstrap.com/docs/4.0/utilities/spacing/
If you don't use Bootstrap, just add padding style property to your element, like :
.column{
padding: 0 0.5rem // will add margin on right and left
}
Also, if you want to add your social profils on the same row, on the right, you have to put you DIV element on the same DIV with class "row", like below.
With the class "col-md-3" on each DIV, the columns will be displayed on the same row from medium screens to extra large screen.
Bootstrap grid system : https://getbootstrap.com/docs/4.0/layout/grid/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<!-- One row with the 4 columns -->
<div class="row">
<div class="col-xs-12 col-md-3 px-2">
<!-- "About" content -->
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3 px-2">
<!-- "Hot Offers" content -->
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Social profiles</h6>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i>FB</a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
</div>
</div>
</footer>
Finally, about your comment on your answer "if I use bootstrap everything works out but some of the text went bold, etc", you can only import bootstrap-grid.css or bootstrap-grid.min.css.
It only includes grid system and flex utilities without all styles on elements.

Anchors no longer function in Safari and Chrome, but work in Firefox

Hi. My portfolio nav menu (list items) no longer functions in Safari and Chrome, but works in Firefox. The creator of this template is no longer available for support. Purchased 5 years ago.
Suggestions (for dummies) to make the anchors work are appreciated. BHNTR.com
———
<div id="main-menu">
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg" id="mobile-menu-button">
<i class="fa fa-bars"></i>
</div>
<div class="col-sm-2 col-lg-2">
<div id="logo-container">
<img src="assets/img/bhntr-logo.svg" alt="bhntr logo">
</div>
</div>
<div class="col-sm-10 col-lg-10">
<nav id="desktop-menu" class="hidden-sm hidden-xs">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>WORK SAMPLES</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
</div>
————

Can't click on links of my footer on mobile version

For my work I had to create a custom homepage for an existing Wordpress website. Since my boss liked my footer I had to implement my own footer in the theme used.
My footer works fine but in mobile version, I can't click on links...
Here is the website: website
Does anyone have an idea ?
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-3 text-left footer-column">
<h3>EB Quad</h3>
<ul>
<li>Accueil</li>
<li>Atelier</li>
<li>Occasions</li>
<li>Contact</li>
<li>Livre d'or</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-left footer-column">
<h3>CF Moto</h3>
<ul>
<li>Quads</li>
<li>Buggys</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-right footer-column">
<h3>Randonnées</h3>
<ul>
<a href="https://www.ebquad.be/randonnees/">
<li>Nos randonnées</li>
</a>
<li>Agenda</li>
<li>Photos</li>
<li>Informations/Tarifs</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-right footer-column">
<h3>Informations</h3>
<ul>
<li><a href="https://www.google.com/maps/place/E.b.+Renove/#50.3840829,4.0316377,15z/data=!4m2!3m1!1s0x0:0xe36a2bfccc6eb3da?ved=2ahUKEwj5r93ciZjfAhVQNOwKHfAYCtQQ_BIwDXoECAYQCA" target="_blank" rel="noopener noreferrer">
Route de Beaumont 10<br>
7041 Givry (Mons)</a></li>
<li>info#eri-renove.be</li>
<li>0495/447.304</li>
</ul>
</div>
<!-- .footer-widget-wrap -->
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<div style="font-size:12px; margin:auto; text-align:center;">Site réalisé par:</div>
<a href="http://www.mds-digitalagency.be" class="watermark-link" target="_blank"><img src="https://www.ebquad.be/wp-content/uploads/2018/12/mds_logo.png"
style="width: 64px; margin-bottom:30px;" alt=""></a>
</div>
<div class="footer-bottom-wrap col-md-12">
EB QUAD © Tous droits réservés | Conditions générales
</div><!-- .footer-bottom-wrap -->
</div><!-- container -->
Thanks
Your .footer-bottom-wrap covers the whole footer. Add display: inline-block to this element and all works fine.
Add this css inside your stylesheet
.footer-bottom-wrap {float: left;}
Since your links are float elements they aren't displayed as the normal flow, and your .foote-bottom-wrap elemnt is not a float element this is why this element will cover all of your links.. you can fix it using this class..
.footer-bottom-wrap {
...
overflow:hidden;
}
This property fix this behavior.. you can find a good tutorial to understand float behavior here
Add this in your style.css line number 380 "overflow: hidden;"
It's caused by your css code just try to add
via HTML
<div class="clearfix"></div>
<!--before-->
<div class="footer-bottom-wrap col-md-12">
Or via CSS
.footer-bottom-wrap {
color: #787977;
overflow: hidden;
}

How to add an h2 into a MeanMeanu container

Im working on a website that uses the meanmenu, and Ive been struggling for two days on how to get a title to appear inside the mean menu container.
heres my html for the menu:
<div class="row">
<div class="col-lg-4 col-md-8 col-sm-4">
<h2>Title Text</h2>
</div>
<div class="col-lg-8 col-md-12 col-sm-12 hidden-xs">
<div class="main-menu float-right">
<nav>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div class="hidden-sm hidden-lg hidden-md col-sm-2">
<div class="mobile-menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li class="hidden-xs">What We Do</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Heres how it looks expanded:
Collapsed I can't figure out how to get it to stay inline:
I've seen a few posts on similar issues but nothing has worked for me. Im wondering if anyone has done this before?
This happens because you use bootstrap classes not in a right manner
This should works (hope so, because you hide .css from us :) )
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-8 col-lg-4">
<h2>Title Text</h2>
</div>
<div class="visible-xs col-xs-6">
<div class="mobile-menu">
</div>
</div>
</div>
maybe cuz u didnt set col-xs-* grids for your Title Text ( hence its taking 12 columns) try that and if possible please post a jsfiddle :)

Bootstrap 3 Text on the right of thumbnails

I have a question, basically using the thumbnails is ok, and you can get text beneath the tumbnail but i would like to put like 3 tags next to the thumbnail, something like that and would like to have:
Or those parameters outside of the border, but the border should be very close to the thumbnail ...
The code is following:
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
<ul>
</a>
</div>
From the post and responses i get the following in the fiddle, as well as in my solution, i marked it yellow, as you can see the border is somehow on the top now :( :
This is final screen, still broken: :(
The problem is that default bootstrap display property is set to block. Just change it to inline-flex or inline-block and thats it. For example:
<div id="someId" class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>
Just set id and in css write
#someId .thumbnail{
display: inline-flex;
}
that's quite easy, just divide the region in 2 equal parts and fill in the contents.
http://jsfiddle.net/fatgamer85/D5M7E/3/
<div class="col-md-6">
<a href="#" class="thumbnail">
<div class="col-md-6">
<img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
</div>
<div class="col-md-6">
<ul>
<li>Title</li>
<li>Location</li>
<li>Price</li>
</ul>
</div>
</a>
</div>