Header and footer remain unaligned

Bookstore.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>    
ul {
list-style-type: none;
padding: 20px;
overflow: hidden;
background-color: black;
width:1230px;
position: absolute;
bottom: 0;
margin: 0;
left: 0;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
margin:20px;
text-decoration: none;
}
.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-twitter:hover {
  background: #55ACEE;
  color: white;
}
.fa-youtube:hover {
  background: #bb0000;
  color: white;
}
.fa-instagram:hover {
  background: #125688;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}
</style>
<ul>
<li style="float:right;"><a href="https://www.facebook.com/" class="fa fa-facebook"></a></li>
<li style="float:right;"><a href="https://twitter.com/" class="fa fa-twitter"></a></li>
<li style="float:right;"><a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a></li>
<li style="float:right;"><a href="https://www.youtube.com" class="fa fa-youtube"></a></li>
<li style="float:left;"><a>Library2021 &copy;</a></li>

WelcomePage.html

<style>
ul {
    list-style-type: none;
    padding: 20px;
    overflow: hidden;
    background-color: black;
    position: relative;
    top: 0;
    margin: 0;
    left: 0;
    z-index: 1;
}
li{
    float:left
}
li a {
    display:block;
    color: white;
    text-align: center;
    padding: 10px;
    margin:20px;
    text-decoration: none;
}
li a:hover {
    padding: 10px;
    background-color: white;
    color:black;
}
</style>
<ul>
    <li><a href="Home.jsp">HOME</a></li>
    <li><a href="AboutUs.jsp">ABOUT US</a></li>
    <li><a href="ContactUs.jsp">CONTACT US</a></li>
    <li><a href="Store.jsp">STORE</a></li>
    <li><a href="SignUp.jsp" id="l1">SIGN UP</a></li>
    <li><a href="LogIn.jsp" style="float:right;margin:20px 0 0 500px">LOG IN</a></li>
  </ul>

Home.jsp

<html>
<head>

<title>Online Bookshop</title>

<style>

</style>
</head>
<jsp:include page="header.html"/>
<body>
Welcome to the Online Bookshop!
</body>
<jsp:include page="footer.html"/>
</html>

I have been attempting to insert the header and footer files into the Home page, but the result is displaying the footer file throughout the page without the header file being displayed.

htmlcssjsp

Answer №1

header and footer html should be placed inside the <body>. It's also recommended to move your <style> section within the <head> tag or in an external CSS file.

<html>
  <head>

    <title>Library Management</title>

    <style>

    </style>
  </head>
  <body>
    <jsp:include page="header.html"/>
     I don't know
    <jsp:include page="footer.html"/>
  </body>
</html>

Update

Your styles need some adjustment. I've made changes to the CSS concerning two ul elements. Here is a revised version,

<html>
<head>

<title>Library Management</title>

<style>

</style>
</head>
<body>
<style>
ul {
    list-style-type: none;
    padding: 20px;
    overflow: hidden;
    background-color: black;
/*
    position: relative;
    top: 0;
    margin: 0;
    left: 0;
*/
    z-index: 1;
}
li{
    float:left
}
li a {
    display:block;
    color: white;
    text-align: center;
    padding: 10px;
    margin:20px;
    text-decoration: none;
}
li a:hover {
    padding: 10px;
    background-color: white;
    color:black;
}
</style>
<ul>
    <li><a href="FirstPage.jsp">HOME</a></li>
    <li><a href="About.jsp">ABOUT</a></li>
    <li><a href="Contact.jsp">CONTACT</a></li>
    <li><a href="Books.jsp">BOOKS</a></li>
    <li><a href="Register.jsp" id="l1">REGISTER</a></li>
    <li><a href="Login.jsp" style="float:right;margin:20px 0 0 500px">LOGIN</a></li>
  </ul>
I don't know

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>    
ul {
list-style-type: none;
padding: 20px;
overflow: hidden;
background-color: black;
width:1230px;
/*
position: absolute;
bottom: 0;
margin: 0;
left: 0;
*/
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
margin:20px;
text-decoration: none;
}
.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-twitter:hover {
  background: #55ACEE;
  color: white;
}
.fa-youtube:hover {
  background: #bb0000;
  color: white;
}
.fa-instagram:hover {
  background: #125688;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}
</style>
<ul>
<li style="float:right;"><a href="https://www.facebook.com/" class="fa fa-facebook"></a></li>
<li style="float:right;"><a href="https://twitter.com/" class="fa fa-twitter"></a></li>
<li style="float:right;"><a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a></li>
<li style="float:right;"><a href="https://www.youtube.com" class="fa fa-youtube"></a></li>
<li style="float:left;"><a>Copyright &copy;</a></li>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

Can someone please explain the meaning of this error message? I'm new to Angular and currently using Angular 8. This error is appearing on my console. ERROR TypeError: Cannot read property 'invalid' of undefined at Object.eval [as updat ...

htmlangulartypescriptwebangular8

Generating dynamic div elements in a Laravel blade template using a foreach loop

After receiving an object from the controller to the blade using compact, I am utilizing it in my blade file to display the data. <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> <!-- This must regenerate to print next 4 entries--> ...

phphtmllaravel

The total sum of various divs containing a mix of numbers and letters

I have a group of div elements with the same class, each containing a value in the format (X1), (X2),... I need to add up these numeric values only, like 1 + 2 + .... Since these divs are generated dynamically, I won't know how many there will be. How ...

jqueryhtmlsumalphanumeric

The Bootstrap dropdown feature is acting up when included in the header PHP file

I'm having an issue where the dropdown in my header.php file is not working when I include it in my home.php page. The navigation bar appears correctly, but the dropdown feature doesn't work. Can someone please assist me with this? Below are the ...

phphtmlcssdrop-down-menutwitter-bootstrap-3

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

htmlcss

I'm encountering an issue where it appears that my ajax method may not be effectively communicating with my webservice

I am currently working on calling a webservice using an ajax request with the intention of retrieving clinical cases within a specific date range (for example, between 2015-01-01 and 2016-06-08). The webservice functions perfectly when tested individually. ...

jqueryhtmlsqljsonajax

problem with selection of date and month in dropdown list with jquery

Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to en ...

jqueryhtmlcss

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

htmlseleniumselenium-webdriverxpath

The background image in the hovering textbox shifts and changes size

I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...

htmlcsskendo-uitextboxkendo-asp.net-mvc

Loading templates dynamically within ng-repeat is a powerful feature that enhances the flexibility and

I need help loading a template dynamically while using an ng-repeat: <ul> <li ng-repeat="prop in entity" > <div ng-include src="prop.template"></div> </li> </ul> The value of prop.template is the URL of ...

htmlangularjs

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

javascriptjqueryhtmlcanvas

What is the best way to manage horizontal scrolling using buttons?

I was hoping that when the button is clicked, the scroll would move in the direction of the click while holding down the button. Initially, it worked flawlessly, but suddenly it stopped functioning. export default function initCarousel() { const carous ...

javascripthtmlcss

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

Unchecking random checkboxes within a div using jQuery after checking them all

Once a link is clicked on, all checkboxes within that particular div will be checked. function initSelectAll() { $("form").find("a.selectAll").click(function() { var cb = $(this).closest("div").find("input[type=checkbox]"); cb.not(":checked" ...

javascriptjqueryhtml

How to position multiple CSS background images effectively?

Greetings all! I'm seeking advice on how to add a background image to the right of the description and left of the first post column. Any tips on proper placement? Appreciate any help :) ...

cssimagebackgroundtumblr

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Currently, I am faced with a situation where I have a lengthy list of entries that I need to loop through and add a row to a table for each entry. With about 2000 entries, the rendering process is slowing down considerably. Is there a way to limit the disp ...

htmlangulartypescript

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

htmlcss