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

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

javascripthtmlcssdatatables

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

htmlcss

Incorporating list view separators using JQuery Mobile

I recently started using the Jquery Mobile Flat UI Theme and I'm really impressed. However, I would like to enhance it by adding a separator between each listview. Here is my current listview: Can someone please advise me on which code I need to add ...

jquerycsslistviewjquery-mobile

Ways to adjust the color of a navbar link according to the current page you are visiting?

I'm looking to implement a feature on my website where the area around the nav-link darkens when someone navigates to a certain page, making it easier for them to see which page they are currently on. I am working with Bootstrap v4.3.1 and Razor Pages ...

htmlcssbootstrap-4

Django experiencing issue of "Unable to locate view" even though the view is clearly defined

Having an issue with the django 4.0.4 framework, I am seeing the error message "Reverse for 'upload' not found. 'upload' is not a valid view function or pattern name". The strange thing is that it was working fine earlier today, and I&a ...

pythonhtmldjangodjango-viewsdjango-urls

Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...

jquerycssreplacestylesheet

Strategies for Resolving the IE 8 Issue with Table Row Background Images

Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8. In short, when you add a background image to a table row, the background is showing up in all the inner cells as well. ...

cssdebugginginternet-explorer-8background-imagecss-tables

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

I have successfully integrated a Chatbot component into my Next.js application. https://i.stack.imgur.com/BxgWV.png Now, I want to make this component available for anyone to use on their own website by simply adding a tag. My initial approach was to cre ...

javascripthtmlreactjswebpacknext.js

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

My HTML page contains the following codes: <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/> <input type="button" class="sin ...

javascriptphpjqueryhtmlforms

I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

I've been trying to center a paragraph in my project but it's not working out. I attempted using margin:0px auto; and the text-center features, but they didn't have the desired effect. <div class="row text-center"> <p> You c ...

htmlcssbootstrap-4

Is it possible to apply a click effect to a specific child element of a parent using jQuery?

Struggling to figure out how to modify this jQuery code so that only the parent of the clicked button displays its child. Currently, all children are displayed when any button is clicked, not just the one within the targeted parent. I attempted using $(t ...

htmljquerycss

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

javascripthtmlcssbootstrap-5

Tips for Styling "Opened" Elements within the <Summary><Details> Web Design in HTML using CSS? (a color coding challenge)

I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS. There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics: My goal is for a ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Vertically center the container

I am struggling to center my container div vertically, similar to how it is horizontally aligning with margin: auto;. Despite searching online for solutions, I have not been successful in finding a method that works for me. It is surprising to me that in t ...

htmlcssvertical-alignment

Title Bar: Excessive gap; inaccurate navigation to nearby link

I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page. No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It ...

htmlcss

When a div tag containing PHP is empty, it should either be hidden or show specific text based on your requirements

Among the plethora of unanswered queries regarding hiding empty divs, I find myself unable to make any of the suggested solutions work. Hence, I am putting forth my own question. On my webpage, there is a specific section dedicated to showcasing various it ...

javascriptphpjqueryhtml

"Troubleshooting: Why Won't insertAfter Function Work with

I have a p Element that I want to wrap inside a span tag. Then, I need to insert it after another p tag with the id output. Despite my attempts, the insertAfter function is not working as expected. $mytext = $("p#test").html(); $myspan = "<span styl ...

javascriptjqueryhtml

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Hi there! I stumbled upon this post (http://stackoverflow.com/questions/7645702/tab-slide-out-using-jquery-need-more-than-one) while experimenting with a plugin. I'm curious if anyone here knows how to integrate this plugin into a menu. My idea is to ...

jqueryhtmlcss

CSS code preventing hyperlink from functioning

My website is almost complete, but I'm running into an issue with some hyperlinks on my event registration page. The first link works fine, but the second one does not. To troubleshoot, I created a test page with just the two links and still encounter ...

htmlasp.netcss

My PHP script is not functioning correctly with Ajax

I am currently working with HTML5, PHP, and JavaScript. My goal is to implement Ajax in order to display the sizes of a selected product when an option is chosen from #productoSeleccionado. However, I believe that there may be an issue with my code as the ...

javascriptjqueryajaxhtml