Header and footer not getting adjusted

Question

Footer.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>Copyright &copy;</a></li>

Header.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="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>

FirstPage.jsp

<html>
<head>

<title>Library Management</title>

<style>

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

I have been trying to add the header and footer file in the FirstPage file but the output of FirstPage is showing the footer file all over the page and no header file.

Muthu Kumaran · Answer 1 · 2017-07-24T16:30:42.700

0

header and footer html should be inside the <body> body. Also move your <style> inside the <head> tag or put in the 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 are completely messed up. I've commented some css in two ul places. Here's a quick fix,

<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>

edited Jul 24 '17 at 16:30

answered Jul 24 '17 at 16:11

Muthu Kumaran

17,682
5
47
70

Putting inside the body doesn't work. What do you mean by putting the style inside the head tag? – Jatin Bisht Jul 24 '17 at 16:19
All styles are should be placed inside the `` as per w3c standards. – Muthu Kumaran Jul 24 '17 at 16:23
Issue is your styles is completely messed up. Updated my answer – Muthu Kumaran Jul 24 '17 at 16:29
So i should give them id and then add styles??\ – Jatin Bisht Jul 24 '17 at 16:42
Yes, you can use `id` or `class` – Muthu Kumaran Jul 24 '17 at 16:44
I used it but now whole screen is black!! – Jatin Bisht Jul 24 '17 at 16:49
did you remove `position: absolute` and `position: relative` from two `ul` styles? – Muthu Kumaran Jul 24 '17 at 17:01
if I remove those two the tabs appear but they are not placed correctly. – Jatin Bisht Jul 24 '17 at 17:05
No, the styles should be placed exactly after the ``, not inside it. – Fotis Grigorakis Jul 25 '17 at 06:09
@JatinBisht You need to find a work around to fix the problem. Because I don't know what exactly you are building. I just pointed out where the issue is. – Muthu Kumaran Jul 25 '17 at 06:32
@FotisGrigorakis No, that's definitely wrong as per W3C standards. See https://stackoverflow.com/questions/1303416/does-style-have-to-be-in-the-head-of-an-html-document – Muthu Kumaran Jul 25 '17 at 06:37
it is temporarily solved. I just used stylesheets and it worked. – Jatin Bisht Jul 26 '17 at 07:08

Header and footer not getting adjusted

1 Answers1